Post navigation

Tutorial Border Melengkung Pada Sidebar | Moz Border

Posted on by
Kali ini request dari miza yusof dan kak diana yang nak belajar macam mana cara nak buat border melengkung pada border sidebar. Tapi code yang cik tom akan ajar ni bukan hanya boleh apply pada sidebar je, korang boleh jugak letak border melengkung pada post entry, title sidebar, title entry, blockquote dan mana-mana korang rasa nak letak. Border melengkung ni dapat di view dari browser mozilla firefox dan juga chrome.

 

border melengkung jenis moz border
STEP 1

First step ialah backup dahulu template korang sebagai langkah berjaga-jaga tapi kalau rasa yakin tak payahlah;

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE

STEP 2

Klik “CTRL+F” ataupun “F3″ untuk cari code ni;

 

.sidebar .widget{

 

STEP 3

Masukkan code di bawah selepas code .sidebar .widget{

 

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:4px solid #D41A1F;

Contoh coding;


.sidebar .widget{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:4px solid #D41A1F;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px}

**bagi border lengkung pada post entry sila copy code selepas .post{

**nombor 1opx tue korang boleh ubah sesedap rasa.
**setiap blog maybe berlainan coding. Bagi yang berlainan code, cuba cari perkataan sidebar dan cuba masukkan code dalam step 3 tue ye. Try and error.


STEP 4 
Preview dan save kalau tiada error pada coding. Selamat mencuba. Kalau ada masalah or pembaharuan, cik tom akan update dalam entry ni ye.

 Credit: zaer (link diremove sebab error 404 not found)

********************************************************
klik sini

80 thoughts on “Tutorial Border Melengkung Pada Sidebar | Moz Border

  1. terbaik tutorial ni.. utk yg tak tahu elok lah cuba… tp kena download dulu template asal, takot tak menjadi..huhu…

  2. thanks cik tom. thansk sudi berkongsi. tutorial yang baik. nanti miza cuba :)

    *cik tom dapat tak komen miza pasal tab menu ?

  3. cantik lah..
    nak cuba satgi..
    akak rasa baik setiap sabtu cik tom buat tutorial sebab
    sabtu akak boleh lepak je depan lappy..
    hahahah
    ye la..
    nak cuba buat tutorial2 ni kena
    ambik masa jadi hari sabtu memang sesuai..hari lain sibuk macam2 hal la..
    kan??kan??

  4. ciktom,thanx ya..
    lupa nk ckp thanx sbb sudi bls komen2 sya psl icon image yg comel 2.hargai sgt2..tutorial yg ni sye dah try tp mcm x boleh sbb mmg xde border dkt bloglist sye 2..hehe
    mmg kena ada border dulu ya?mcm mana ya nk buat

  5. ala..sye nye sidebar plain,xde warne.=(…

    rajin lah cik tom ni buat tutorial =)

  6. thanx cik tom..
    dah berjaya buat..
    dulu pernah cari tutorial ni..
    jumpa tp tak menjadi..
    yg ni dah menjadi.. :D

  7. @pearl jade: ur welcome dear…yupp kena masukkan coding border…sori lupa…cik tom dah update coding border…cuba tengok ye..

  8. akak buat dah..
    terima kasih cik tom..
    tapi..
    akak nak buat untuk post dia tak tutup semua la..tajuk post dengan tarikh post tu tak duduk dalam kotak tu..
    akak suka yang macam blog cik tom ni..
    nampak kemas..
    semua dok dalam kotak.

  9. @pinqib: cik tom xpasti la yunk sbb xnmpk ur code…cuba try buat dulu ye..kalau xjadi bgth ek…

  10. @diana: comel yang akak buat..huhu…kalau nak buat yang camtu…akak masukkan coding dalam step 3 selepas code ni;

    .post{

    cuba jd x ek?

  11. kepada semua yg komen thanks ye…selamat mencuba tutorial ni..ada masalah boleh tanya..insyaAllah akan bantu selagi termampu :)

  12. ciktom sayang..berjaya
    hehe
    tapi untuk lengkung dekat post entri, border lengkung tak jadi untuk satu entri.cth mcm blog sye ade 4 entri, so border lengkung 2 ada 1 je..die x jdi 4 border lemgkung.alamak,maaf kalau saya memeningkan ciktom.hehe

    sye x phm yg **bagi border lengkung pada post entry sila copy code selepas .post{

    sye x jmp .post{
    hehe

    ape pun,thanx tau ciktom…sayang ciktom..muaxxxxxx

  13. I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  14. cik tom..saya poning laa…jadik tu mmg jadi melengkung tu tp…title entry saya lak ilang..dia jd same col0r ngn bground,itam.

  15. nie tutorial y sye cri…
    tpi coding tue semua yek tak de dlm HTML sye…
    sgt sedih…:(
    cm ne ek???
    kenapa leh jadi cm nie…:(

  16. @loving you: erm awak dah betul2 follow up semua step ni ker??sebab cik tom baru je cek awak punya coding..memang ade code tue..cuma code awak punya camni;

    .sidebar .widget {
    border-bottom: 10px solid transparent;
    padding-bottom: 10px;
    margin: 10px 0;
    }

    awak hanya perlu adjust dengan tambah coding dalam step 3 ke dlm coding awak jd camni;

    .sidebar .widget {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:4px solid #D41A1F;
    padding-bottom: 10px;
    margin: 10px 0;
    }

    **code "#D41A1F" ni …awak boleh ubah warna yang disukai..

  17. salam…cik tom…kenape coding yg cik tom bg tu xde pon kat sy punye edit html..?sume lain…ade x cara lain?huhu…sedih betol..

  18. @irdina imanina:salam irdina..cik tom dah buka blog awk..n cik tom dh cek…dlm coding blog awak ade coding dlm step 2…ni coding awk tue..

    .sidebar .widget {
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    background: #FF9999;
    border: 1px solid #CC3333;
    margin:0 -5px 1.5em -5px;
    padding:5px 7px 5px 7px;
    }

    cuba tgk betul2 ye n follow up step dlm tutorial ni;

  19. salam cik tom, sy buat tak jadi la..
    saya punye code kluar cam ni .sidebar .widget"> , sy dh cuba paste kat sebelah code tu tp tak jadi la.. blh tolong tak?

  20. @fiqas;

    cik tom dah tgk coding blog fiqas…ni codenya kan?

    .sidebar .widget {
    font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #222222;
    }

    nanti fiqas cuba copy code bawah ni dan gantikan dengan code kat atas tue…

    .sidebar .widget {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:4px solid #D41A1F;
    font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #222222;

    }

    try buat..slmt mencuba ^_^

    p/s: sori ye br jawab sbb busy ^_^

  21. kalau nak cek toturial,sy suka layan blog ni n maribinablog.blgspot tu…tapi panas punggung bila coding sy tak sesuai ngan semua toturial yang ada..tolong sy cik tom..eheeeee tlong make up artis blog sy ni…heheee

    *memain je,bukan apa ..geram bila tak dpt nak buat bnda2 ni semua..blog buruk mcm sy ni,org mencik nak masuk..tapi takpe, achie tak kisah..hehehee

  22. cik tom…nape saya tak ley wat border ni ye…tak jumpe pun code .sidebar .widget{

  23. @nadiah izahar;adjust pada code padding…kalau nak jarakkan tambah nilai pada nombor code padding…

  24. @ciknana: sori template awk xsesuai dgn code ni kot sbb cik tom cari code ni mmg xjumpa…sori ye..

  25. @razzmatazz; sori template awk xsesuai dgn code ni kot sbb cik tom cari code ni mmg xjumpa…sori ye..

  26. done! i did it! thanks. baru je lepas buat entry nk cari tutorial buat nih. skli dah jupa! thankssss :D

    • cara nak tukar warna pada border sekeliling ialah dalam step 3 tue cik tom ada masukkan juga code ini;
      border:4px solid #D41A1F;
      farisz just kena adjust pada code tue:
      4=boleh ubah untuk ketebalan border
      solid=untuk jenis border..untuk tahu jenis border yang ada boleh rujuk (www.ciktom.com/cara-tukar-dan-jenis-border-pada-sidebar-dan-post/)
      #D41A1F=ialah untuk code warna..nak rujuk code warna boleh kat (www.ciktom.com/html-code-color-warna-kod-html-2/)
      harap dapat membantu

  27. dah jadi!! thanks sangat2 kak… dah lama saya cari tutorial ni… sebenarnya, kalau x der kod “.sidebar .widget{ ” tuh, kod “h2 { ” pun boleh… tapi caranya camni…

    ganti je kod “h2 {” (abaikan pembuka & penutup kata) ngan kod yang kat atas tuh… yang :
    “.sidebar .widget{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:4px solid #D41A1F;
    margin:0 -5px 1.5em -5px;
    padding:0px 7px 10px 7px}” tuh (abaikan pembuka &penutup kata)…

    jadi la… hehe,… thanks sangat2 kak…
    gary recently posted..day eight : 10 of my favourite song…My Profile

    • sori ye adik..adik punya template tak sesuai untuk buat tutorial cik tom ni sbbnya cik tom dah tengok awak punya code memang takde sidebar.widget…sori ye…tapi blog adik dah cantik..

    • sori..cik tom dah tgk coding blog awak..memang takde code tue..awak punya template tak sama dengan tutorial yang cik tom sediakan ni…

  28. cik tom,,kad template kiter tak de 1 pon kod sidebar..bila search side ad..biler tambah bar tros 0..cam mana ek??

    • apa link blog adik ye??akak pun xpasti sbb xdpt tgk sendiri..tp maybe kaler font pada title tue buatkan xnmpk post title if font title kaler putih/kaler sama dengan background post title..