Harry Potter - Golden Snitch
JANGAN LUPA TINGGALKAN KOMENTARNYA GAN...!!! KAN BELUM TUA (PIKUN) JADI HARUS INGAT..!!

Cara membuat Scrollbar Pada Label di Blog

Selasa, 31 Januari 2012

Selasa, 31 Januari 2012
Kata scroll memang sudah tidak asing bagi anda. Yang namanya scroll adalah sesuatu yanh dapat ditarik ke atas dan ke bawah. Sebagai contohnya antara lain lihatlah sebelah kanan bagian archive. Scroll dibagi menjadi 2, yaitu scroll vertikal dan scroll horizontal.

Kali ini saya akan memanfaatkan scroll vertikal untuk menghemat tempat di blog. scroll vertikal adalah scroll yang menggulung dari atas ke bawah. caranya dengat membuat scroll pada label,blog arsip atau widget lainnya yang mempunyai bentuk memanjang ke bawah. Hal ini pasti akan menghemat tempat di blog kita. Bagi anda yang belum mengetahui caranya, ikuti saja tutorial di bawah ini.

Langkah-langkah :

1. Seperti biasanya, login ke account blogger anda dulu.
2. Lalu anda akan masuk ke menu Dashboard / Dasbor, dari situ langsung saja menuju ke menu Design / Rancangan. Kemudian, masuklah ke menu Edit HTML.
3. Sebelum anda dapat membuat scroll pada widget, anda harus mencari ID dari widget tersebut.
4. Di bawah ini hanya contoh ID dasar widget, tapi tidak selalu sama dengan ID widget di blog anda.

A. Widget Label = Label1 ; Label2 ; Label3 ; dan seterusnya


B. Widget Blog Arsip = BlogArchive1 ; BlogArchive2 ; BlogArchive3 ; dan seterusnya


C. Widget Profil Blogger = Profile1 ; Profile2 ; Profile3 ; dan seterusnya


5. Sebagai contoh, saya akan membuat scroll pada widget Label.
6. Cari kode ]]> dengan menggunakan Ctrl + F
7. Kemudian, letakkan kode berikut di atas kode ]]>


#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Yang perlu di perhatikan :
  • Label1 adalah ID dari widget label. Ganti dengan ID widget yang ingin anda buat scroll
  • height:200px; adalah tinggi dari widget scroll. Ganti dengan tinggi widget scroll yang anda inginkan
8. Susunan lengkapnya akan menjadi seperti di bawah ini

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
]]>

Jangan lupa tinggalkan koment kawan...!!!!

Comments:

Posting Komentar

ADD YOUR COMMENTS

Related Posts Plugin for WordPress, Blogger...
 
Hajir21 Blog © Copyright 2010 | Design By Gothic Darkness |