Salam,
Semasa nak mengemaskini blog aku hari ni, aku terjumpa satu kaedah mudah untuk meletakkan sidebar widget di dalam scroll box. Fokus aku sebenarnya nak masukkan Archive, Blog List dan Label / Tag ke dalam scroll box sebab dah panjang sangat sampai ke bawah page.
Jadi aku cari melalui google dan terjumpa kaedah yang paling mudah di website Bloggersentral. Kaedah yang dikongsikan oleh brother ini, orang Malaysia jugak, adalah hanya letakkan kod pada kotak CSS tanpa perlu masuk ke html penuh blog yang amat memeningkan.
Berikut adalah langkah-langkah bergambar untuk membuat scroll box pada sidebar widget blog. Kalau gambar kecik, klik untuk zoom kan.
Langkah 1
Masuk ke Dashboard dan klik Template seperti yang dimerahkan di bawah.
Langkah 2
Sebelum anda klik Customize yang bertanda nombor 2, sila klik Backup seperti nombor 1 di bawah. Apa-apa berlaku, boleh restore balik ke template lama.
Langkah 3
Seterusnya, klik Advance (nombor 1) dan scroll sehingga ke bawah di mana terdapat perkataan Add CSS (nombor 2). Kotak seperti nombor 3 akan keluar.
Kemudian copy dan paste kod ini ke dalam kotak CSS tersebut:
#BlogArchive1 .widget-content {
height: 300px;
overflow: auto;
}
#BlogList1 .widget-content {
height: 300px;
overflow: auto;
}
Pada template aku, BlogArchive1 adalah label kepada Archive / Catatan Lepas, manakala BlogList1 adalah senarai blogroll aku. Takut-takut label atau nombor berbeza-beza mengikut template blog masing-masing. Jadi cuba je dulu.
Yang bagusnya membuat editing pada kotak CSS ini, kita boleh nampak sama ada kod yang kita masukkan itu berjaya atau tidak..sebab ada live review on the spot, yang mana kita boleh lihat blog kita di bawah ruangan edit. Kalau takde apa-apa perubahan berlaku selepas CSS dimasukkan, maknanya kod yang bertanda “#” tak betul..
Selamat mencuba!
nice tutor….tq 🙂
welcome..utk kemudahan bersama.. 🙂
berjaya kak. tq. cume.. sy kena add width sendiri.. try2.. nasib jadik.
#BlogArchive1 .widget-content {
height: 300px;
overflow: auto;
width: 320px;">
}
#BlogList1 .widget-content {
height: 400px;
overflow: auto;
width: 320px;">
}
mcm tu la kod sy. hehehe…
tq kak.. 🙂
tahniah..tahniah.. nasib baik jadi.. :))
assalamualaikum..:)
baru tahu pasal toturial buat scroll box guna CSS nih…nampak lebih mudah. 🙂
Waalaikumussalam.. 🙂
Betul tu..cara ni lagi mudah dr edit html.. Thx to Greenlava dari Bloggersentral..sy memanjangkan aje tips yg di ajar oleh beliau.. 🙂
Assalamualaikum akak…sye ada problem besar dalam blog sye…..sye punya blog asyik disable komen. orang nak komen pun tak dapat…sedih sgt….tolong sye…adakah mungkin disebabkan template corrupt jugak or other else? http://www.azimahshukor.blogspot.com
Tak corrupt rasanya. Ada nak kena adjust.. Nt kak jwb penuh ye…
Pertama, cuba yg ni dulu. Setiap kali menulis entri baru, pergi ke post setting di sebelah kanan kotak post, dan pergi ke Option yang terletak di bawah sekali. Tandakan "Allow Comment". Bagi post-post yang lepas, azimah kena buat secara manual (masuk ke post satu persatu dan edit) dgn kaedah yg sama.
Lepas tu tolong ajar saya bagaimana nak buat comment sye will be visible after approval? bantu sye ye akak
Salam.. Haa..dah visible pun :). Akak dan jugak mungkin kebanyakan blogger mengaktifkan "comment visible after approval" yg mana satu2 komen di dlm blog akan dihantar ke emel pemilik blog dulu untuk "diluluskan" paparannya. Bila dah diluluskan /approve, barulah komen appear di sini..mcm komen azimah ni. Ini sebenarnya utk mengelakkan spam atau komen yg bukan2 di dlm blog kita.
Pembetulan, mengaktifkan comment moderation on every comment sebenarnya.. Capaian ke tetapan ini spt di atas k 🙂
`perkongsian tutorial yang bagus.. 😀
terima kasih… :))
x jd pun:(
Ye ke? Tak jadi tang mana tu? Bole detail sikit? Macam..widget mana yg atien nak buat scroll box or other details..
Nk buat kt bloglist n blogarchives,,da try tp x de beza..paste kn kod tu je kn.kalau x de perubahan tp save juga apa akan jd pd blog tu..
yup..pastekan code ni je kat ruang CSS
#BlogArchive1 .widget-content {
height: 300px;
overflow: auto;
}
#BlogList1 .widget-content {
height: 300px;
overflow: auto;
}
Dah tengok page atien tu, sepatutnya takde masalah…how come eh..
Btw, takyah save dulu..nanti code bercampur-aduk pulak..
terima kasih di atas tutorial. saya berjaya buat tutorial ni untuk 3 label di blog saya, thanks for sharing. semoga Allah merahmati kamu. 🙂
Sama-sama.. Dan terima kasih juga..