meletakkan DIVIDER diantara SIDEBAR.

ecadwinkyasha Thursday, January 06, 2011

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

aJa06 January, 2011
wahh..menarik..nk try la..
ecadwinkyasha06 January, 2011
@aJa
try la.kalau tak dapat,tanya akak ek.jgn malu2.
Anonymous23 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
ecadwinkyasha24 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....
Zul Han Na ^_~03 March, 2011
xpaham ar kak...xleyh ar
ecadwinkyasha03 March, 2011
@~Chocolate Strawberry~ apa yg xdpt?..jumpa tak sume code2 kat atas tu?...
Zul Han Na ^_~04 March, 2011
jumper....
ecadwinkyasha05 March, 2011
@~Chocolate Strawberry~ which code yg jumpa ne?...erm.MSG me on FB k..xpun add kat YM.
norliza25 March, 2011
saya dah try buat...tp yg nie xleh plak
Vyia the Princess30 June, 2011
npa x jmpa code niy ?? :((
Yunn Sarah01 July, 2011
ta dpt la kak ... leh ta ajar sy kat fb ? add yunni key sarah
ecadwinkyasha03 July, 2011
@Vyia the Princess u guna template designer mungkin tak leh la....
ecadwinkyasha03 July, 2011
@Yunn Sarah oke oke.
ecadwinkyasha03 July, 2011
@umiliza989 template tak sama kot.tu yg xjumpa kod.
Unknown22 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
ecadwinkyasha22 October, 2012
@Cik Mashi ini kod lama...
cuba masuk dashboard --> template --> edit html