Membuat Rolling Widget Buku Tamu (Widget Bergeser)

Browse » Home » Blog Tutorials » Membuat Rolling Widget Buku Tamu (Widget Bergeser)

Membuat Rolling Widget Buku Tamu (Widget Bergeser)

Ditulis oleh Kang eNeS Minggu, 09 Agustus 2009. 07.30
Kategori: Blog Tutorials comments (31)

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:

Kopikan script di bawah ini (gunakan Control C):

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

.gbtab{
height:100px; /*tinggi gambar*/
width:30px; /*lebar gambar*/
float:left;
cursor:pointer;
background:url("https://images2.imgbox.com/5c/06/GQKXa9SR_o.png") no-repeat; /*gambar GB1*/
}
.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="https://rawcdn.githack.com/kang-enes/BlogScript/582a1620628d3b087c85f75cf2744728ff104e72/rollingwidget.js"></script>
</div></div>
<!-- Selesai Rolling Widget -->

Ubahlah yang hurup yang diberi warna merah tebal sesuai dengan kebutuhan kamu.
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://images2.imgbox.com/5c/06/GQKXa9SR_o.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://images2.imgbox.com/23/39/aBMpwI2i_o.png
ketebalan dan warna kotak dengan 3px solid #003399
Setelah memilih salah satu gambar tersebut, lalu gantilah kalimat Kode Shoutbox atau Buku Tamu dengan script Shoubox Chat yang kamu miliki.
Ubahlah ukuran tinggi (height) Shoutbox sehingga tidak melebihi tinggi halaman blog kamu.
Selanjutnya kamu lakukan salah satu langkah atau cara berikut:

Cara Pertama

Dari Dashboard akun blogger kamu, pilih Tata Letak - Elemen Halaman.
Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
Paste script Rolling Widget tadi dan jangan diberi judul (title).
Setelah itu save dan ucapkan Alhamdulillah...

Cara Kedua

Dari Dashboard akun blogger kamu, pilih Tata Letak - Edit HTML.
Cari kode </head> pada script HTML template blog kamu (gunakan Control F atau F3 supaya memudahkan pencarian).
Paste script Rolling Widget tadi di bawah kode </head>, atau antara </head> dan <body>.
Lakukan Pratinjau (Preview) sebelum menyimpan template kamu.
Jika sudah OK. Save template kamu dan ucapkan Alhamdulillah...

Nah, cukup mudah kan? Ok coy, selamat mencoba...

Catatan Revisi:
Ketika saya menulis artikel ini, shoutbox Oggix masih kesulitan untuk dimasukkan kedalam script rolling widget jika kamu menggunakan cara kedua. Sekarang no problema. Mengenai caranya, silahkan baca Akhirnya Oggixpun Bisa Ngumpet.

Referensi: Dari berbagai sumber

Membuat Rolling Widget Buku Tamu (Widget Bergeser)

Artikel Terkait Dengan Blog Tutorials

31 comments Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Postingan Populer

Pengikut

Free Palestine Channel

31 comments
Posting Komentar