SweetMuslimah.com

Monday, February 23, 2015

TUTORIAL: Buat scrollbar pada Popular Posts

Assalamualaikum

Hari ni aku cuba nak improve appearance blog. Nak cuba jimatkan ruang & nampak kemas. Tak adalah nanti orang datang, nak kena scroll jauh-jauh ke bawah semata-mata nak tengok entry yang dapat sambutan hangat (hangatlah konon, perasannya. Bhahaha). Bila buat scrollbar ni, cadangnya bolehlah aku banyakkan entry. Jadi, aku update, masukkan 10 popular post, yang kononnya menjadi pojaan hati pengunjung *sila jangan muntah, ekekeke* ^^

Jadi, setelah mencari-cari, akhirnya aku jumpa juga tutorial yang mudah, dan alhamdulillah menjadi pada blog aku. Kena try-and-error dulu, baru aku berani buat tutorial. Terima kasih kepada blogger Cikgu Kacamata atas tutorial ini. Tapi, ada step yang aku ubah sedikit, sebab tutorial yang diberi tak sesuai dengan template blog aku. 

 Scrollbar Popular Posts
Scrollbar pada Popular Posts


Sebelum mulakan edit template, terutama sekali jika terlibat dengan penggunaa HTML, jangan lupa untuk save template asal dahulu. Kalau process editing tak jadi, boleh revert to original template semula :)


Langkah-langkahnya:-

1. Dashboard > Options > Template > Edit HTML 

2. CTRL F untuk cari:
<div class='widget-content popular-posts'>

3. Tepek / letak kod dibawah ini pada bahagian atas kod no.2 yang dicari tadi.

<div style="overflow:auto;width:100%;height:280px;padding:0px">

Klik untuk lebih jelas


Nota:
Coding warna merah '280' px adalah saiz scrollbox. Berapa panjang scrollbox. Boleh tukar ikut suka hati & suka perut. Aku tukar 300px sebab nak nampak banyak post keluar.


4. Kemudian, cuba preview template dahulu. Macam aku, bila nak preview template, dia keluar arahan 

Could not load template preview: Error parsing XML, line 2784, column 3: The element type "div" must be terminated by the matching end-tag "</div>".

5. Arahan tu bagitahu dekat mana yang error. Line 2784. Jadi, cari line 2784. Atau boleh           juga CTRL F untuk cari:
</b:includable>

Klik untuk lebih jelas

6. Letak </div> atas no.5

Klik untuk lebih jelas


7. Preview template. Kalau tiada masalah, boleh save template. SIAP!



Terima kasih kerana mencuba tutorial ini :)











TUTORIAL: Buat scrollbar pada Popular Posts
4/ 5
Oleh

Share

Entry Pilihan

4 comments

Tulis comments
avatar
February 23, 2015 at 5:57 PM

saya singgah sini

Ikhlas - Bakul2011

www.bakul2011.com

Reply
avatar
February 23, 2015 at 6:57 PM

tuto ni mmg wajib pada semua blog sbnrnya :) nice :)

Reply
avatar
February 24, 2015 at 12:19 PM

Betul. Tutor yg simple mimple ^^

Reply

Hai. Terima kasih kerana meninggalkan komen. Kak Sha will get back to you sooner =)

Followers

Google+