[Tutorial] Divider pada sidebar

Salam dan selamat pagi. Saya kembali lagi dengan tutorial seterusnya. Kali ni saya nak menunjukkan bagaimana nak letak divider pada sidebar dalam blogspot.

sidebar divider

1. Sebelum memulakan aktiviti pengeditan HTML, cari la divider yang berkenan dihati dan upload ke    photobucket atau klik sini kalau malas nak cari :D

2. Masuk ke Design/Layout dan cari Edit HTML ---> klik

** Sebelum teruskan, pastikan anda back up templete dulu ( copy la HTML templete tu kat mana-mana, words pun boleh, takut tersilap edit hilang pula templete tu nanti. )

3. Gunakan Clrt + f dan cari kod seperti dibawah.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

4. Pisahkan kod tersebut menjadi dua bahagian seperti dibawah.

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

** hanya pisahkan .sidebar .widget dan .sidebar .widget sahaja, sementara yang lain tetap sama.

5. Seterusnya, edit bahagian .sidebar .widget menjadi seperti dibawah, tak pun copy saja kod dibawah ni.

.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(URL IMAGE);
background-position: bottom;
background-repeat: no-repeat; 
}

**Gantikan URL IMAGE dengan URL image yang telah diupload pada arahan no 1 tadi.

6. Klik Save templete.

Selesai. Selamat mencuba :)