Membuat Buku Tamu Buka Tutup Di Samping Kanan Blog

Dalam posting yang lalu sudah kita pelajari tentang membuat buku tamu dengan shoutmix.com. Maka sekarang kita akan memodifikasi buku tamu yang telah kita buat dengan menambah efek buka tutup untuk mempercantik tampilan blog kita. Siapkan dulu Scrip HTML buku tamu yang berasal dari shoutmix.com.




Langkah 1
Copy Paste Script Kode Dibawah Ini :


<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/AVvXsEjm40X0L7xLg06KE6oAIofhhChn0KtKdO04K7cp8bbQ0_pDh59NOn44mzTz3Y_5zXnd-c60bN6jl9WKkxf7BfKQbUw0HDOgqSGElGxKKfDK9IEwVwxPAesBDYJQuPTMuu5Ew5X3pOIijOxC/') 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">

[MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI]


</a>

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

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


Lalu cari tulisan [Masukan Script Kode Buku Tamu Anda Disini] di script kode tadi.
Hapus tulisan itu Lalu Ganti dengan Script kode Buku Tamu anda
Langkah 2
1. Login di blogger dengan ID anda
2. Klik menu tata Letak
3. Klik Elemen Halaman
4. Klik Tambah Gadged
5. Klik HTML/JavaScript
6. Lalu Copy paste kodenya
7. Setelah itu klik Simpan
8. Dan Lihat Hasilnya
    Mak.....Yus bukan

Postingan Terkait :

Widget by SEO Tutorial