Membuat Hidden Widget Buku Tamu (Widget Tersembunyi)

Browse » Home » Blog Tutorials » Membuat Hidden Widget Buku Tamu (Widget Tersembunyi)

Membuat Hidden Widget Buku Tamu (Widget Tersembunyi)

Ditulis oleh Kang eNeS Rabu, 10 Maret 2010. 18.47
Label: Blog Tutorials komentar (36)

Pada tulisan sebelumnya saya membahas tentang bagaimana membuat rolling widget (widget bergeser) yang bisa keluar masuk dari balik halaman blog kamu. Nah, pada tulisan kali ini saya akan membahas hidden widget (widget bersembunyi). Widget ini akan muncul dan bersembunyi lagi jika kamu mengkliknya.

Sebenarnya cara membuat hidden widget ini tidak jauh berbeda dengan cara membuat rolling widget, perbedaannya hanya pada script-nya saja. Jika kamu penasaran dan ingin tahu cara membuatnya ikuti saja langkah-langkah berikut:

Kopikan script di bawah ini (Gunakan Control C):

<!-- Mulai Hidden Widget -->
<style type="text/css">
.gb_fixed{
position:fixed;
top:10px; /*jarak dari atas*/
right:0px;  /*jarak dari samping kanan*/
z-index:+1000;
}
* html .gb_fixed {position:relative;}
#hidden_gb {
display:none;
border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
background:#F0F0F0; /*warna latar*/
padding:5px 10px 0px 10px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-align:center;"><a href="javascript:void(0)" onclick="gb_showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://sites.google.com/site/ruangsc/imgsb/guestbook.png" /></a></div>

Kode Shoutbox atau Buku Tamu

<br/>
<script type="text/javascript" src="https://sites.google.com/site/ruangsc/enes/hiddenwidget.js"></script>
</td></tr></table></div>
<!-- Gambar Samping -->
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img style="border:0px;" src="http://sites.google.com/site/ruangsc/imgsb/GB1.png" /></a>
</div>
<!-- Selesai Hidden Widget -->

Ubahlah yang hurup yang diberi warna merah tebal sesuai dengan kebutuhan kamu.
Keterangan:
Pada widget di atas disetting menggunakan gambar samping Buku Tamu hijau, seperti ini:

ketebalan dan warna kotak dengan 2px solid #A5BD51
URL gambar dengan
http://sites.google.com/site/ruangsc/imgsb/GB1.png

Tapi jika kamu mengginginkan yang biru (gambar Gueestbook), gantilah ketebalan dan warna kotak serta gambar dengan pilihan di bawah ini:

ketebalan dan warna kotak dengan 3px solid #003399
URL gambar dengan
http://sites.google.com/site/ruangsc/imgsb/GB2.png
Setelah memilih salah satu gambar tersebut, lalu gantilah kalimat Kode Shoutbox atau Buku Tamu dengan script Shoutbox Chat yang kamu miliki.
Ubahlah ukuran tinggi (height) Shoutbox sehingga tidak melebihi tinggi halaman blog kamu.

Selanjutnya kamu lakukan langkah atau cara berikut:

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

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

Tambahan:
Berikut adalah beberapa gambar atas yang bisa kamu pilih (klik untuk melihatnya):
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/guestbook1.gif
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/guestbook2.gif

Referensi: Dari berbagai sumber

Membuat Hidden Widget Buku Tamu (Widget Tersembunyi)

Artikel Terkait Dengan Blog Tutorials

36 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

36 komentar
Posting Komentar