›

Membuat Buku Tamu Melayang Di Blogger

Bagaimana cara membuat buku tamu di blog yang melayang di sebelah blog, yang berarti bahwa meskipun kita scroll buku tamu masih tetap akan mengikuti layar (fixed). Cara membuatnya, kita cukup hanya menggunakan HTML dan coding JavaScript.

Kita dapat menginstal kode shoutbox secara langsung di blog sebagai widget dan akan muncul sejalan dengan widget blog lainnya, tetapi untuk meningkatkan tampilan blog, akan lebih baik untuk menempatkan bukutamu di tempat lain, seperti disebelah kiri atau di sisi kanan blog. Adapun buku tamu tersebut hanya menampilkan tombol yang  jika diklik  akan menampilkan kotak dialog shoutbox.

Fungsi buku tamu ini adalah untuk memungkinkan pengunjung blog untuk mengirimkan komentar mereka dengan cepat dan mudah. Berikut ini langkah cara pemasangan Buku Tamu Melayang di Blog:
  1. Masuk ke blogger dan silakan login dengan akun Anda
  2. Pilih Tata Letak 
  3. Pilih Page Element / elemen halaman
  4. Klik Tambah Gadget / Tambah Gadget
  5. Kemudian pilih "HTML / JavaScript"
  6. Kemudian salin dan tempel kode di bawah ini:
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVECVJq43LIfd4qXF15qFK8OUDi7b2J_6aLpEojxWUnOMp7VcjYDKZe1rCbIrvtKV7-ETFVN2SSpujKWkW7BbPJE9VVvWZcEsejPWorsr4m9x7_yZoJorZvHp-dSU4CwROdH2KkPGY6Wjf/') 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">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?m4n0">View shoutbox</a>
</iframe>
<br />
<a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a>
<br />
 <!-- End ShoutMix -->
<br/> Anda berminat buat Buku Tamu seperti ini?<br/> Klik di <a href="http://anaksmanda.site/2011/02/membuat-buku-tamu-melayang.html"> sini </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>

CATATAN :

Silahkan ganti warna tebal dengan kode yang Anda dapatkan dari ShoutMix Ikon buku tamu dapat diubah sesuka hati dengan terlebih dahulu mendesainnya di Photoshop atau CorelDraw, lalu mengunggahnya ke hosting. gambar, seperti photobucket, dll. Lalu ambil URLnya dan pasang di background yang ditandai warna merah pada coding diatas.