Cara Menyembunyikan Buku Tamu ( Shoutmix )

Selamat malam teman - teman Blogger semua, pada kesempata ini saya mau berbagi tentang cara menyembunyikan Buku Tamu ( Shoutmix ) agar tidak terlalu memakan tempat di halaman Blog kita, yaitu dengan cara menampilkan icon kecil di samping kanan atau kiri halaman blog kita, yang ketika di klik akan keluar buku tamu dalam ukuran sebenarnya.Contohnya dapat dilihat pada gambar berikut ( Gambar 1 ).

Gambar 1

Gambar 2

Oke langsung saja, caranya ikuti langkah berikut :

1. Kunjungi situs Shoutmix di sini, kira-kira kalau tidak berubah tampilannya seperti Gambar 2 diatas. Dan bagi yang belum punya account silahkan daftar gratis.
2. Setelah dapat kode ( Embed Codes )nya, silahkan Loggin ke Blogger, pilih Design / Letak, kemudian pada Page Elements / Tata letak, pilih Add a Gadget.
3. Copy - Paste kan kode dibawah ini :

Kode untuk ditempatkan di sebelah Kanan : <style type="text/css"> #gb{ position:fixed; top:100px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:400px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIFjOFT9R1nviZGt7faXy4WoeW4pDwKidMh5b6K8KEZjKXdSOgEp7NDLYyB_fuf2SnLa6Q5aV_88g2UYX9J2HsAKLKzc-jKuy6YsSkXmfNC1odCvUDri059mMwgA0y-MCNt40uirA3x0H/s288/Buku+Tamu.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"> Ganti dengan Embed Code ShoutMix anda <br/> <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> Kode untuk ditempatkan di sebelah Kiri : <style type="text/css"> #gb{ position:fixed; top:100px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:400px; width:30px; float:right; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIFjOFT9R1nviZGt7faXy4WoeW4pDwKidMh5b6K8KEZjKXdSOgEp7NDLYyB_fuf2SnLa6Q5aV_88g2UYX9J2HsAKLKzc-jKuy6YsSkXmfNC1odCvUDri059mMwgA0y-MCNt40uirA3x0H/s288/Buku+Tamu.png') no-repeat; } .gbcontent{ float:right; 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.left = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> Ganti dengan Embed Code ShoutMix anda <br/> <div style="text-align:left"> <a href="javascript:showHideGB()"> [tutup] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.left = (30-gb.offsetWidth).toString() + "px"; </script>

Cat : 

• Kode yang berwarna merah silahkan ganti sesuai selera.
• Kode yang berwarna biru silahkan ganti dengan Embed Code ShoutMix anda.

Selamat..!! Buku Tamu anda telah berhasil dibuat, jangan lupa kasih komentarnya yaa.. Terimakasih.

Posted in: Tips ngeBLOG