Tutorial Border Melengkung Pada Sidebar | Moz Border

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)

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

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

  • January 8, 2011 at 8:41 am
    Permalink

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

    Reply
  • January 8, 2011 at 8:56 am
    Permalink

    thanks cik tom. thansk sudi berkongsi. tutorial yang baik. nanti miza cuba 🙂

    *cik tom dapat tak komen miza pasal tab menu ?

    Reply
  • January 8, 2011 at 8:56 am
    Permalink

    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??

    Reply
  • January 8, 2011 at 8:56 am
    Permalink

    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

    Reply
  • January 8, 2011 at 9:11 am
    Permalink

    waa,,cikgu2,,
    ;D

    Reply
  • January 8, 2011 at 9:46 am
    Permalink

    sidebar or post border request..thanks

    Reply
  • January 8, 2011 at 9:58 am
    Permalink

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

    rajin lah cik tom ni buat tutorial =)

    Reply
  • January 8, 2011 at 10:08 am
    Permalink

    tengs ciktom..suke bace tutorial cik tom.. 🙂 tp xsempat nk buat semua.. 🙁

    Reply
  • January 8, 2011 at 10:39 am
    Permalink

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

    Reply
  • January 8, 2011 at 10:39 am
    Permalink

    nnt nak try ar
    cik tom mekasihhhhh
    🙂
    kalau layout sy agak3 buley x ciktom?

    | Keyword: ROGOL|

    Reply
  • January 8, 2011 at 10:53 am
    Permalink

    tutorial yg bagus!

    Reply
  • January 8, 2011 at 10:54 am
    Permalink

    gud tutorial 😉
    thanks 4 sharing cik tom 😉

    Reply
  • January 8, 2011 at 12:12 pm
    Permalink

    @miza yusof: dapat..cik tom belajar dari maribinablog…tapi lupa urlnya lupa…nanti cik tom cari ye…

    Reply
  • January 8, 2011 at 12:26 pm
    Permalink

    @diana:cadangan yang bagus kak diana…insyaAllah cik tom akan cuba buat ye 🙂

    Reply
  • January 8, 2011 at 12:29 pm
    Permalink

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

    Reply
  • January 8, 2011 at 12:51 pm
    Permalink

    dni pon nak godek2 gak ni tutorial 🙂

    Reply
  • January 8, 2011 at 12:56 pm
    Permalink

    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.

    Reply
  • January 8, 2011 at 1:21 pm
    Permalink

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

    Reply
  • January 8, 2011 at 1:27 pm
    Permalink

    @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?

    Reply
  • January 8, 2011 at 1:29 pm
    Permalink

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

    Reply
  • January 8, 2011 at 1:38 pm
    Permalink

    simpan dulu tutorial nih..nanti dicuba lain masa.thanx utk tutor nih ciktom.

    Reply
  • January 8, 2011 at 2:43 pm
    Permalink

    bagus cik tom!

    Reply
  • January 8, 2011 at 2:52 pm
    Permalink

    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

    Reply
  • January 8, 2011 at 3:32 pm
    Permalink

    Bestnya..nak cuba ni…thanks Tom..

    Reply
  • January 8, 2011 at 3:35 pm
    Permalink

    thnxxx.. tutorial yg sy cari2 selama ini 😉

    Reply
  • January 8, 2011 at 3:45 pm
    Permalink

    yg ni pun dah buat..
    tQ 🙂

    Reply
  • January 13, 2011 at 4:08 am
    Permalink

    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.

    Reply
  • January 14, 2011 at 9:54 am
    Permalink

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

    Reply
  • January 15, 2011 at 4:18 am
    Permalink

    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…:(

    Reply
  • January 15, 2011 at 4:18 pm
    Permalink

    @pearl jade: tak jumpa code tue ye..sori ye…skang cik tom busy…nanti cik tom cuba tgk lg ye…

    Reply
  • January 15, 2011 at 4:20 pm
    Permalink

    @Embun pagi:maybe awak ada adjust pada coding warna…cuba tukar coding warna pada title entry..tgk macam mana..

    Reply
  • January 15, 2011 at 4:27 pm
    Permalink

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

    Reply
  • January 16, 2011 at 11:13 am
    Permalink

    sedh…sbb code 2 x der…btw, tenkiu yer, haida folow sini

    Reply
  • January 22, 2011 at 2:35 am
    Permalink

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

    Reply
  • January 29, 2011 at 6:49 pm
    Permalink

    @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;

    Reply
  • February 7, 2011 at 10:09 am
    Permalink

    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?

    Reply
  • February 20, 2011 at 9:36 am
    Permalink

    @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 ^_^

    Reply
  • February 24, 2011 at 10:04 pm
    Permalink

    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

    Reply
  • March 10, 2011 at 10:13 am
    Permalink

    macam mane nak tukar line border mcm cik tom?

    Reply
  • March 17, 2011 at 2:00 pm
    Permalink

    lagi satu mcm mane nak jarak kan border ngan tajuk sidebar?

    Reply
  • March 22, 2011 at 4:04 am
    Permalink

    cik tom, tuto nie utk template jenis ape yea? huuu

    Reply
  • March 29, 2011 at 9:27 am
    Permalink

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

    Reply
  • March 31, 2011 at 4:38 am
    Permalink

    cik tom. jaja tak jumpa code 🙁

    Reply
  • March 31, 2011 at 7:27 am
    Permalink

    ciktom…nape saya punye..takde .sidebar.widget?

    Reply
  • March 31, 2011 at 6:33 pm
    Permalink

    Saya dah cuba. terima kasih ye.

    Reply
  • April 4, 2011 at 8:21 pm
    Permalink

    @nadiah izahar: dah buat tutor tue cuba lihat dlm list tutorial..

    Reply
  • April 4, 2011 at 8:28 pm
    Permalink

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

    Reply
  • April 4, 2011 at 8:30 pm
    Permalink

    @Anonymous: erm yg pasti code blog ni bukan utk classic template…

    Reply
  • April 4, 2011 at 8:32 pm
    Permalink

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

    Reply
  • April 4, 2011 at 8:34 pm
    Permalink

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

    Reply
  • April 4, 2011 at 8:34 pm
    Permalink

    @Miss Sunshine; sama2..

    Reply
  • April 6, 2011 at 3:08 pm
    Permalink

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

    Reply
    • April 6, 2011 at 7:31 pm
      Permalink

      tahniah berjaya buat…cntk blog nurul 😉

      Reply
  • April 6, 2011 at 7:01 pm
    Permalink

    jadi la..
    seronok..
    thankk..
    cik tom..
    🙂

    Reply
  • April 18, 2011 at 11:19 am
    Permalink

    lahai cik tom…sy nye sebelah je jadi…yg utk sidebar x jadi pun…huhuhu….

    Reply
    • April 23, 2011 at 12:14 am
      Permalink

      cuba akak copy code dalam step 3 tue ke selepas code (untuk sidebar);
      .tabs-inner .widget ul {

      menjadi x?

      Reply
    • April 23, 2011 at 9:51 am
      Permalink

      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

      Reply
  • June 18, 2011 at 1:18 pm
    Permalink

    akak knpa sya buat tak dpt pun cot yg sidebar tu . knapa ehh ?

    Reply
  • July 4, 2011 at 5:34 pm
    Permalink

    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…
    Jom baca entri terkini gary …day eight : 10 of my favourite song…My Profile

    Reply
    • August 15, 2011 at 8:38 pm
      Permalink

      kod yang mana tak jumpa?sidebar.widget ker?kalau tak jumpa means jenis code blog haris lain dan tak sesuai untuk apply tutorial ni..

      Reply
  • August 6, 2011 at 6:53 pm
    Permalink

    tak jumpe pun .sidebar .widget{ tu? dah carik dah! -,-‘

    Reply
    • August 15, 2011 at 6:13 pm
      Permalink

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

      Reply
  • August 13, 2011 at 10:30 pm
    Permalink

    Takde pon code .sidebar.widget tu 🙁

    Reply
    • August 15, 2011 at 5:56 pm
      Permalink

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

      Reply
  • August 26, 2011 at 8:45 am
    Permalink

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

    Reply
    • September 17, 2011 at 2:18 pm
      Permalink

      sori ye miss…cik tom baru berkesempatan nak reply..cik tom jenguk blog tadi dah menjadi border sidebar melengkung..tahniah ye!

      Reply
    • October 21, 2011 at 8:56 pm
      Permalink

      sori fasha…code ni xsesuai dengan template yang fasha guna..

      Reply
  • October 27, 2011 at 1:42 am
    Permalink

    hai kak..sy nk tye knp sy punye post title tak kua dkt blog?

    Reply
    • October 27, 2011 at 12:58 pm
      Permalink

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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE