Membuat Buku Tamu Menarik

Tutorial ini masih berhubungan dengan postingan saya Membuat Garis Tepi Gambar Berdisko. Buku tamu menarik yang saya maksud adalah buku tamu melayang yang merupakan widget shoutmix atau cbox tersembunyi di sisi kiri blog dan ditampil jika diklik. Contohnya bisa Anda lihat di sebelah kiri blog kesayangan saya ini.

Cara membuatnya adalah sebagai berikut:

1. Login ke akun blogger Anda.
2. Pilih Rancangan, lalu Tambah gadget HTML/Javascript.
3. Masukkan script berikut ke dalam gadget HTML/javascript tersebut:
   
   

   <style type="text/css">
   #gb{
   position:fixed;
   right:450px;
   z-index:+1000;
   }
   #tabGb {
   position:fixed;_position:relative;top:35px; left:0;
   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:4px solid #fff;
   background:#666;
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   padding:3px;
   }
   
   </style>
   <script type="text/javascript">
   function showHideGB(){
   var gb = document.getElementById("gb");
   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("gb");
   var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   gb.style.top = x.toString() + "px";
   if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="gb">
   
   <div class="gbcontent">
   
   <!-- LETAKKAN KODE SHOUTBOX ANDA DI SINI! -->
   
   <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Tutup Buku Tamu" 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="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTBdcqBcii0KgOW76fNKc446m4p2lGe4oMbnH-iEL1iRMXsnkiNn4owTckxMzB3BmWdaqM21bHx7YYimPRziq8-uheMb-9CE2FdWCSp5WM4GdHF9vnAmAyN1BrjvhyphenhypheniobgEHsg4zozs4/" id="flash0" class="flashgroup" /></a></div>
   
   
   <style type='text/css'>
   img.flashgroup {border:5px solid white;}
   </style>
   
   <script type='text/javascript'>
   //<![CDATA[
   
   /*
   Script By http://www.javascriptkit.com/script/script2/flashimage.shtml
   */
   
   //Warna garis yang berkelap-kelip
   var flashcolor="#00FF00"
   //Kecepatan garis berkelap-kelip (semakin rendah, semakin cepat)
   var speed=150
   
   /////No need to edit below here////
   var curborder=new Array()
   var increment=0
   var flashobject=new Array()
   
   if (document.all||document.getElementById){
   while (document.getElementById("flash"+increment)!=null){
   flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style")
   curborder[increment]=0
   increment++
   }
   }
   
   
   function flash(which){
   if (curborder[which]==1){
   flashobject[which].borderLeftColor=flashcolor
   flashobject[which].borderBottomColor=flashobject[which].borderRightColor
   }
   else if (curborder[which]==2){
   flashobject[which].borderTopColor=flashcolor
   flashobject[which].borderLeftColor=flashobject[which].borderBottomColor
   }
   else if (curborder[which]==3){
   flashobject[which].borderRightColor=flashcolor
   flashobject[which].borderTopColor=flashobject[which].borderLeftColor
   }
   else if (curborder[which]==4){
   flashobject[which].borderBottomColor=flashcolor
   flashobject[which].borderRightColor=flashobject[which].borderTopColor
   }
   
   if (curborder[which]<=3)
   curborder[which]++
   else
   curborder[which]=1
   }
   
   if (document.all||document.getElementById){
   for (z=0;z<flashobject.length;z++){
   var temp='setInterval("flash('+z+')",'+speed+')'
   eval(temp)
   }
   }
   
   //]]>
   </script>
   

4. Simpan Gadgetnya dan selesai.

Penting: Perhatikan script yang saya beri warna. Tulisan berwarna kuning harus Anda ganti dengan kode shoutbox/chatbox Anda. Yang berwarna merah ganti dengan URL gambar yang terletak di sisi blog Anda. Tulisan yang berwarna hijau ganti dengan warna kelap-kelip gambar di samping blog Anda dan angka 150 ganti sesuai selera Anda.