15 Desember 2010

Cara Menyembunyikan Buku Tamu dengan Cara Rolling

Hai sobat t'Net...Apa kabr nih? yang pasti sehat-sehat kan?
Kali ini saya ingin memberikan sedikit ilmu yang aku dapat untuk membuat buku tamu blog kita tersembunyi. Dan jika dibuka akan terbuka dengan cara Rolling. Untuk lebih jelasnya kita akan mempelajarinya di blog ini.
Oke langsung saja yah...



Langkah Pertama
  • Masuk ke blogger dengan ID saudara
  • Pada dasbor blog anda silahkan anda pilih Rancangan/ Design
  • Kemudian pilih Edit HTML 
  • cari kode seperti ini </head>  (Caranya Ctrl+F)
  • Setelah ketemu Letakkan kode HTML di bawah ini tepat di bawah kode </head>
<!-- Mulai Rolling Widget -->
<style type="text/css">
#gb{
position:fixed;
top:10px; /*jarak dari atas*/
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

<script type="text/javascript" src="http://enes-sc.googlecode.com/files/rollingwidget2.js"></script>
</div></div>
<!-- Selesai Rolling Widget -->
  • Setelah selesai, silahkan anda ganti tulisan yang berkedip di atas dengan Kode HTML buku Tamu anda . Jika anda belum mempunyai buku tamu silahkan kunjungi  situs www.shoutmix.com. kemudian silahkan anda buat account anda sendiri dan dapatkan kode HTMLnya.
  • Setelah anda menempatkan kode SHOUTMIXnya, silahkan anda Simpan Template
langkah ke Dua
  1. Setelah anda menyimpan template, pilih lagi Elemen Laman
  2. Kemudian pilih Tambah Gadget  >>> HTML Javasript
  3. Letakkan kode dibawah ini, dan jangan kasih judul 
<a href="javascript:showHideGB()">Buku Tamu</a> 
 Ket:
Kamu dapat mengganti tulisan BUKU TAMU dengan selera anda.

Kemudian Silahkan anda SAVE
 
Selamat Mencoba...

Masukkan email kamu untuk berlangganan tulisan dengan saya :

Delivered by FeedBurner