meletakkan DIVIDER diantara SIDEBAR.


kali ne cikgu nak ajar cara-cara untuk buat DIVIDER antara SIDEBAR didalam blog.
contohnya macam ne ya murid-murid::



korang tengok kat atas tu yer..I da tunjuk dengan anak panah cinta.
yang tu namanya DIVIDER.Perhatikan baik-baik ya,ini untuk SIDEBAR.

1st :: cari divider yang korang nak.
          ada kat sini yer:
           Glitter Graphics
           Graphics-4free
           Ladylony
2nd :: masuk blog korang.
          Dashboard ->Template -> Edit HTML -> Proceed

3rd :: Ctrl + F , dan cari benda ne...

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

4th :: gantikan kod diatas ini dengan kod 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;
         }

5th :: sekarang code kat atas (.sidebar.widget{) kena ubah sikit...

         .sidebar .widget {
         border-bottom:0px dotted $bordercolor;
         margin:0 0 1.5em;
         padding:0 0 50px;
         background-image: url(URL gambar korang nak);
         background-position: bottom;
         background-repeat: no-repeat;
6th :: letakkan URL gambar yang korang da pilih tue dalam kod di atas yer.

7th :: PREVIEW terlebih dahulu baru SAVE.

sekian,tutorial kali ini.kalau korang tak dapat buat,just tanya k.


p/s:thanks puwn da cukup!

{ 16 comments.. read them below or add one }

aJa aJa 06 January, 2011
wahh..menarik..nk try la..
ecadwinkyasha ecadwinkyasha 06 January, 2011
@aJa
try la.kalau tak dapat,tanya akak ek.jgn malu2.
AnonymousAnonymous 23 February, 2011
.sidebar .widget {
font: $(widget.font);
color: $(widget.text.color);
}

.sidebar .widget a:link {
color: $(widget.link.color);
}

.sidebar .widget a:visited {
color: $(widget.link.visited.color);
}

.sidebar .widget a:hover {
color: $(widget.link.hover.color);
}

.sidebar .widget h2 {
text-shadow: 0 0 $(title.shadow.spread) #000000;
}

yang mana 1 nak d edit ni..yg ni je yg d jumpai
ecadwinkyasha ecadwinkyasha 24 February, 2011
@Anonymous

adakah CODE neyh;;;

.sidebar.widget{

selepas kod tu,tambah kod yg I da bagi kat atas.sebelum kod FONTS tue...


cik/encik ANON..I nak tolong U,boleh tak U bagi I url blog U..plezzz....
ecadwinkyasha ecadwinkyasha 03 March, 2011
@~Chocolate Strawberry~ apa yg xdpt?..jumpa tak sume code2 kat atas tu?...
ecadwinkyasha ecadwinkyasha 05 March, 2011
@~Chocolate Strawberry~ which code yg jumpa ne?...erm.MSG me on FB k..xpun add kat YM.
umiliza989 umiliza989 25 March, 2011
saya dah try buat...tp yg nie xleh plak
Vyia the Princess Vyia the Princess 30 June, 2011
npa x jmpa code niy ?? :((
Yunn Sarah Yunn Sarah 01 July, 2011
ta dpt la kak ... leh ta ajar sy kat fb ? add yunni key sarah
ecadwinkyasha ecadwinkyasha 03 July, 2011
@Vyia the Princess u guna template designer mungkin tak leh la....
ecadwinkyasha ecadwinkyasha 03 July, 2011
@umiliza989 template tak sama kot.tu yg xjumpa kod.
Cik Mashi Cik Mashi 22 October, 2012
Akak.. npe x jumpe pon:
2nd :: masuk blog korang.
Dashboard ->Design -> Edit Html

lps da msok blogger tu, tp x jumpe pun design tu.. huhu

btw, salm kenal dri cik mashi.. :D
Eca Dwinky Asha Eca Dwinky Asha 22 October, 2012
@Cik Mashi ini kod lama...
cuba masuk dashboard --> template --> edit html

Terima Kasih atas komen anda.
Eca akan balas & terjah anda secepat mungkin.
*-*