earth

Guestbook

/* Iklan google ads */
Pernah melihat widget buku tamu (shoutbox) disimpan secara tersembunyi di sisi kanan blog? Kalau sudah, ya syukur, berarti kamu termasuk blogger yang supel, senang bergaul dan tidak sombong, hehe.... Coba lihat blog ini. Gimana, bagus kan? Tentu saja, karena selain membuat tampilan blog kamu semakin keren, juga dapat meminimalkan ruang sidebar blog kamu, khususnya bagi yang senang memasukkan segala macam banner iklan gratisan (tidak dibayar) sehingga ruang yang tersedia semakin sempit.

Nah, penasaran kan? Pingin tahu cara membuatnya? Tenang sobat, berikut ini akan disajikan bagaimana cara membuat rolling widget untuk buku tamu tersebut. Hanya saja, perlu kamu ketahui bahwa rolling widget buku tamu ini masih sulit untuk diterapkan bagi sobat yang menggunakan shoutbox dari Oggix. Jadi kalau mau menggunakan rolling widget ini sebaiknya mengganti shoutbox-nya dengan Shoutmix atau Cbox.

Untuk membuat rolling widget buku tamu ini kamu bisa mengikuti langkah-langkah berikut:
  • 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; /*tinggi gambar*/
    width:30px; /*lebar gambar*/
    float:left;
    cursor:pointer;
    background:url("http://sites.google.com/site/ruangsc/imgsb/GB1.png") no-repeat; /*gambar*/
    }
    .gbcontent{
    float:left;
    border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
    background:#F0F0F0; /*warna latar*/
    padding:10px 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">
    
    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 yang hurup yang diberi warna merah tebal sesuai dengan kebutuhan kamu.
    Keterangan:
    Pada widget di atas disetting menggunakan gambar Buku Tamu hijau, seperti ini:
    tinggi gambar dengan 100px
    lebar gambar dengan 30px
    URL gambar dengan
    http://sites.google.com/site/ruangsc/imgsb/GB1.png
    ketebalan dan warna kotak dengan 2px solid #A5BD51

    Tapi jika kamu mengginginkan yang biru (gambar Gueestbook), gantilah tinggi gambar, lebar gambar, gambar, ketebalan dan warna kotak dengan kode-kode di bawah ini:

    tinggi gambar dengan 130px
    lebar gambar dengan 35px
    URL gambar dengan
    http://sites.google.com/site/ruangsc/imgsb/GB2.png
    ketebalan dan warna kotak dengan 3px solid #003399



  • Setelah memilih salah satu gambar tersebut, lalu gantilah kalimat Kode Shoutbox atau Buku Tamu dengan script Shoubox Chat yang kamu miliki.
  • 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 (gunakan Control F atau F3 supaya memudahkan pencarian).
  • Paste script Rolling Widget tadi di bawah kode </head>, atau antara </head> dan <body>.
  • Lakukan Pratinjau (Preview) sebelum menyimpan template kamu.
  • Jika sudah OK. Save template kamu dan ucapkan Alhamdulillah...

Nah, cukup mudah kan? Ok coy, selamat mencoba...
Catatan Revisi:
Ketika saya menulis artikel ini, shoutbox Oggix masih kesulitan untuk dimasukkan kedalam script rolling widget jika kamu menggunakan cara kedua. Sekarang no problema. Mengenai caranya, silahkan baca Akhirnya Oggixpun Bisa Ngumpet.
Referensi: Dari berbagai sumber
  • Artikel Terkait Dengan Blog Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    31 komentar

    Ti kamari, dari kemareeeeNNn TERIAKSS2222X. eh kagak ada yang jawab.

    HaaHhhhH keluar JURSNA. HEBAT BIN ALUS.
    Nape ye sdh 5 juta X teriak di ShoutMIX SC kagak BISAAAA

    9 Agustus 2009 pukul 09.55  

    salam sobat,,wah info baru lagi buat saya,,,
    buku tamu bisa disembunyikan,,pengin nyoba juga ,,kali-kali aja berhasil.
    trims ilmunya.

    9 Agustus 2009 pukul 10.05  

    idenya keren tuh kak.. cuman jadi suka binun sendiri kalo pake sembunyi2 gitu :D

    10 Agustus 2009 pukul 14.56  

    siip
    ke mun salse ... nyoba di paviliunsaida
    nuhun sohib
    semangat terus

    10 Agustus 2009 pukul 16.55  

    tibaheula bin dari dulu sdh ke sastra, CULUN, tapi can sempet d cobaaaa yhhhh

    14 Agustus 2009 pukul 03.44  

    yg warna biru kayaknya asyik juga tuh dicoba. Thanks ya kang EneS dg ilmunya.

    24 Agustus 2009 pukul 23.47  

    ide'a sunggu menakjubkan , akan tetapi dengan Minim'a Kecepatan Koneksi Internet yang saya pakai , Ternyata Lebih Membebani pada saat Load Halaman web kang , jadi'a .... Untuk Saya Pribadi'a Untuk Membuka Halaman Utaman Blog saya , Jadi Lebih Lambat ...

    Maka'a Saya Alihkan Ke Postingan , Mungkin Bwt Orang lain yang membuka halaman tsb , tidak lambat sprt saya ... soal'a hampir rata2'a orang yang berselancar di luna maya , rata2'a Speed Koneksi'a 56,2 Kbps , sedangkan saya cuma 19,6 Kbps ....

    Maklum .... Make Kompi Jadul ..... Jadi berpengaruh ke Koneksi .... ^_^

    Tapi ... Ide Dari Akang Sunggung Menakjubkan ....
    Wasalam , Salam Sukses

    5 September 2009 pukul 10.49  

    tips nya oke juga nanti saya coba,,,
    makasih...

    12 September 2009 pukul 17.39  

    alamakkk jaaaaang..komen aq salah tempat bang..heheheh...maklum udah mulai pikun kali aq ini. sory mory yang bang..
    gimana pun aq ucapin trims kalilah..rumah aq jadi agak dikit luas hehehehhe.. ^_^

    18 September 2009 pukul 01.25  

    Permisi mas. mau saya pake widgetnya. he he he. abis kerenn..

    6 November 2009 pukul 07.48  

    akhirnya bisa juga .
    ^^
    *thanks buat post nya

    6 Desember 2009 pukul 16.55  

    terima kasih atas ilmunya. sekarang di blog saya gak lagi di perumit ma buku tamu . sukses selalu n mog pean makin terus maju

    9 Desember 2009 pukul 16.48  

    menarik sekali kang..keren!!!bis dipkae gadgetn lain juga ya...nuhun2

    4 Januari 2010 pukul 16.41  

    Ok punya brur rolling widgetnya. Dah ene coba dan brasil. Hatur nuhun ah...

    7 Januari 2010 pukul 18.01  

    terimakasihku yag tak terhingga...udah ku add fbnya tu...

    salam hujan

    8 Februari 2010 pukul 02.00  

    hese geuning kang ah ....wkkkkwwkk

    diklik teh teu aya uget uget ....acan

    10 Maret 2010 pukul 19.41  

    @blogvrman : sama ajjha kk dengan saya nie...

    17 Maret 2010 pukul 20.33  

    halo semua maen ke blog ku ya....n gimana cara jadi partner RSC?

    6 April 2010 pukul 13.23  

    bos aq dah copas scriptnya...link blog q ya... :)

    6 April 2010 pukul 13.30  

    Mantap ga,.
    ane pake ya :)

    19 Juni 2010 pukul 16.12  

    Hatur nuhun (makasih) gan tutorialnya di cari2 ketemu jga di SC Community.... TOP BGT Pokonamah...

    26 Juni 2010 pukul 21.43  

    aku dah praktekan dan berhasil berhasil.. hehehe.. thx ya

    28 Juli 2010 pukul 10.51  

    makasih gan, udah bisa. cuma gimana cara ganti nama " guest book " menjadi nama lain...?? semisal "buku tamu" atau yang lainnya...seblumnya, ana ucapkan salut buat agan yang dah sangat berpengalaman...semoga saya bisa belajar banyak lagi..

    4 Agustus 2010 pukul 08.42  

    gak ada chat boxnya niiiiiiiiiiii.. tolong. www.mudijastin.blogspot.com hubungi aku segera lewat fb bissaaaa thankssss

    8 November 2010 pukul 16.46  

    terima kasihh.. tapi kayanya erorrr alias gagal .. peuhh
    butuh waktu memang...

    26 Maret 2011 pukul 10.56  

    nice info gan, ae mau coba nih..mohon liatin nanti blog saya mana tau dah lulus kursus nya...wkwkwk

    12 April 2011 pukul 02.14  

    mas.........saya sudah pasang link anda di blog saya, sekarang giliran anda, thanks....kunjungi juga

    FREE DOWNLOAD AND GET MORE INFORMATION ANYTHING

    http://technologyandstyle.blogspot.com

    26 Agustus 2011 pukul 13.18  

    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