Cara Membuat Buku Tamu Tersembunyi Di Samping Blog

Disini saya ingin berbagi cara untuk mempercantik tampilan Blog anda dengan memanfaatkan widget chatbox, cbox yang akan kita pasang pada blog terlihat tersembunyi di bagian samping kanan blog.

Mungkin diantara kalian ada yang pernah mengunjungi blog tetangga yang memasang widget tersembunyi dibagian samping blog, entah itu disamping kanan maupun di samping kiri, tergantung mereka menempatkannya.



Ok kita langsung ke topik, sebelum saya memulai membuat langkah-langkah membuat Buku tamu tersembunyi dibagian samping, sebaiknya Anda sudah mempersiapkan script cbox terlebih dahulu, jika Anda belum mempunyai script cbox sebaiknya buat terlebih dahulu di halaman cbox.

1. Login ke akun blogger Anda
2. Pada dasebor pilih Tata Letak
3. Kemudian Tambah gadget
4. Pilih HTML/JavaScript
5. Copy kode dibawah ini dan paste kedalam kota HTML/JavaScript

[spoiler title=’Klik untuk melihat Script’ collapse_link=’true’]
<style type=”text/css”>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5vsqTa_G-tAM-3HGUg2ibjq4UsCDMehg5q0qnW4LBpVmCMXj_NiDuCYi9c2qZy7j06AcV1xRJXzUjJOPdTp3a_yA7ZeO0UT3nR7sz449v4nvqY6LumNnrRyG4q-FcsVCw7wCtb-hTAI/s1600/bukutamu.png’) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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”>
Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini
<div style=”text-align:right”>
<a href=”http://giribig.com/2014/11/cara-membuat-buku-tamu-tersembunyi-di-samping-blog.html”>[get this widget]</a>><a href=”javascript:showHideGB()”>
[Tutup]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script></div></div>
[/spoiler]

Keterangan: Kode yang diberi wara merah adalah kode cbox yang telah Anda buat, silahkan ganti kode tersebut dengan kode Cbox Anda.