Revoluzine

Kamis, 22 November 2012

Cara Menyembunyikan Buku Tamu Rolling Widget

Published : 12.21 Author : Revoluzine

Jika kamu mengklik link guest book pada navbar maka akan muncul buku tamunya,dan untuk menutupnya lagi silahkan klik lagi link guest book tersebut lagi,Nah,Bagaimana cara membuatnya? gampang aja kok, karena sebenarnya widget ini bukanlah widget baru melainkan rolling widget yang script-nya sedikit saya modifikasi.Untuk membuat rolling widget supaya bersembunyi, berikut adalah langkah-langkahnya: Login ke blogspot kamu Klik...

Cara Menyembunyikan Buku Tamu Rolling Widget

Jika kamu mengklik link guest book pada navbar maka akan muncul buku tamunya,dan untuk menutupnya lagi silahkan klik lagi link guest book tersebut lagi,Nah,Bagaimana cara membuatnya? gampang aja kok, karena sebenarnya widget ini bukanlah widget baru melainkan rolling widget yang script-nya sedikit saya modifikasi.

Untuk membuat rolling widget supaya bersembunyi, berikut adalah langkah-langkahnya:

Login ke blogspot kamu
Klik Rancangan
Klik Edit HTML
Centang kotak kecil html dan download html kamu untuk backup
Copy kode dibah ini dan letakkan tepat dibawah kode </head>


<style type="text/css">
#gb{
position:fixed;
top:10px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:none;
}
.gbcontent{
float:left;
border:2px solid #888888; /*warna bingkai*/
background:#F0F0F0; /*warna latar*/
padding:5px 10px 0px 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">
<div style="text-align:center;"><a href="javascript:showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png" /></a></div>

Kode Shoutbox atau Buku Tamu
/rollingwidget.js"></script>
</div></div>
Save template kamu.
Setelah itu buatlah sebuah link untuk menampilkan rolling widget, seperti berikut :

<a href="javascript:showHideGB()">Buku Tamu</a>
Kamu dapat menempatkan link ini pada navbar menu, sidebar, atau di tempat lain. Kamu juga dapat mengganti Buku Tamu dengan Guest Book, Chat Room, ShoutBox, atau Juga dengan gambar.

Langganan: Postingan ( Atom )

Revoluzine

Kamis, 22 November 2012

Cara Menyembunyikan Buku Tamu Rolling Widget

Translate

Pengikut

Profile me

Blogroll

Cara Menyembunyikan Buku Tamu Rolling Widget