Hasil seni dan reka bentuk adalah berbayar dan hakcipta Whitey Mommy.
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!

Cara Meletakkan Divider pada Setiap Post

Request daripada mama Gee... ha... layan cepat massage yang dia tinggal untuk saya...=)

blog saya tak de divider sebab saya letak 1 post je per page... macam blog mama Gee ni dia letak banyak post... jadi untuk nampak cantik dan kemas... kalau pakai divider memang sesuai...

ok... tutorial ni special untuk sis... dan jika ada sesiapa nak buat pun boleh... just follow this step...
1. Login ke Blogspot

2 . Klik Layout > Edit HTML
Klik Download Full Template (Untuk Back-up template) ini penting!

3. Cari kod seperti dibawah ataupun lebih kurang seperti dibawah... yang penting perkataan .post { [sebab kekadang ada template yang bahagian ni panjang sangat kodnya... dan ada juga yang hanya letak margin sahaja...jadi tengok betul2 ya...=)]

.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
border: 2px solid #FFC0CB;
padding:7px;
-moz-border-radius: 10px;
}

4. Kemudian, anda gantikan dengan kod dibawah ini...

.post {
background: url(url divider anda);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:5.5em;
}

*bahagian yang saya hightlightkan dengan warna merah anda harus meletakkan kod divider anda... divider anda boleh reka sendiri ataupun.... boleh didapati disini... boleh pilih sampai lebam =p . Sila pastikan cara anda mengambil url untuk gambar adalah betul. rujuk disini ya untuk cara mengambil kod...

**[updated] Jika anda tidak jumpa kod .post didalam template anda... boleh tambah kod diatas ini sebelum atau diatas kod ]]></b:skin

5. Anda boleh Preview... dan jika tiada sebarang error dan divider anda pun dah cun! bolehla save dengan jayanya....

Whitey Note: Selamat Mencuba dan jangan lupa tinggalkan komen anda selepas mengambil tutorial ini...=)

