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 :

Cara Membuat Buku Tamu Keren di Blog
http://i1089.photobucket.com/albums/i353/illankjie/bukutamu3.png
Cara Membuat Buku Tamu Keren di Blog
http://i1089.photobucket.com/albums/i353/illankjie/bukutamu5-2.png
Cara Membuat Buku Tamu Keren di Blog
http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png
Cara Membuat Buku Tamu Keren di Blog
http://i1089.photobucket.com/albums/i353/illankjie/BukuTamu8-1.png
Cara Membuat Buku Tamu Keren di Blog
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 :)

1 comment:
Write komentar
  1. =RAHASIA MENHASILKAN UANG BERLIMPAH= ====RATUSAN RIBUH HINGGA JUTAAN RUPIAH BAHKAN SAMPAI RATUSAN JUTA=== ====TIAP HARI DENGAN BANTUAN NYAI-RONGGENG HU 085-220-880-369=====

    JIKA ANDA SUDAH CAPE DAN LELAH DENGAN STATUS P7-PERGI PAGI PULANG PETANG PENGHASILAN CUMA PAS-PASAN DAN TIDAK TAU HARUS BAGAIMANA LAGI UNTUK MENINGKATKAN KONDISI FINANSIAL KEUANGAN ANDA...MAKA SAYA MINTA SEGERA HUB NYAI-RONGGENG DI 085-220-880-369 ATAU KLIK http://nyaironggeng7.blogspot.com BELIAU PASTI MEMBANTU ANDA SAMPAI ANDA SUKSES,SPERTI SAYA.KEHIDUPAN SAYA YANG DULUNYA SUSAH SEKARANG SUDAH SERBA BERKECUKUPAN BERKAT BANTUAN DARI NYAI RONGGENG.ANDA PASTI SUKSES JIKA UDAH DI BANTU AMA NYAI RONGGENG SEGERA SAJA HUB BELIAU JIKA ANDA UDAH CAPE HIDUP SUSAH.

    DAN DI SINI PULA ANDA BISA MENGHASILKAN DANA CEPAT DENGAN CARA YANG LAIN ATAU DENGAN KATA LAIN
    PESUGIHN TUYUL
    UANG GAIB
    ANKA GAIB
    DAN PESUGIHAN PUTIH TANPA TUMBAL

    ReplyDelete