Scroll bar bertujuan untuk menjimatkan ruangan pada widget yang korang nak pasang. Ia juga boleh mengelakkan senarai list dalam blog korang berderet panjjang sampai ke 1meter. cara untuk pasangkan scroll bar pada widget agak mudah.
Sila baca tutorial ni untuk mengetahui cara memasang scroll bar pada blog korang.
Sila ikut langkah ini1. Login > Layout > Add gadget > pilih HTML/JavaScript
2. Masukkan kod di bawah ni ke dalam HTML/Javascript korang
<div style="background-color: white; border: 1px solid rgb(100, 100, 100); height: 80px; overflow: auto; padding: 5px; width: 170px;">
Korang boleh masukkan teks ataupun apa-apa kod yang korang nak di sini </div>
- Korang boleh tukar warna background widget dengan mengantikan white menggunakan kod warna yang korang nak
- Untuk menetapkan sais scroll box korang boleh tukarkan height untuk mengubah ketinggian dan tukarkan width untuk menukar lebar.
- Korang juga boleh tukarkan sais border dengan mengubah nombor yang bewarna pink
Korang boleh lihat contoh scroll bar di bawah ni
Cerita Si Mamat
Ada sorang mamat tu masuk ke dalam lif untuk naik ke tingkat lapan sebuah bangunan. Sampai tingkat satu, tetiba je masuk sorang awek cun lagi bergaya lalu menyembur perfume ke tubuhnya."Ini perfume mahal tau..jenama Beverly Hills, RM400 sebotol," katanya angkuh. Bengang giler mamat tu.
Sampai tingkat tiga, masuk lak sorang mak datin juga menyembur perfume ke tubuhnya. "Perfume Vecinza dari Itali, RM1000 sebotol tau," kat mak datin tu lagi angkuh berbanding awek cun tadi. Lagilar menyampah giler mamat tu.
Sampai je tingkat lapan, pintu lif pun terbuka dan mamat tu sedia lar nak keluar dari lif. "Proootttt!!! Sebelum keluar mamat tu sempat mengeluarkan "gas aslinya" dalam lif tu. "Telur rebus kedai mamak. Tak mahal, lima puluh sen sebiji jer..,"kata mamat tu selamba lalu berjalan meninggalkan kedua pompuan kerek yang mula termuntah dalam lif.
Ada sorang mamat tu masuk ke dalam lif untuk naik ke tingkat lapan sebuah bangunan. Sampai tingkat satu, tetiba je masuk sorang awek cun lagi bergaya lalu menyembur perfume ke tubuhnya."Ini perfume mahal tau..jenama Beverly Hills, RM400 sebotol," katanya angkuh. Bengang giler mamat tu.
Sampai tingkat tiga, masuk lak sorang mak datin juga menyembur perfume ke tubuhnya. "Perfume Vecinza dari Itali, RM1000 sebotol tau," kat mak datin tu lagi angkuh berbanding awek cun tadi. Lagilar menyampah giler mamat tu.
Sampai je tingkat lapan, pintu lif pun terbuka dan mamat tu sedia lar nak keluar dari lif. "Proootttt!!! Sebelum keluar mamat tu sempat mengeluarkan "gas aslinya" dalam lif tu. "Telur rebus kedai mamak. Tak mahal, lima puluh sen sebiji jer..,"kata mamat tu selamba lalu berjalan meninggalkan kedua pompuan kerek yang mula termuntah dalam lif.
Sekiranya korang hendak letakkan kod html dalam scroll box korang sila rujuk kod di bawah
<div class="widget-content">
<ul style="width: 300px; height: 150px; background-color: white; font-family: verdana; font-size: 12px; font-weight: bold; text-align: left; border: 2px ridge #333333; overflow: auto;"><li><a href="Http://www.khaiangel.com" target="_blank">Khaiangel.com</a></li>
<li><a href="Link Yang korang nak letak">Perkataan Korang</a></li>
masukkan link korang yang seterusnya...
</li></ul></div>
- Tukarkan nilai width: 300px untuk lebar
- Tukarkan nilai height: 150px untuk ketinggian
- Tukarkan white kepada kod warna lain untuk ubah warna background
- Tukarkan 12px untuk ubah sais font
- Tukarkan text-align: left untuk align text (left, right, center)
- Yukarkan 2px untuk ubah sais border
- Tukarkan #333333 kepada kod warna yang korang nak utk ubah warna border
- Tukarkan Link Yang korang nak letak kepada Link yang korang nak letak
- Tukarkan Perkataan Korang kepada Perkataan korang sendiri
Dah siap customize? huhuhu tekan save. kemudian view widget korang.
Selamat mencuba dan semoga berjaya ^^
Smile :D
Tags: Tutorial Blog, Tutorial Blog Memasang Scroll Bar dalam Blog Poat, Tutorial Blog Melayu, Cara Buat Blog, Cara Bina Blog, Tutorial Blogspot, Tutorial Blogger
macam mn nk buat labels? ada tutorial psl tu tak?
ReplyDelete@Abbie Nichhun
ReplyDeleteKalau nak guna pada labels cara dia adalah sama dengan cara memasukkan kod HTMLdalam scroll bar. Gantikan "Link yang korang nak letak" dengan "Link pada Labels" dan "Perkataan Korang" kepada Nama Label.
:)