51 Comment (s):

  1. waaaaaaaaahh macih byk2 ya mommy... :)

    ReplyDelete
  2. akk,nk wt background pink pada tittle post cne ek?

    ReplyDelete
  3. i like this tutorial.. puash cuba akhrnya berjaya...thanks..!!

    ReplyDelete
  4. salam...dh jenuh wat tp nape x jd.?? hmmm....

    ReplyDelete
  5. @nanie
    tak semestinya kena cari kod semua tu... kalo jumpa yang .post tu pun dah boleh ganti...sebab setiap template tak sama dia punya kod... jadi kena perhati betul2...

    ReplyDelete
  6. ok tp kalau saya punya mmg dh sedia ade divider post tu.,cmne.? saya dh jmpe coding divider post yg lame tp bila replace x jd la....

    ReplyDelete
  7. @nanie
    lebih senang cuba replace kod yang sedia ada tu dengan kod yang diatas ni... ataupun cuba cek samada takut tersilap amik kod ke... banyak kemungkinan...

    ReplyDelete
  8. .post {background:url=http://www.glitter-graphics.com][img]http://dl5.glitter-graphics.net/pub/153/153625nqc2f58k5n.gif[/img][/url];background-repeat: no-repeat;background-position: bottom left;margin:.5em 0 2em;border-bottom:0px dotted $bordercolor;padding-bottom:6em;
    }


    hehee...maaf ye menyusahkn.x puas ati sbb xjd.neway coding kt ats tu yg saya punye.ade yg silap ke.? divider post amik kt glitter

    ReplyDelete
  9. .post {background:url=http://www.glitter-graphics.com][img]http://dl5.glitter-graphics.net/pub/153/153625nqc2f58k5n.gif[/img][/url];background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:5.5em;
    }


    sori td tu x paste abis...

    ReplyDelete
  10. @nanie
    yup salah... ini pembetulannya...
    nanie said...

    .post {background: url(http://dl5.glitter-graphics.net/pub/153/153625nqc2f58k5n.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:5.5em;
    }

    cara saudari paste kod tu yang salah. codingnya dah betul cuma url untuk gambar tu salah ambil kat glitter graphic tu tak semua kod boleh ambil...sila tengok tutorial saya ya macam mana cara nak ambil url kat glitter graphic... tq...

    ReplyDelete
  11. wee...dh jd.mekacih byk.x abis bace tutorial rupenye.kikiki...akan cube copy paste divider len plak ikut tutorial cmne nk amik coding kt glitter tu.

    ReplyDelete
  12. salam mommy.. utk tutorial ni nk tnye, nape wt x dpt2 ek.. blh x tlg tgk2kn ada yg silap ker ngn coding kt bwh ni..

    .post {
    background: url (http://dl.glitter-graphics.net/pub/701/701401ue14lmg849.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:5.5em;
    }

    ReplyDelete
  13. knp saye tak jumpe perkataan .post ?
    saye just jumpe .post footer and blockquote jee .. cmanee yee ?

    ReplyDelete
  14. @Cik Eniey
    eh... rasa semalam dah reply comment ni... hm...
    cuba perhati betul2... bahagian url dan tanda ( tak rapat...
    bahagian tu kena rapatkan ya...

    ReplyDelete
  15. mommy, sy da try buat tp tak jadi la.. sy tak jpe pon perkataan .post tu... knpe..?

    ReplyDelete
  16. @eera
    saya dah update...tak semua kod ada dalam template... jadi kena belajar modified sikit kita punya html dalam template kita...:)

    ReplyDelete
  17. .post {
    {background: url[url=http://www.glitter-graphics.com][img]http://dl6.glitter-graphics.net/pub/439/439056rvbdehj1y0.gif[/img][/url]);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:5.5em;
    }


    apa yg slh yer?xdpt la.....hhuhuhuhuhu

    ReplyDelete
  18. @iDa
    sis... as blogger kena alert.. baca komen2 kat atas.. n baca betul2 tutorial...saya ada provide cara nak amik url kat glitter graphic cemana... tq

    ReplyDelete
  19. thanx again for the easy tutorial!!!

    ReplyDelete
  20. dah try pn and dah dpt..tq..
    ada tutorial utk blockquote tak?

    ReplyDelete
  21. hehe..thanks..dah menjadi.

    ReplyDelete
  22. mekaseh mommy..
    saye da try..
    suke2..~__^

    ReplyDelete
  23. tq mommy .akhirnya jd jgk. huhu.

    ReplyDelete
  24. kenape tak jadi ? sye dah ambik dah url die seperti yg mommy suruh

    ReplyDelete
  25. Sis , kalau macam nak buat divider yg jenis garis lurus camne ea ?
    :))

    ReplyDelete
  26. salam,mommy,.jadi,thanks tapi kn divider tu btol2 ade kat atas ayat pertame entri sy,.cmne?,.aduhh,die xberada di tmpt yg sptotnyer la,.huhu,.ke sbb mse copy url tu sy xsertakan skali width height n border die?,.plizz,.

    ReplyDelete
  27. mommy,fyi,.sy gne minima template.,xboley ek?,.

    ReplyDelete
  28. code tu x jumpa..jumpa kod ni je
    .post a:hover img {
    width:500px; height:400px; float:middle;
    }

    ReplyDelete
  29. salam akak...
    nak tnye..nape bwh divider blog syieda ade warne glap tuu? akak leh x tlg ajarkan cmne nak ilgkan.. :( need ur help..

    ReplyDelete
  30. salam akak...syieda dah tau nape..td syieda on9 dkt opis..opis blocked fb..jdi button like fb tuu yg gelap..hikhik

    terase diri nieh dpermain oleh fb!!uwaaaa...

    ReplyDelete
  31. salam , ehh i da download full template tp pastu kene wat apew ??
    kusut -_-"

    ReplyDelete
  32. kenapa post sy jauh antara satu post ke post lg satu walaupun sy dh letakkan divider...

    ReplyDelete
  33. kenape tak bole? penad lhaa buad

    ReplyDelete
  34. @azlin othman
    sis kena pergi ke bahagian design lepas tu cari kat bahagian edit post
    un tick kan share.

    ReplyDelete
  35. salam mommy . mommy de buat x tuto mcm kalau setiap post kn bila abis je tulis kat bawah tuh mesty ade whitey mommy ..

    ReplyDelete
  36. salam.. mommy.. kita x paham.. :(
    -mimie-

    ReplyDelete
  37. Time kasih Mommy!!! Banyak kali cube try n error. Akhirnya berjaya lepas beberapa kali baca tutorial mommy. Lepas ni leh la tukar2 divider.

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™