earth

Guestbook

/* Iklan google ads */
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:
  1. Dari Dashboard blogger, pilih Tata Letak - Elemen Halaman.
  2. Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
  3. Paste script Hidden Widget tadi dan jangan diberi judul (title).
  4. 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
  • Artikel Terkait Dengan Blog Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    37 komentar

    salam sahabat
    infonya bagus banget,sayangnya saya ga pakai hide he..he..kira kira nambahi beban loading ga ya?thnxs thnxs n good luck

    10 Maret 2010 pukul 19.39  

    Sip nih tutorialnya .,,
    Tapi apa nggak bikin berat loading blog OM ..

    10 Maret 2010 pukul 21.25  

    wah info mantap nih kang, punteun nembe sumping deui.

    10 Maret 2010 pukul 23.36  

    saya dulu pernah nyoba pake hidden guest book, tapi ngga berfungsi kalo pake browser IE... yang ini sudah dites pake browser IE Kang?

    10 Maret 2010 pukul 23.59  

    Mantap mas. minta ijin mau copy buat koleksi tutor. boleh ya ..?

    11 Maret 2010 pukul 07.29  

    Info baru lagi... tambah ilmu baru lagi...
    Makasih ya.

    11 Maret 2010 pukul 11.16  

    up 2 dateee selaluuuu....SEMANGAT!!!

    11 Maret 2010 pukul 16.42  

    Apa kabar kang? Info keren lagi nih?

    11 Maret 2010 pukul 20.06  

    adeuh aya thank you-an ayeuna mah dina kotak komentarna teh euy...prikitiiiwww

    16 Maret 2010 pukul 07.25  

    wah..
    akhirnya ketemu juga caranya...
    mksi yah..
    dapat ilmu baru nich...

    sekali lagi terimakasih

    3 April 2010 pukul 00.16  

    HEBAT Sukses ayeunamah BUKU TAMU NYUMPT SUDAH JADI TERIMAKASIH hatur nuhun Tararrengkyu....

    8 April 2010 pukul 22.01  

    atos sae kang hatur nuhun.....siip

    9 April 2010 pukul 00.49  

    alhamdulilah akhirnya ketmu juga nih ma yang npuynya ni blog keren ,,,udah di coba ,,cuman kenapa ga jalan ya bos di blog ane,,maklum baru heeee,,tapi ane alut ma ente bos,ente master ane bos,ane puter2 ga dapet2,,tapi kenapa blom bisa hiden ya bos di blog ane,hee mohon bantuanya,,
    www,kumpulananakmusikdangdut.blogspot.com

    29 Juni 2010 pukul 17.34  

    jos..mantap....jadi bisa berapresiasi sensiri ni Cbox nya.thx lah gan...:)

    6 Juli 2010 pukul 14.30  

    Mkasi Gan Atas Infonya,Tolong ajarin gimana Menata Banner agar rapi..

    Makasih..
    Tukeran link ya gan......

    15 Juli 2010 pukul 16.04  

    Keren sob, script nya langsung ane pinjem. Terimakasih dan salam kenal.

    29 Agustus 2010 pukul 21.50  

    mantep mas langsung ak coba :D
    thanks...

    22 September 2010 pukul 08.16  

    makasih gan, ane jadi tambah ilmu nih

    11 Oktober 2010 pukul 15.07  

    MANTAP INFONYA, TERIMA KASIH.

    26 Maret 2011 pukul 23.47  

    thank gan infonya...
    bermanfaat bget tuh buat teman2 yang pengen hidden bukutamu..
    thank gan

    13 April 2011 pukul 03.49  

    makasih bang guestbooknya saya ambil satu..silakan mampir bl berkenan mksih bgt..!!

    12 Juni 2011 pukul 02.06  

    makasih gan ilmunyaaaaa....

    12 Juni 2011 pukul 22.34  

    Terima Kasih Sob Atas Tutornya... i Like it...

    28 Juni 2011 pukul 22.07  

    mau donK bikin hidden fb atau yahoo atau twitter. Mohon pencerahan. Soalnya blog dumarin masih mawur (dibaca : direnovasi). Terima kasih

    15 Juli 2011 pukul 12.25  

    hoa, icon dumarin saya jadi itu?? hehe. im beginner. ^^

    15 Juli 2011 pukul 12.30  

    wah terimakasih atas bantuannya gan..!! akhirnya jadi lebih menarik thank's ya..!!

    28 Juli 2011 pukul 22.56  

    kok blog saya blum di tampilkan......padahal saya sudah tukar link

    FREE DOWNLOAD AND GET MORE INFORMATION ANYTHING

    http://technologyandstyle.blogspot.com

    27 Agustus 2011 pukul 01.33  

    Nice Blog ..
    Ditunggu kunjungan baliknya

    7 November 2011 pukul 10.46  

    terimakasih banyak yua infonya,,akan saya coba!

    4 Desember 2011 pukul 07.37  

    makasih gan akhirnya bisa juga buku tamu iboox ane hidden ^_^

    temen2 kunjungin blog ane ya http://smilewithismail.blogspot.com/

    makasih

    13 Februari 2012 pukul 20.21  

    mantap artikelnya sob, salam kenal aja

    2 April 2012 pukul 17.03  

    ok gan sudah dicobak, lumanay jadi menambah ruang kosong.

    Salam kenal

    8 Juni 2012 pukul 19.35  

    makasih gan atas infonya

    30 Januari 2013 pukul 22.43  

    Makasih banyak ya Tips Triknya...
    Back Link New bie saya ya di http://burhanefendi.blogspot.com/

    28 Maret 2013 pukul 19.26  

    Makasih banyak buat ilmunya kang :)

    26 Mei 2013 pukul 23.48  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler