Membuat Buku Tamu Keren di Blog part 2

Untuk ketiga kalinya ini saya akan sharing widget buku tamu,semua pasti sudah tau fungsi buku tamu.Buku tamu(Chatbox)yang akan saya share kali ini sedikit berbeda dengan yang lainya,dulu saya pernah share Membuat Chat Box(buku tamu)melayang,dan versi sebelumnya lagi yaitu Cara Membuat Chat Box (Buku Tamu).Buku tamu yang ini bisa sobat lihat pada blog saya yang sekarang ini dan buku tamu ini adalah buku tamu pertama dan terakhir yang saya terapkan di blog saya(kalo gak salah see..hehehe )karena saya senang dengan efek tampilanya yang cool dan keren(bedanya cool sama keren apa ya?..hehehe).Kalo sobat berminat untuk mencobanya silakan saya akan senang.Mungkin akan ada yang bertanya"Apakah akan membuat loading blog menjadi lama?"Tidak,itu sama saja dengan chatbox yang lainya,justru menurut saya kalo dibandingkan dengan chatbox dengan hide-show seperti pada umumnya chatbox itu lebih ringan ini(efeknya)dan tampilannya lebih keren,So...langsung saja kita menuju tempat teather.

1. Login ke blogger sobat
2. Pilih"Opsi lainya">>Template>>Edit HTML>>Lanjutkan(Jangan lupa centang"Expand Template Widget")
3. Cari kode ]]></b:skin> 
4. kalo udah ketemu paste kode dibawah ini tepat dibawah kode ]]></b:skin>

  <style type='text/css'>
#gb{
position:fixed;
right:350px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:2px solid  #4173af;
background:#ffffff;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:20px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:20px;
padding:10px;
}

</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 25 ? 35 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

 5.Setelah itu "Save template".Sampe disini kita belum selesai.Setelah itu masuh pada
            Tata letak>>tambah gadget>>HTML>>JavaScript
   6.Kopas kode berikut kedalam widget tadi.

<div id="gb"> <div class="gbcontent"> <!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=738910&amp;boxtag=aanqf5&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-738910" style="border:#000000 6px solid;" id="cboxmain5-738910"></iframe></div> <div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=738910&amp;boxtag=aanqf5&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-738910" style="border:#ffffff 1px solid;border-top:0px" id="cboxform5-738910"></iframe></div> </div> <p><span style='float:right;font:italic 10px Viner Hand ITC, Sans-Serif;'><a href='http://planktoon.blogspot.com/2012/07/membuat-buku-tamu-keren-di-blog-part-2.html' target='_blank'>Get This Widget</a></span></p> <div style='clear:both;'/> </div> <!-- END CBOX --> <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a> </center></div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.top = (-400-gb.offsetWidth).toString() + "px"; </script> <div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9N3ukVipycJYmVj7CuFlForKy5gM4TL_gwndG64VNy1R0atH6m12eaCCitVBVkxyCkrFwW0dfU5VkZaCdQaXsHST1WdTiV_o_J4cJpovNAXATUsZnD9h9_swEIdasqCI1byEtBjiHOHI/s1600/guest-book.png" border="0" /></a></div>

   7.Ganti kode yang berwarna merah dengan kode frame chatbook sobat,Setelah itu save.Sekarang sobat bisa menikmati chatbook baru sobat yang lebih unik dan keren.Sekian artikel Membuat Buku Tamu Keren di Blog part 2.

Tweet