Cara Membuat Buku Tamu Tersembunyi di Blog

Buku tamu atau lebih kerennya disebut guestbook atau shoutbox dapat disembunyikan (auto hide) di blog supaya tidak memakan ruang halaman blog. Widget buku tamu ini akan bekerja auto hide apabila mouse diarahkan pada widget tersebut. Sebelum membuat auto hide buku tamu di blog, terlebih dahulu anda harus mendaftar di http://www.shoutmix.com/ atau penyedia layanan buku tamu yang lain untuk mendapatkan kodescriptnya atau anda bisa klik link ini : cara membuat dan memasang buku tamu di blog.

Cara membuat buku tamu auto hide di blog
1. Login ke blogger
2. Pilih Tata Letak => Tambah Gadget => Html/javascript
3. Masukkan kode berikut kedalam Html/javascript


<style type="text/css">
#gb{position:fixed;top:20px;z-index:+1000;}* html #gb{position:relative;}
.gbtab{height:150px;width:50px;float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiALvYK56nWGSWZaqoxjh9vwbnuSCJhT8716qiKw_42S9PxPR6U03thxmrEk0gt7GuxEvwKetU5V8sVapoU4I9tH1plob6U_1j0fYUstBia-Z2-S2NNBiV23-cczoTUj2NNjXLDtjd6xk/s1600/buku+tamu.png') no-repeat;}
.gbcontent {float:left;border:1px solid #000000;-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;-o-border-radius-bottomleft:5px;-khtml-border-radiusbottomleft:5px;
-moz-border-radius-topright: 5px;-moz-border-radius-topleft: 5px;background: #F2F2F2; url() no-repeat bottom;padding:10px;}</style>
<script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");
var w = gb.offsetWidth;gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);gb.opened = !gb.opened;
}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}}</script><div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div><div class="gbcontent"><center>
Masukkan kode script buku tamu
<br /><div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank"href="http://lintas-tutor.blogspot.com/2013/10/cara-membuat-buku-tamu-tersembunyi-di.html"> widget by : </a></span>
</div></center></div><script type="text/javascript">var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";</script></div>

Keterangan :
Teks warna hijau diisi dengan kode script buku tamu anda.

Sekian ulasan mengenai cara membuat buku tamu auto hide / tersembunyi di blog, semoga bermanfaat.

tutorial blog

Terlintas

Cara Membuat Buku Tamu Tersembunyi di Blog

Related Posts

Entri Populer