[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 :)

[Tutorial] Meletak divider antara post

Salam semua :)

Dah lama saya tak update blog ni. Maklumlah sibuk dengan tugas harian, tambahan pula kedai baru dah launch, maka kerja-kerja semakin banyak yang perlu dibereskan.

Beberapa hari ni, saya banyak meronda blog-blog orang, cantik2 seh blognya, maka saya sekali lagi terfikir untuk membuat perubahan pada blog ni. Dah lama terfikir nak buat, tapi aura kemalasan kuat, maka tak buat la :p

Untuk kali ni, saya ingim memberikan sedikit tutorial tentang bagaimana meletakkan divider diantara post-post anda. Senang saja,

post divider

1. Pegi ke Design/Layout dan klik.

2. Cari Edit HTML dan klik lagi.

3. Gunakan Ctrl + f untuk mencari .post -----> 

.post {
margin: 0 0 40px 0;
width: 90%
}

4. Dah dapat seperti di atas ? Gantikan dengan yang dibawah ni.

.post{margin: 0 0 40px 0;
width: 90%;
background: url(URL image);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

 URL Image <-----  gantikan dengan url image yang berkenan dihati. Sebelum tu, image tu hendaklah diupload menggunakan photobucket atau apa saja software yang sewaktu dengannya. Selepas tu  copy direct URL image ke kawasan bertanda merah tu. Senangkan :)

Kalau malas nak upload, gunakan yang dah ada ni ----> Divider

5. Dah selesai tu klik save templete. :)

Selamat mencuba.

Kalau tak faham, cuba klik Sini