Membuat Buku Tamu Melayang untuk CBOX atau Shoutbox

06.40 Diposting oleh Unknown

Untuk posting kali ini saya akan membahas tentang bagaimana caranya membuat buku tamu yang kalau kita klik melayang ketengah screen, yang biasanya digunakan oleh para sobat blogger untuk widget CBOX atau Shoutbox, untuk Screen Shootnya bisa anda lihat pada gambar dibawah ini...

Untuk membuat Widget buku tamu melayang tersebut caranya sangatlah mudah, yaitu anda cukup mengcopy code dibawah ini ke widget Html yang disediakan oleh blogger. atau lebih jelasnya yaitu dengan cara :

1 Snda masuk atau login dulu ke blogger menggunakan account google anda

2 Setelah itu anda masuk ke menu tata letak halaman

3 klik add gadget atau tambah gadget terus anda pilih gadget yang Html

4 bila anda telah pilih gadget html terus anda copy dan paste code dibawah ini pada gadget tersebut.

Codenya adalah :

<!-- Script Buku Tamu Melayang-->

<style type="text/css">

#gb{

position:fixed;

top:10px;

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/AVvXsEi81eEDq5GiQKxHtGLB5uKuP5OpSl9eOdC0wexccqE7e4iAEoGMDFDBBgqHNhPbLGJPr_LnG-Y2CaGPqDvJ2LqhG6XCpONRzdK2GqNmwGU05UJ34qq_s04GcUlXVy3dvNcIiUimg_S0rI8/s1600/CBOX-ICON.gif') no-repeat;

}

.gbcontent{

float:left;

height:560px;

width:310px;

background: -moz-linear-gradient(top, #6b0101, #c30000, #6b0101);

background: -webkit-gradient(linear, 0% top, 0% bottom, from(#c30000), to(#6b0101));

padding:10px;

border-top:10px solid #6b0101;

border-bottom:10px solid #6b0101;

border-left:10px solid #c30000;

border-right:10px solid #c30000;

}

</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 Kode CBOX atau Shoutbox anda disini..

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

<a href="javascript:showHideGB()">

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

<!-- End Script Buku Tamu Melayang-->

Silahkan anda copy dan paste kode diatas pada gadget html dan jangan lupa untuk memasukan kode CBOX anda sendiri pada gadget tersebut setelah itu kemudian klik save, buka blog anda untuk melihat hasilnya.

Keterangan :

ganti tulisan Masukan Kode CBOX atau Shoutbox anda disini.. yang ada pada kode diatas dengan kode CBOX atau Shoutbox anda sendiri, Bila anda ingin merubah besar dan kecilnya ukuran buku tamu tersebut sesuai dengan yang anda inginkan, anda cukup mengganti kode yang suda saya tandai dengan warna merah seperti dibawah ini,

Bila anda ingin mengganti ukuran tinggi buku tamunya anda tinggal mengganti kode height:560px;

dan untuk memperlebarnya anda ganti angka seperti pada kode ini width:310px; dan untuk Link gambar yang berwarna kuning pada kode diatas silahkan anda ganti dengan link gambar yang anda inginkan dengan ukuran tinggi = 100 px dan lebar = 30px

Selamat mencoba dan semoga bermanfaat.