Cara Membuat Buku Tamu Tersembunyi Kiri dan Kanan Pada Blogger

Selamat pagi sobat blogger dimana pun anda berada, pada kesempatan kali ini saya akan coba share bagaimana cara memberi buku tamu tersembunyi pada blogger dan mungkin Tutorial ini sudah banyak yang tau bagi blogger proffesional dan belum tentu bagi pengguna baru blogger mengetahuinya. Buku Tamu adalah tempat untuk pengunjung yang sedang online memberikan daftar hadir di sebuah situs / blog. Komponen dari buku tamu adalah dengan memasukkan nama, email, dan message (pesan) kepada pemilik blog.

Buku Tamu ini sering dimanfaatkan untuk meletakkan url link menuju halaman website kita. Beragam Gadget dan Widget Guest Book tersedia di beberapa website yang menyediakan chat box menu secara gratis. Apabila anda belum memiliki guest book silahkan daftar terlebih dahulu di Shoutmix atau Cbox.

Disana anda hanya perlu melakukan pendaftaran dan melakukan optimisasi warna bukutamu, warna text, background dan sebagainya. Setelah anda melakukan personalisasi, copy kode HTML / Javascript yang diberikan.

Untuk menghemat ruang, guest book ini dapat disembunyikan di bagian scroll kiri kita. Jadi Buku Tamu tersebut tidak melayang di blog, tetapi akan dibuat auto hide dengan tombol click pada mouse. Berikut panduan pembuatan widget buku tamu tersebut.

Cara Membuat Buku Tamu Tersembunyi :
1. Masuk ke Blogger.com
2. Pilih Layout > Tambah Gadget / Widget
3. Klik HTML/Javascript
4. Masukkan kode di bawah ini ke dalam kotak box tersebut.

Buku Tamu Sebelah Kanan

<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/AVvXsEgm1W_l_p8zel1Uw_0g_5S4RIacaz8cr3p3RtmTkWw9do0OLzh57qJRKKV8HkKo0Emws7IhKlIYQ-8Ww2n_DGRs77c6ElBGCcxiKAvpY2ZKg5l5LYRkuZ0JqZpgH8tkpYYANoY1FiW3PRs/s1600/jumran-xp.blogspot.com-buku-tamu-sebelah-kanan-pada-blogger.jpg') 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">
<Letakkan disini kode Buku Tamu Anda>
<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://sazuke-4rt.blogspot.com/2013/01/buku-tamu.html" target="_blank">Sasuke Blog</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

 Buku Tamu Sebelah Kiri

<style>
#hcl {
position:fixed;top:0px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {height:190px;width:40px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvN_wh_YiTpC3zi_N3MMZ53x3Br30BnNHRXXFLFud4zi1Yomz-pVau5JVP6rQfWi2F4V3EWI0Bhgxx2BEO2twt94UF88ALU3-fjZQVOZYqXVMG6sCeV1yzSEU0kk-aLaRSQcB9dHF28Tw/s1600/jumran-xp.blogspot.com-buku-tamu-sebelah-kiri-pada-blogger.jpg') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#000000;
padding:10px;
}
.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">

<Letakkan disini kode Buku Tamu Anda>

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span >
</span>
<span style="float:right">
<a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://upload.kapanlagi.com/c.php?f=201204131052054_bagus3_4f87a2e5a316a.gif" alt="close" title="Click here to Close Cbox" /></a>
</span>
</span></div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

• Tulisan yang warna hijau ganti sesuai url gambar sobat kalau sobat tidak menyukai gambar ini.
• Ganti tulisan <Letakkan disini kode Buku Tamu Anda> (berwarna merah) dengan kode Guestbook yang anda buat di Shoutmix atau Cbox.ws tadi.

• Simpan Template.
  

Buku tamu tersebut sudah terpasang rapih dan lebih optimal di blog anda. Semoga dapat bermanfaat. Jika ada yang masih belum paham silahkan berkomentar. Anda juga dapat mengganti background gambar buku tamu tersebut pada kode berwarna biru diatas. Demikian artikel mengenai Cara Membuat Buku Tamu Tersembunyi Kiri dan Kanan Pada Blogger..

Semoga artikel ini bisa bermanfaat bagi sobat blogger.

Salam Itnetworking_Support SMKN 2 JENEPONTO.