Cara Membuat Sliding Guest Book di Blog

Jika teman blogger ingin menambahkan Sliding Guest Book/Buku Tamu dengan efect sliding disebelah kanan blog, contoh di sebelah kanan blog ini.

Sangat simple dan mudah untuk dicoba, berikut langkah-langkahnya :
1. Mendaftar terlebih dahulu di cbox, link daftar cbox disini ,
   Isi dengan lengkap dan klik "Create my Cbox!"

2. Masuk ke email anda dan klik tautan untuk memverifikasi pendaftaran cbox, kemudian login dan dapatkan script cbox, atau bisa langsung klik disini
3. Masuk ke akun blogger anda --> pilih tata letak --> add new gadget/tambah gadget --> edit html/javascript
4. Copy - Paste HTML dibawah ini :

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000; 

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://2.bp.blogspot.com/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/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">

COPY-PASTE KODE SCRIPT CBOX ANDA DISINI

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

<a   
href="http://myadventurehere.blogspot.com/2014/03/cara-membuat-sliding-guest-book-di-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>  

*Untuk warna BIRU bisa anda rubah dengan url gambar yang lain
* Untuk warna MERAH diganti dengan kode script cbox anda.
 Berikut contoh url gambar lain untuk guest book/buku tamu :

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu3.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu5-2.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png

http://i1089.photobucket.com/albums/i353/illankjie/BukuTamu8-1.png

http://i1089.photobucket.com/albums/i353/illankjie/gustbook02-1.png







5. Klik Simpan dan lihat hasilnya di blog anda

Taraaaaa.....sliding guest book sudah nampang diblog anda ^.^
Selamat mencoba :)

BlogMy Project

Share This :