Buat buku tamu bergeser

Kali ini saya mau share tentang roling widget ( widget yang bergeser) dan ini bisa di aplikasikan di Cbox atau Shoutmix atau yang lainya.

Cara pasangnya pun tidak sulit alias cukup mudah, silahkan ikuti langkah berikut :

1.      Kalian login dulu ke blogger dasbhor kalian tentunya.

2.      Terus pilih ke layout / rancangan pada menu.

3.      Setelah itu tambah gadget.

4.      Kemudian pilih HTML/Java Script

5.      Copy jode dibawah ini dan masukan ke HTML/Java Script tadi

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:130px;

width:30px;

float:left;

cursor:pointer;

background:url('http://niablog.googlecode.com/files/guestbook.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">

Silahkan masukan kode kalian disini

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

<a href="http://nia-minia.blogspot.com/2012/02/buat-buku-tamu-bergeser.html"><blink>Mau seperti ini?</blink></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>

6.      Tarakhir masukan kode obrolan kalian ke text yang berwarna merah

7.      Jangan lupa save pekerjaan kalian dan lihat hasilnya.

Nah ga sulit banget kn buatnya, selamat mencoba.

Sekian artikel nia, semoga bermanfaat.

Nia-Minia

Ikuti @nia_minia Tweet

Baca juga Artikel Terkait Nia Blog

Posted in: trick blogging