http://metroworldhost.com/partner/sponsor.php?sid=18342

Cara Membuat Buku Tamu/Guestbook Auto Hide di sisi kanan Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Cara Membuat Buku Tamu/Guestbook Auto Hide di sisi kanan Blog - Jika sebelumnya saya sudah posting artikel tentang "Cara Memasang Buku Tamu di Blog Blogger Blogspot" maka pada kesempatan ini saya akan berbagi cara atau tutorial memasang buku tamu tersebut tersembunyi atau auto hide di sisi kanan blog, dan buku tamu tersebut hanya akan muncul apabila di sorot menggunakan kursor.

Tanpa harus membuang waktu lebih lama lagi silahkan anda ikuti petunjuk berikut ini.

Langkah Cara Membuat Buku Tamu/Guestbook Auto Hide di sisi kanan Blog

pertama anda copy kode di bawah ini.
<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('http://i1290.photobucket.com/albums/b537/Khaeruddin/Buku-Tamu_zpsa8c2a265.gif') 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-radius-bottomleft: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>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=777572&amp;boxtag=9hece6&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-777572" style="border:#000000 1px solid;" id="cboxmain7-777572"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=777572&amp;boxtag=9hece6&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-777572" style="border:#000000 1px solid;border-top:0px" id="cboxform7-777572"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://cafeilmu-yangyang.blogspot.com/2013/03/cara-membuat-buku-tamu-guestbook-auto.html"> widget! </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 :
- Ganti Kode yang saya Berikan Warna Merah dengan Kode buku tamu atau guestbook kalian.
- Kode yang saya berikan warna biru bisa di ganti dengan url gambar buku tamu yang kalian suka.

2. login di blogger[dot]com
3. tata letak
4. tambah gadget
5. pilih HTML/javascript
6. pastekan kodenya dan klik simpan.

Jika berhasil maka tampilannya akan seperti gambar di bawah ini


dan apabila buku tamu tersebut di sorot kursor maka akan terbuka seperti gambar di bawah ini


Sekian Tutorial Cara Membuat Buku Tamu/Guestbook Auto Hide di sisi kanan Blog Yang Dapat saya berikan Semoga Bisa Bermanfaat.

Dokumentasi: Pribadi.

» [Apakah artikel ini bermanfaat? tombol sharenya ada di bawah profil penulis] Thanks for reading Cara Membuat Buku Tamu/Guestbook Auto Hide di sisi kanan Blog


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

0 Response to "Cara Membuat Buku Tamu/Guestbook Auto Hide di sisi kanan Blog"

Post a Comment

Silahkan berkomentar sahabat , berikan saran dan pendapat sahabat , supaya kami dapat memperbaiki di kemudian hari :) .Cek "Notify me" supaya ada pemberithuan balasan via email .