Langkah-Langkah:
1.Login Blogger » Layout
2.Klik Tambah Gadget » HTML/Javascript
3.Pastekan kode dibawah ini
ZACKMARU CHATBOX VERSION
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
#panel {
height: auto;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
background: url(http://i1104.photobucket.com/albums/h328/bitxp86/chatbox.png) no-repeat center top;
}
.btn-slide {
text-align: center;
width: 240px;
height: 40px;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="panel">
<div style="background-color:#dedede; -moz-border-radius:15px; border:1px solid #dedede;padding:4px ">
KODE CHATBOX/SHOUTBOX PUNYA SOBAT
</div><Script Language='Javascript'>
document.write(unescape('%3C%63%65%6E%74%65%72%3E%3C%62%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%7A%61%63%6B%6D%61%72%75%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%32%30%31%32%2F%31%30%2F%6D%65%6D%62%75%61%74%2D%73%68%6F%77%68%69%64%65%2D%63%68%61%74%62%6F%78%2D%64%65%6E%67%61%6E%2D%6A%71%75%65%72%79%2E%68%74%6D%6C%27%20%74%69%74%6C%65%3D%27%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%20%42%79%20%5A%61%63%6B%6D%61%72%75%27%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%62%3E%3C%2F%63%65%6E%74%65%72%3E'));
</Script>
</div>
<p class="slide"><a href="#" class="btn-slide"></a></p>
ORIGINAL VERSION
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
#panel {
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjha9UaIdOeTsDYqC7rrkHR4nxTvJXpkrl_CRI-XQ6nYK-j_5Bc8BoDuXNaAO9AwgF2rcV5qdpZpaS9xAuzqU72IfYzQTOpLyKg8kv-6YpQupCCb-QLOWAcPvL3Zk-g6EAawTFPeNOV4eE/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAHK7K67kpiDBCaejMgo3hW3PtpjNgFSOHgQ4z9bNgTuL9ChBCAnZEl5qqZ2ukuHs78CwDqHmWoBS6LdLU0kDyiZr1PUYFGtCcKeTmQYk78odQWZcg2_S6qCGkrZ36jYnHJpQZb-Kzek/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="panel">
KODE CHATBOX/SHOUTBOX PUNYA SOBAT</div>
<Script Language='Javascript'>
document.write(unescape('%3C%63%65%6E%74%65%72%3E%3C%62%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%2F%32%30%31%31%2F%30%39%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%73%68%6F%77%68%69%64%65%2D%63%68%61%74%62%6F%78%2D%64%65%6E%67%61%6E%2E%68%74%6D%6C%27%20%74%69%74%6C%65%3D%27%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%20%42%79%20%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%27%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%62%3E%3C%2F%63%65%6E%74%65%72%3E'));
</Script><p class="slide"><a href="#" class="btn-slide">
Chatbox</a></p>
5.Klik Simpan dan liatlah hasilnya
INFO : Silahkan ganti tulisan bewarna merah sesuai keinginan sobat
Sumber : http://www.bit-xp.com/2011/09/cara-membuat-showhide-chatbox-dengan.html
Artikel keren lainnya:
Nice Sob !! =))
BalasHapuswow !!!!
BalasHapusGaagal Pertamax (┌'o')┌
BalasHapushohoho
BalasHapusjiahh sok buatan loh itu aja buatan kk utta -_-
BalasHapus#MALU OI