meletakkan DIVIDER diantara SIDEBAR.

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!

Post a Comment

16 Comments

  1. wahh..menarik..nk try la..

    ReplyDelete
  2. @aJa
    try la.kalau tak dapat,tanya akak ek.jgn malu2.

    ReplyDelete
  3. .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

    ReplyDelete
  4. @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....

    ReplyDelete
  5. @~Chocolate Strawberry~ apa yg xdpt?..jumpa tak sume code2 kat atas tu?...

    ReplyDelete
  6. @~Chocolate Strawberry~ which code yg jumpa ne?...erm.MSG me on FB k..xpun add kat YM.

    ReplyDelete
  7. saya dah try buat...tp yg nie xleh plak

    ReplyDelete
  8. ta dpt la kak ... leh ta ajar sy kat fb ? add yunni key sarah

    ReplyDelete
  9. @Vyia the Princess u guna template designer mungkin tak leh la....

    ReplyDelete
  10. @umiliza989 template tak sama kot.tu yg xjumpa kod.

    ReplyDelete
  11. 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

    ReplyDelete
  12. @Cik Mashi ini kod lama...
    cuba masuk dashboard --> template --> edit html

    ReplyDelete

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