Cara Menciptakan Buku Tamu Auto Hide Di Blogspot

Cara Membuat Buku Tamu / Guest book Auto Hide di Blogspot | Guest book atau biasanya disebut dengan Buku tamu di blog tutorial blogger untuk Blogger Pemula. Pada kesempatan yang cuku menyenangkan untuk saling berbagi, sesudah posting Cara Membuat Blockquote Postingan Blog kali ini kang zain share Cara Membuat Buku Tamu auto hide di Blogspot, sebelum ketutorialnya terlebih dulu kang zain kasih gambarnya dan terangkan mengenai Auto hide Shuotbox semoga sahabat tidak bingung. 

Auto hide Shuotbox ialah efek yang akan menciptakan buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse/lewatan pertama muncul lewat lagi nutup ). Ini akan menciptakan gampang sahabat dalam menaruh buku tamu dan ringkas tidak muncul pada urutan di sidebar namun berada disamping blogspot.

Kok lupa…. Ada komplemen lagi,, sahabat yang belum memiliki buku tamu dapat eksklusif daftar link cbox atau penyedia buku tamu ibarat kang zain gunakan. Sobat dapat daftar DI SINI dijamin eksklusif jadi dan ikuti petunjuknya langkah awal sahabat klik sign up sesudah masuk isi daftarnya dan sesudah simpulan eksklusif log in. sesudah itu sahabat dapat pilih tampilannya. klo dah dipilih ambil codenya dan ikuti tutorialnya dibawah ini: 

• Seperti biasa sahabat mesti login dulu ke blog sobat
• Silahkan klik Rancangan
• Klik elemen laman
• Klik tambah gadget/add gadget
• Klik opsi HTML/Javascript
• Silahkan sahabat Copy dan Paste Kode HTML di bawah ini dan jangan lupa di SAVE :

<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://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.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-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=688387&amp;boxtag=crh1t1&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-688387" style="border:#ababab 1px solid;" id="cboxmain7-688387"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=688387&amp;boxtag=crh1t1&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-688387" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-688387"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;">Get this <a target="_blank" href=" "> 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>

Catatan Penting :

Untuk instruksi yang berwarna merah sahabat ganti dengan instruksi buku tamu milik sobat. Seperti dalam blog ini memakai cbox yang sudah kang zain terangkan diatas.

Sampai disini tutorial Modifikasi Blog dengan judul Cara Membuat Buku Tamu Auto Hide di Blogspot dan tunggu tutorial berikutnya. hehe

Bagikan Artikel ini