Cara Membuat Buku Tamu Autohide di Blog

November 01, 2012

Hello sobat... Apa kabar???

Kembali lagi berjumpa dengan saya, Rituel.

Kali ini Rituel membantu sobat untuk membuat Autohide Shoutbox.

Apa itu Autohide Shoutbox?

Auto hide Shoutbox merupakan suatu efek yang akan membuat buku tamu Anda muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ).

Bagaimana? sobat tertarik?

Jika tertarik memasang widget ini, silahkan ikuti tutorial berikut...

Contoh,

Cara Membuat Buku Tamu Autohide di Blog

1. Login ke blog sahabat
2. Klik Tata Letak (Layout) --> Tambah Gadget (add a gadget) --> Pilih HTML/Javascript

Copy code berikut lalu Paste-kan di kotak yang tersedia, langkah 4 & 5 (lihat gambar diatas)

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:350px;
width:50px;
float:left;
background:url('http://rituelphoto.files.wordpress.com/2012/10/buku-tamu-rituel.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #F2F2F2;
-moz-border-radius-bottomleft:3px;
-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: #990066; url('http://rituelde.blogspot.com/') 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>

<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=610764&boxtag=9vnddq&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-610764" style="border:#000000 1px solid;" id="cboxmain7-610764"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=610764&boxtag=9vnddq&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-610764" style="border:#000000 1px solid;border-top:0px" id="cboxform7-610764"></iframe></div>
</div>

<br />
<div style="text-align:center">
<span style="float:right; color: #F2F2F2;"> <span style="font-family:Cataneo BT; ; font-size: 15.0pt"><a target="_blank"href=" http://rituelde.blogspot.com/2012/11/cara-membuat-buku-tamu-autohide-di-blog.html "> Get this Widget! </a></span>
</span></div></center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>

* Ganti tulisan warna biru dengan kode Buku Tamu milik sobat.

Jika sobat belum punya kode Buku Tamu nya, maka ikuti langkah berikut... Dengan meng-klik ---> Cara Memasang Buku Tamu Autohide di Blog

0 Comments