earth

Guestbook

/* Iklan google ads */

Cara Menyembunyikan Rolling Widget Buku Tamu

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

  • Artikel Terkait Dengan Blog Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    26 komentar

    salam sobat
    trims sharing dan ilmunya.
    ternyata bisa disembunyikan ya,,widget rolling buku tamunya.
    saya akan kopas scriptnya bang Enes.

    17 Februari 2010 20.45  

    nah ini dia yang ku tunggu, tank's..di copy..
    sukses

    salam hujan

    17 Februari 2010 21.06  

    betul,,ini juga saya lagi nyari...

    17 Februari 2010 21.42  

    Yang lalu belum saya praktekkan, sekarang sudah muncul tips yang oke banget! Sukses untuk Anda!

    17 Februari 2010 21.58  

    Makasih banget utk infonya...
    Jadi pengen nyoba juga suatu saat.

    17 Februari 2010 22.23  

    Saya ingin nyoba yang ini Kang...
    dulu pernah nyoba yang seperti ini, tapi tidak berfungsi dgn. baik.

    17 Februari 2010 23.35  

    ok ni tipsnya kang terimah kasih

    18 Februari 2010 00.13  

    kang bikinin atuhhh *_*

    18 Februari 2010 01.47  

    aduh mantap nian kang enes, cuma tahu sendiri kang saya buta sekali utak atik HTML

    18 Februari 2010 02.20  

    Aku juga masih harus belajar tentang HTML kang...
    Oh yah, kalau buat Menu bar keren seperti diatas , gimana yah?

    18 Februari 2010 15.42  

    Hai,

    datang mau ngucapin

    happy lunar
    happy valentine's day
    happy ash wednesday

    buat yang merayakan, yang nggak merayakan semoga bulan penuh cinta ini selalu membawa kebahagiaan dan kedamaian...

    Ninneta

    18 Februari 2010 18.15  

    assalamu'alaikum ...
    Kang, tos dicobian scroll teh. Hoyong tampil namina wungkul, henteu sareng alamat link-na, tapi sesah wae. Pami nu tampil namina kalahka janten teu scroll. Kumaha tah???
    Hanjakal tebih ah

    19 Februari 2010 07.41  

    Okey nggak pa2 koq sobat...
    nanti kesempatan lain.
    Mohon maaf awardnya baru sempat saya posting.

    19 Februari 2010 07.56  

    mantab nih...
    pagi2 dapet info baru...
    thanks yah kag :)

    oia jgn lupa dukung ina!!!!
    Suka dengan tulisan2 ina????,, Bantu dengan Vote Disini
    Pilih Nafsul Muthmainah | http://inamuth2.blogspot.com Thanks kakag :)

    19 Februari 2010 08.29  

    Tapi kalau di umpetin salah2 pengunjung keburu kabur karena tak ketemu Buku Tamu sehingga tidak meninggalkan jejak contohnya saya tadi mau kabur cari2 ngga ada buku tamu, untung ada Artekel berkaitan dengan itu saya baca i ternya di umpetin.

    19 Februari 2010 15.07  

    blog uing tambah keren eunk, makin genit dan seksi, mudah2an eusina ge bisa lwh manfaat

    19 Februari 2010 16.24  

    Postingan yang aku cari, untuk cara yg kedua yg kucari, terima kasih mas. Sukses slalu !!

    20 Februari 2010 15.41  

    Bagus Buku Tamunya.... ijin dipakai.

    10 April 2010 13.34  

    mantap kang.. tp qu bingung edit punyaqu... bantuin donks..

    3 Mei 2010 22.28  

    hallo bro gua copas trik widge buku tamunya.. Arigato matur nuwun...

    2 Desember 2010 22.41  

    pa ijin nganggo di blog anu enggal

    16 Januari 2011 00.48  

    Alhamdulliah dugi oge yeuh...kang Enes hatur nuhun ah infona...
    Sateuacana nepangkan pribados Newbie Bloger...hehe

    Kang punten pami posisina hoyong di palih kiri kumaha kang? maklum newbie tea kang....
    diantos waleranna

    22 September 2011 23.05  

    http://lintas-global.blogspot.com/2014/02/cara-meningkatkan-penghasilan-iklan.html

    7 Februari 2014 19.22  

    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