Buku tamu

Assalamu'alaikum teman-teman, wah, sudah lama banget yah gag ngepos artikel? maklum, kan lagi persiapan buat ngadepin unas nieh, ni mumpung lagi suntuk dan jenuh banget buat belajar, sedikit mau bagi ilmu tentang biki buku tamu, buku tamu tu kaya' yang dulu pernah saya post, yaitu Cara membuat kotak Shoutbox, ya sejenis itulah, nah tapi kali ini pengen saya buat jadi lebih menarik, disembunyiin dikit gitu, biar keren, hehehe,,,
langsung aja yah ke caranya, , ,

1. Masuk ke tab Rancangan
2. kemudian tambah gadget
3. lalu pilih html/javascript
4. masukkan kode html berikut
   
   <style type="text/css">
   #gb{
   position:fixed;
   top:50px;
   z-index:+1000;
   }
   * html #gb{position:relative;}
   
   .gbtab{
   height:100px;
   width:30px;
   float:left;
   cursor:pointer;
   background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
   }
   .gbcontent{
   float:left;
   border:2px solid #A5BD51;
   background:#F5F5F5;
   padding:10px;
   }
   </style>
   
   <script type="text/javascript">
   function showHideGB(){
   var gb = document.getElementById("gb");
   var w = gb.offsetWidth;
   gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
   gb.opened = !gb.opened;
   }
   function moveGB(x0, xf){
   var gb = document.getElementById("gb");
   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   gb.style.right = x.toString() + "px";
   if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
   }
   </script>
   
   <div id="gb">
   
   <div class="gbtab" onclick="showHideGB()">   </div>
   
   <div class="gbcontent">
   
   (kode buku tamu kamu)
   
   Mau punya buku tamu seperti ini?<br/>
   Klik di
   http://bastomi.blogspot.com/2011/03/buku-tamu.html
   
   </a>
   
   <div style="text-align:right">
   <a href="javascript:showHideGB()">
   [tutup]
   </a>
   </div>
   
   </div>
   
   </div>
   
   <script type="text/javascript">
   var gb = document.getElementById("gb");
   gb.style.right = (30-gb.offsetWidth).toString() + "px";
   </script>
   
   
5. Simpan

pada bagian (kode buku tamu kamu), ganti dengan kode yang kamu peroleh saat kamu membuat shoutboxmu, , ,
sekarang lihat blogmu dan, , ,
Voila, ada sesuatu yang baru?
Enjoy!!!
(^_^)

Artikel Terkait:

>