Cara Menyembunyikan Rolling Widget Buku Tamu

Browse » Home » Blog Tutorials » Cara Menyembunyikan Rolling Widget Buku Tamu

Cara Menyembunyikan Rolling Widget Buku Tamu

Ditulis oleh Kang eNeS Rabu, 17 Februari 2010. 18.47
Label: Blog Tutorials komentar (26)

Mungkin sebagian sobat yang berkunjung ke SC Community ada yang mencari-cari Guest Book (Buku Tamu), yang biasanya nongkrong pada sidebar kanan. Kemana perginya Buku Tamu itu? Mungkin itu pertanyaan kamu ketika tidak menemukannya. Sebenarnya Buku Tamu itu masih ada, hanya saja disembunyikan. Untuk menampilkannya cukup mengklik Guest Book yang ada pada navbar menu.

Lho, kok bisa? Gimana caranya? Mungkin itu juga yang menjadi pertanyaan kamu selanjutnya. Ya, daripada menempatkannya di halaman artikel, yang jika dibuka suka lama loading page-nya, mendingan dibuat "ngumpet" seperti ini. Caranya juga gampang aja kok, karena sebenarnya widget ini bukanlah widget baru melainkan rolling widget yang script-nya sedikit dimodifikasi.

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

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; 
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="https://sites.google.com/site/ruangsc/enes/rollingwidget.js"></script>
</div></div>
<!-- Selesai Rolling Widget -->

Ubahlah ukuran jarak dari atas, warna bingkai, warna latar, dan judul sesuai keinginan kamu.
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.
Paste script Rolling Widget tadi di bawah kode </head>.
Jika sudah OK. Save template kamu dan ucapkan Alhamdulillah...

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 yang lainnya.

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

Tambahan
Bagi kamu yang ingin menggunakan rolling widget yang link untuk membukanya menggunakan gambar pojok/samping, seperti pada blog ini, silahkan baca artikel ini.

Cara Menyembunyikan Rolling Widget Buku Tamu

Artikel Terkait Dengan Blog Tutorials

26 komentar 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

Direkomendasikan Teman Facebook

26 komentar
Posting Komentar