Tutorial : Buat scroll untuk bloglist

Assalamualaikum wbt..

Lama rasanya tak buat tutorial, kan.. Ianya sesuai untuk awak yang baru saja masuk dalam dunia blog dan tutorial sememangnya diperlukan kerana dengan tutorial, awak boleh mencantikkan lagi blog awak, di samping tue, masa untuk loading blog pun cepat.. 

Kali nie, saya nak berkongsi ilmu pada awak, cara-cara untuk buat scroll untuk 'blog archieve' dan 'bloglist'.. 

Selalu bila kita buat blog, mesti kita akan letak 'blog archieve' atau dalam bahasa Melayunya 'Arkib Blog'.. Sebab utama kita kena letak 'blog archieve' nie adalah untuk memudahkan sesiapa yang singgah di blog awak, mereka boleh baca entri awak yang lain.. Bila kita buat blog mesti kita akan dapat widget sebegini..

Bila jadi camnie, rasa macam panjang pulak list nie dan nampak sedikit berserabut.. Camne pulak dengan bloglist..? Adakah ianya seperti nie..?

Panjang betul kan.. Memang awak boleh buat minimize  berbentuk nie, ...

Tapi bila tekan menu 'show all' mesti widget tue panjang semula macam gambar kat atas tue dan mungkin la ada pembaca rimas nak tekan 'scroll' panjang-panjang sebab manusia nie kan bermacam perangai.. 

So, nak buat camne..? Kita boleh jadikan widget-widget nie cantik dipandang...Contohnya macam nie..

Ataupun ini ke....

Nampak..? Cantikkan.. Senang jea nak buat, awak hanya perlu letak coding scroll box dengan CSS.. "CSS bermaksud Cascading Style Sheets" iaitu style menentukan cara memaparkan elemen HTML.. 

Mula-mula, yang paling utama awak kena selalu buat backup blog awak sebelum nak edit sebarang coding.. 

Langkah pertama, awak pergi ke Theme dan klik pada menu Customize. 

Langkah kedua, bila dah klik kat situ, paparan ini akan keluar kat skrin..

Langkah ketiga, awak klik pada menu Advanced dan kemudian klik Add CSS.. 

1) Untuk coding blog archive,  awak taipkan coding nie..

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

2) Untuk coding bloglist, awak taipkan coding nie..

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

3) Untuk coding label, awak taipkan coding nie.. 

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

Langkah terakhir, bila awak dah letak coding, klik pada menu Apply to Blog dan lihat hasilnya.. Awak boleh adjust height scroll box mengikut citarasa awak sendiri.. 

Senang kan.. Selamat mencuba..