Tutorial kali ini request dari nadiah izhar, macam mana cara nak tukar line border macam yang cik tom? Yang cik tom faham maksudnya jenis line border yang cik tom gunakan pada sidebar dan post entry. Cik tom gunakan border jenis double border atau garisan berganda (ada 2 lapisan garisan). Setahu cik tom terdapat sembilan jenis border yang boleh kita ubah pada kod di dalam edit html blog.
9 jenis code border yang boleh digunakan;
- solid
- double
- groove
- dotted
- dashed
- inset
- outset
- ridge
- hidden
Contoh hasil jenis border;
INI JENIS BORDER SOLID
INI JENIS BORDER DOUBLE
INI JENIS BORDER GROOVE
INI JENIS BORDER DOTTED
INI JENIS BORDER DASHED
INI JENIS BORDER INSET
INI JENIS BORDER OUTSET
INI JENIS BORDER RIDGE
INI JENIS BORDER HIDDEN
STEP 1
First step ialah backup dahulu template korang sebagai langkah berjaga-jaga;
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{
**setiap blog maybe berlainan coding. Bagi yang berlainan code, cuba cari perkataan sidebar. Try and error.
STEP 3
Sila copy dan paste code di bawah ke dalam code step 2:
border:4px double #D41A1F;
Contoh code blog cik tom:
.sidebar .widget{
background:#fff;
border:4px double #D41A1F;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px
}
**bagi border pada post entry sila copy code selepas .post{
**jenis border ni juga boleh dimasukkan bagi tarikh post/post comment/blockquote. Ikut kreativiti korang. Tapi jangan melampau sampai nampak serabut pula ye.
Penerangan code border:
border: 4px solid #893BFF;
Hasil code:
INI JENIS BORDER SOLID +WARNA UNGU
1) code nombor 4px tue korang boleh ubah kepada sebarang nombor bagi ketebalan border.
2) code solid mewakili jenis border. Korang boleh ubah kepada jenis border lain seperti dashed, dotted, double, groove, ridge, outset, inset dan hidden.
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.
Sumber rujukan: Border Style Types
Sharing is caring
blog akak tak sesuai letak border kat post tu..
jadi tak cantik..
akak nak buat macam cik tom ni
tajuk dia kat tengah dan dalam line border..
tapi tak jadi.dia duduk kat luar line jugak..
terima kasih sudi share
tapi blog momoy x sesuai buat
jadi lagi semak blog yg dah sedia semak tu.
huhu
nanti cik tom buat tutorial macam mana nak buat macam page turorial cik tom tu yer
Dia kata saya cantik TAPI saya…"
Pembunuh anak kucing wanita mohon maaf kepada rakyat Malaysia"
ORI-KESHI | Kawaii Eraser Maker"
tq cik tom..sy berjaya tukar dr solid ke dotted ! hee 🙂
eh nak tanya lagi..kalau kita nak tukar bentuk atau design kotak tu pulak mcm mana eh..he he
hai cik tom..
salam kenal..
lwt2 la blog sy yea..
blog cik tom ni byk betul tips,
side list yang boleh scroll kat blog kami tu idea dari cik tom le,,thanks yer..:)
tak leh masuk la ciktom..nak ngis je rsa .ermmmm
hye. folo kamu. btw, suke tutorial tuh,
suka guna ridge.. 🙂
terima kaseh dengan information..hehe
thankz cik tom.
finally dapat jugak buat hee 🙂
thank you so much sbb sudi kongsi 🙂
nanti miss yaty nak cuba jugak lah 😉
@Princess MOMOY: erm yang mana satu tue??kalau yang jenis scroll untuk list entry, cik tom dah pernah buat tutor tue..boleh refer kat sini;
Tutorial Buat DropDown Menu Untuk Listkan Entry
@zuhanismohamed: nak design kotak yang macam mana?melengkung ker?kalau melengkung cik tom dah pernah buat tutor tue jgk…refer kat entry tutor;
Tutorial Border Melengkung Pada Sidebar | Moz Border
@diana: ada caranya akak..kalau berkesempatan boleh cik tom ajarkan…
@Woofer Storm: sabar ye…maybe kena cari tutorial lain yang bersesuaian dgn coding blog achie..
cik tom cam mana nak bagi saiz post tu besar sikit. sblm ni saya dah ada minta izin nak cedok cik tom punya kod. saya suka ngan kaler & border yg cik tom buat tu. jenguk sat my blog, antara post ngan sidebar tu jarak jauh sangat la…
@syakira: yup syakira dah minta di komen entry tue…pasal post dan sidebar tue pun ciktom dah reply di n3 yg sama…
hurm ini utk wordpress ker blogspot??
ini tutorial untuk blogsport suri…untuk wordpress memang diakui cik tom tak reti..kena belajar…
salam..akk kalau takde kod .post{ ni mcm mane??
saya da cari tak jumpa la..
erm xde??pe url blog??
cik tom…:(
npe sye x jumpe pon “.sidebar .widget{” di template sye.
sedih la.
kalau xjumpa code tue..cik ai boleh cari code seakan2 code tue.. iaiatu keywordnya cari code sidebar n then ada tak code widget dekat mana2 code sidebar tue..cik tom nak tgk code blog cik ai tp xdpt sbb cik ai dah disable right click..tp cik tom tgk sidebar cik ai mmg dah ada border…
kak,,nk tnye,,
line border mcm akak citer kt atas ni akan muncul time kte lalukan kursor je ke@mmg akan muncul stay mcm gitu je time mse kte bkak blog kte?saya budak baru lg dlm blog ni..
memang akak stay terus..xperlu lalukan kursor..