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.
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.
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
terbaik tutorial ni.. utk yg tak tahu elok lah cuba… tp kena download dulu template asal, takot tak menjadi..huhu…
rajinnya awak.
thanks cik tom. thansk sudi berkongsi. tutorial yang baik. nanti miza cuba 🙂
*cik tom dapat tak komen miza pasal tab menu ?
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??
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
waa,,cikgu2,,
;D
sidebar or post border request..thanks
ala..sye nye sidebar plain,xde warne.=(…
rajin lah cik tom ni buat tutorial =)
tengs ciktom..suke bace tutorial cik tom.. 🙂 tp xsempat nk buat semua.. 🙁
thanx cik tom..
dah berjaya buat..
dulu pernah cari tutorial ni..
jumpa tp tak menjadi..
yg ni dah menjadi.. 😀
nnt nak try ar
cik tom mekasihhhhh
🙂
kalau layout sy agak3 buley x ciktom?
| Keyword: ROGOL|
tutorial yg bagus!
gud tutorial 😉
thanks 4 sharing cik tom 😉
@miza yusof: dapat..cik tom belajar dari maribinablog…tapi lupa urlnya lupa…nanti cik tom cari ye…
@diana:cadangan yang bagus kak diana…insyaAllah cik tom akan cuba buat ye 🙂
@pearl jade: ur welcome dear…yupp kena masukkan coding border…sori lupa…cik tom dah update coding border…cuba tengok ye..
dni pon nak godek2 gak ni tutorial 🙂
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.
@pinqib: cik tom xpasti la yunk sbb xnmpk ur code…cuba try buat dulu ye..kalau xjadi bgth ek…
@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?
kepada semua yg komen thanks ye…selamat mencuba tutorial ni..ada masalah boleh tanya..insyaAllah akan bantu selagi termampu 🙂
simpan dulu tutorial nih..nanti dicuba lain masa.thanx utk tutor nih ciktom.
bagus cik tom!
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
Bestnya..nak cuba ni…thanks Tom..
thnxxx.. tutorial yg sy cari2 selama ini 😉
yg ni pun dah buat..
tQ 🙂
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.
cik tom..saya poning laa…jadik tu mmg jadi melengkung tu tp…title entry saya lak ilang..dia jd same col0r ngn bground,itam.
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…:(
@pearl jade: tak jumpa code tue ye..sori ye…skang cik tom busy…nanti cik tom cuba tgk lg ye…
@Embun pagi:maybe awak ada adjust pada coding warna…cuba tukar coding warna pada title entry..tgk macam mana..
@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..
sedh…sbb code 2 x der…btw, tenkiu yer, haida folow sini
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..
@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;
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?
@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 ^_^
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
macam mane nak tukar line border mcm cik tom?
lagi satu mcm mane nak jarak kan border ngan tajuk sidebar?
cik tom, tuto nie utk template jenis ape yea? huuu
cik tom…nape saya tak ley wat border ni ye…tak jumpe pun code .sidebar .widget{
cik tom. jaja tak jumpa code 🙁
ciktom…nape saya punye..takde .sidebar.widget?
Saya dah cuba. terima kasih ye.
@nadiah izahar: dah buat tutor tue cuba lihat dlm list tutorial..
@nadiah izahar;adjust pada code padding…kalau nak jarakkan tambah nilai pada nombor code padding…
@Anonymous: erm yg pasti code blog ni bukan utk classic template…
@ciknana: sori template awk xsesuai dgn code ni kot sbb cik tom cari code ni mmg xjumpa…sori ye..
@razzmatazz; sori template awk xsesuai dgn code ni kot sbb cik tom cari code ni mmg xjumpa…sori ye..
@Miss Sunshine; sama2..
done! i did it! thanks. baru je lepas buat entry nk cari tutorial buat nih. skli dah jupa! thankssss 😀
tahniah berjaya buat…cntk blog nurul 😉
jadi la..
seronok..
thankk..
cik tom..
🙂
sama2..baguslah..hepi 4 u…
lahai cik tom…sy nye sebelah je jadi…yg utk sidebar x jadi pun…huhuhu….
cuba akak copy code dalam step 3 tue ke selepas code (untuk sidebar);
.tabs-inner .widget ul {
menjadi x?
Salam. saya punya jadi,tapi bagaimana hendak tukar warna keliling boder yang melengkung? ni (Contoh)
Jom baca entri terkini FARISZ@AZ.Com …Cara Buka Banyak YM dan Banyak ID pada 1 Masa
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
sis, cne nak wt blog tittle tu ade background blog…
Jom baca entri terkini ana …– sabar itu separuh dari iman –
akak knpa sya buat tak dpt pun cot yg sidebar tu . knapa ehh ?
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…
da jdi! tq2…best2… and da followed u!!! 🙂
Jom baca entri terkini wanyazmy …Aku & Mamat Korea – Part 8
tahniah..thanks ye..slm kenal 😉
knp tak jumpa kod tu yer? 🙁
Jom baca entri terkini Haris Kaito …Haris Dah Pilih !
kod yang mana tak jumpa?sidebar.widget ker?kalau tak jumpa means jenis code blog haris lain dan tak sesuai untuk apply tutorial ni..
thenk u cik tom
Jom baca entri terkini Budak Unmatured …Kucing pun Gay?
tak jumpe pun .sidebar .widget{ tu? dah carik dah! -,-‘
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..
Takde pon code .sidebar.widget tu 🙁
sori..cik tom dah tgk coding blog awak..memang takde code tue..awak punya template tak sama dengan tutorial yang cik tom sediakan ni…
cik tom,,kad template kiter tak de 1 pon kod sidebar..bila search side ad..biler tambah bar tros 0..cam mana ek??
sori ye miss…cik tom baru berkesempatan nak reply..cik tom jenguk blog tadi dah menjadi border sidebar melengkung..tahniah ye!
sudah jadi….tq! :))
Jom baca entri terkini alia …Segmen : Pencarian Bloglist Blog Fahuna
alhamdulillah baguslah..tahniah!
saya tak jumpa pun code sidebar tuh 🙁
Jom baca entri terkini fasha …special post for jijie 😀
sori fasha…code ni xsesuai dengan template yang fasha guna..
hai kak..sy nk tye knp sy punye post title tak kua dkt blog?
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..
mantap banget lah ini gila. makin cantik lah ini tampilanya. codenya copas aja ya aku,, hehe
Jom baca entri terkini restu …Cara Cepat Menghilangkan Jerawat Dengan Tomat Dan Jeruk Nipis