Pernah melihat widget buku tamu (shoutbox) disimpan secara tersembunyi di sisi kanan blog? Kalau sudah, ya syukur, berarti kamu termasuk blogger yang supel, senang bergaul dan tidak sombong, hehe.... Coba lihat blog ini. Gimana, bagus kan? Tentu saja, karena selain membuat tampilan blog kamu semakin keren, juga dapat meminimalkan ruang sidebar blog kamu, khususnya bagi yang senang memasukkan segala macam banner iklan gratisan (tidak dibayar) sehingga ruang yang tersedia semakin sempit.
Nah, penasaran kan? Pingin tahu cara membuatnya? Tenang sobat, berikut ini akan disajikan bagaimana cara membuat rolling widget untuk buku tamu tersebut. Hanya saja, perlu kamu ketahui bahwa rolling widget buku tamu ini masih sulit untuk diterapkan bagi sobat yang menggunakan shoutbox dari Oggix. Jadi kalau mau menggunakan rolling widget ini sebaiknya mengganti shoutbox-nya dengan Shoutmix atau Cbox.
Untuk membuat rolling widget buku tamu ini kamu bisa mengikuti langkah-langkah berikut:
<style type="text/css">
#gb{
position:fixed;
top:10px; /*jarak dari atas*/
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px; /*tinggi gambar*/
width:30px; /*lebar gambar*/
float:left;
cursor:pointer;
background:url("http://i563.photobucket.com/albums/ss76/peace_enes/GB1.png") no-repeat; /*gambar*/
}
.gbcontent{
float:left;
border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
background:#F0F0F0; /*warna latar*/
padding:10px 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">
Kode Shoutbox atau Buku Tamu
<script type="text/javascript" src="http://enes-sc.googlecode.com/files/rollingwidget.js"></script>
</div></div>
<!-- Selesai Rolling Widget -->
Keterangan:
Pada widget di atas disetting menggunakan gambar Buku Tamu hijau, seperti ini:
tinggi gambar dengan 100px
lebar gambar dengan 30px
URL gambar dengan
https://sites.google.com/site/ruangsc/image/GB1.png
ketebalan dan warna kotak dengan 2px solid #A5BD51
Tapi jika kamu mengginginkan yang biru (gambar Gueestbook), gantilah tinggi gambar, lebar gambar, gambar, ketebalan dan warna kotak dengan kode-kode di bawah ini:
tinggi gambar dengan 130px
lebar gambar dengan 35px
URL gambar dengan
https://sites.google.com/site/ruangsc/image/GB2.png
ketebalan dan warna kotak dengan 3px solid #003399
Cara Pertama
Cara Kedua
Menambahkan Most Popular Post (Artikel Terpopuler) Pada Sidebar
-
Ingin tahu artikel apa saja yang paling banyak direspon oleh pembaca?
Gampang saja, kamu tinggal menambahkan *most popular post* pada *sidebar*
blog kamu. ...
13 tahun yang lalu
0 comments:
Posting Komentar