Cara Membuat Buku Tamu Melayang di Blog

Di Artikel kali ini, saya akan menjelaskan bagaimana cara membuat buku tamu atau cbox melayang pada blog, contohnya seperti yang ada pada blog ini. kenapa melayang ? 

Asumsi dari saya membuat buku tamu melayang atau tersembunyi ini sangat bermanfaat untuk space sidebar pada blog, karena dengan kita membuat buku tamu ini tidak berada pada sidebar alias terpisah, bisa membuat space sidebar blog lebih luas hehe.
Oh iya, jangan lupa sebelum kalian mengikut step dibawah ini, pastikan kalian sudah mempunyai buku tamu dari cbox atau yang lainnya. 
Langsung saja berikut caranya membuat buku tamu melayang di blog.
1. Buka Tata letak pada blog kalian lalu add widget dan tambahkan widget HTML/Javascript
2. Masukan script dibawah ini pada widget tersebut.
<style type="text/css">
#gb{

position:fixed;
top:30px;
right:-230px;
z-index:+1000;

}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url
('http://i1288.photobucket.com/albums/b497/seo_id/bukutamu_zpsito5mmxj.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 - v4.1 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0; line-height: 0;">
<div style="position: relative; height: 305px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#ababab 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3459775&boxtag=gxzayh&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3459775" id="cboxmain3-3459775"></iframe></div>
<div style="position: relative; height: 75px; overflow: hidden; border:#ababab 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3459775&boxtag=gxzayh&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3459775" id="cboxform3-3459775"></iframe></div>
</div>
<!-- END CBOX -->

</center></div></div>

Catatan:

  • Tempat Meletakan widget HTML/Javascript dari script diatas akan sangat berpengaruh terhadap posisi dari buku tamu melayang milik kalian.
  • Jika posisi buku tamu kalian tidak sesuai berada disebelah kanan blog kalian seperti yang ada pada blog ini, silahkan mengaturnya dibagian class gb. pada style css diatas.
Jika kalian telah selesai mengikuti step diatas, maka hasil jadinya seperti gambar dibawah ini, atau sama dengan yang ada pada blog ini.
Jika kalian mengarahkan kursor kalian kearah buku tamu ini, maka dia akan otomatis muncul seperti contoh pada gambar dibawah.
Nah sudah selesai ni sob pembahasan tutorial blog pada kali ini, bila ada yang ingin ditanyakan jangan sungkan untuk menanyakannya di kolom komentar.
Terimakasih sudah mampir di blog ini sob, semoga artikel kali ini bermanfaat buat kita semua, jangan lupa untuk follow juga blog ini agar makin ramai hehe.

Leave a Reply

Your email address will not be published. Required fields are marked *