Rabu, 04 Januari 2012

Membuat Hidden Widget Buku Tamu Float

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="http://enes-sc.googlecode.com/files/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...

0 comments:

Posting Komentar

Comment