Membuat Tab Buku Tamu Pada Sisi kanan Blogger

berhubung sudah ada beberapa Rekan kita yang sebangsa dan setanah air, senasib dan seperjuangan bertanya "Bagaimana membuat Buku Tamu seperti di blog ini?", maka saya menulis postingan ini. Sebenarnya sudah banyak Rekan rekan blogger yang telah memposting tentang topik yang serupa, tapi tidak masalah jika saya membuat postingan di blog ini,


Kita langsung saja ya sob:

1. Login di blogger dengan akun anda
   
2. Masuk pada menu "Rancangan"
3. "Tambah Gadget" >> Pilih Gadget HTML
4. Pastekan kode berikut ini:
   

<style type="text/css">


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:210px;

width:30px;


float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ihqcdE1Lfv-LanMap_qwerWPTHz7PbTxiu_uXx1ux2uiGaqtpdHQ1PjsOvxi2jcUWF9XEDSs_NS7GxgHK4v625HCXjfGUFOmmxb9Z-qr13X90Onp5ZnoqqVZTOc-GzMCdi-OxUOOgMso/') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:#999999;

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">



<!-- 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=370377&amp;boxtag=antrop&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div> <div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=370377&amp;boxtag=antrop&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div> </div> <!-- END CBOX -->




<font size="2">

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

<a href="javascript:showHideGB()">

[Tutup]

</a>

</div>

</font></div>

</div>


<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

5. Klik Simpan dan selesai.

Catatan:

Kode yang berwarna merah diganti dengan kode CBOX milik sobat. Jika belum mengerti cara membuat CBOX, silahkan sobat browsing sendiri di google ya :) Sudah sangat banyak sobat blogger yang membuat postingan tentang CBOX.

Sumber : browsing di google (lupa nama webnya) maaf yah :D

Posted in: Trik Blogger