SERBA-SERBI :

Cara Membuat Buku Tamu Tersembunyi di Blog

Ditulis oleh Andre pada hari Selasa, 22 Mei 2012 | 07.13


Belakangan ini, banyak blog yang Buku Tamu-nya (shoutbox) sudah tidak tampil penuh dihalaman blog, tetapi 'disembunyikan' disebelah kiri/kanan dan terdapat tulisan "Buku Tamu" yang jika diklik, akan memunculkan buku tamu tersebut. Ini tentu saja membuat widget shoutbox terlihat lebih professional dan menarik, serta tidak memakan ruang di sidebar. Saya sendiri pernah menerapkan sistem shoutbox tersembunyi ini di blog saya. Lalu, bagaimana membuatnya? Tidak terlalu sulit, ikuti langkah berikut:

  1. Login ke akun Blogger Anda.
  2. Klik tab Rancangan.
  3. Klik Tambahkan Gadget, lalu pilih HTML/JavaScript.
  4. Lalu copy dan paste-kan kode berikut ini, lalu simpan dan lihat hasilnya.

    <!-- left hidden chatbox by http://speedy-indonesia-08.blogspot.com START -->
    <style> #hcl { position:fixed; top:135px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:30px; float:left; cursor:pointer; background:url('http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/393656_2400861740213_1211158261_31829773_579178586_n.jpg') no-repeat; } .hclcontent { float:left; border:4px solid #5F9EA0; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">


    PASTE-KAN KODE HTML SHOUTBOX ANDA DISINI


    <div style="text-align: right; font-size: 10px;">
    Widget by
    <a href="http://www.andrepanggabean.com">
    AndrePanggabean.com
    </a>
    </div>


    <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- left hidden chatbox by http://www.andrepanggabean.com END --></div>


Silahkan anda lihat sendiri hasilnya, selamat mencoba :)
Share this article :

Artikel Terkait:

0 komentar:

Posting Komentar

 
Copyright © 2011. Galeri Bocah - by Andry Andreas Panggabean | Blog Belajar SEO | Optimasi Blog di Google
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger