Cara Membuat Buku Tamu Tersembunyi Di Samping Blog

 
Pada artikel sebelumnya saya pernah membuat tutorial membuat widget chatbox menggunakan cbox, nah disini saya ingin berbagi cara untuk mempercantik tampilan blogger/web Anda dengan memanfaatkan widget chatbox, yang membedakan tutorial ini dengan artikel sebelumnya adalah, cbox yang akan kita pasang pada blog terlihat tersembunyi di bagian samping kanan blog.
Mungkin diantara kalian ada yang pernah mengunjungi blogger 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, jika belum tahu caranya bisa baca di artikel sebelumnya disini.
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/AVvXsEhGMosJXVJcZ49s3kzvLaT2ptBQi6S0HbQBLsQp2VLqs4R5KLf1VEx_uIpfhByW3OcT1Yfx2aZy5wnHqFR2n7LV4gmYA0m2dKsxe_gMvHqhSm4ijkPSgccAmt4-cBcKiuaLk0pE2201jhM/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.
Ok saya kira langkah diatas cukup mudah, namun jika masih ada pertanyaa, silahkan isi kotak komentar dibawah untuk mengajukan pertanyaan. Semoga artikel kali ini dapat bermanfaat

Update By: Yudi Kadri