Browse » » » Membuat Rolling Widget Buku Tamu (Widget Bergeser)
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
    <!-- Mulai Rolling Widget -->
    <style type="text/css">
    #gb{
    position:fixed;
    top:10px; /*jarak dari atas*/
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px; /*tinggi gambar*/
    width:30px; /*lebar gambar*/
    float:left;
    cursor:pointer;
    background:url("http://i563.photobucket.com/albums/ss76/peace_enes/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="http://enes-sc.googlecode.com/files/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
    https://sites.google.com/site/ruangsc/image/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
    https://sites.google.com/site/ruangsc/image/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...
 Semoga Bermanfaat

Artikel Terkait:

0 comments:

Posting Komentar

Jika Anda Ingin Berkomentar Mohon Di Cantumkan Nama Anda
Jangan Lupa Komenar Dan Follow ya !!!

Langganan: Posting Komentar (Atom)