Tutorial: Border di kotak entri

Salam jumaat semua!

Fuhh! Nak terkeluar dah biji mata aku duk mengadap benda neh. Tadi baru je aku selesai edit blog untuk asaimen aku. Waaa, asaimen pun ada kene buat blog jugak ke. Ye, salah satu subjek yang aku amik sem ni kene buat blog. So, sambil-sambil aku edit blog tu, sempat lagi aku nak buat tutorial. Menyelam sambil minum air katakan. heee. Tutorial ni aku nak tunjuk cara nak buat border di post entri, macam blog aku. Jom!

*sebelum tu sila download full template dulu ye. Kalo tak nanti takut jahanam pulak koding korang. Kang tak pasal-pasal aku pulak yang kene saman. wuwuuu

1) Dashboard > design > edit HTML > tick widget templates

2) Pastu cari kod neh nak senang guna ctrl-F

/* Posts

3) Kat bawah kod yang korang cari tu korang akan nampak kod yang neh pulak

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
#blog-pager {
font-size: 140%
}

4) Then delete kod yang kaler merah tu atau delete sebelum kod  #blog-pager {

dan gantikan dengan kod kat bawah neh. Kalo tak jumpa kod #blog-pager { , delete je sebelum kod yang ada perkataan blog. Lain template lain kodnya tau. Tapi jangan nak gedik delete bahagian blog tu. Jahanam nanti, aku tak tau.... 

.date-header {
margin: 1.5em 0 .5em;
text-align: center;
color: #000000;
line-height: 1.0em;
font-size: 11px;
font-family: verdana;
}
.post {
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
border: solid  #000000 3px;-moz-border-radius: 35px;border-radius: 35px;
background: #ffffff;
}
.post-title {
text-shadow: 2px 2px 3px #FFFFFF;
margin-bottom: 1px;
margin-top: 4px;
font-size: 24px;
font-weight: 500;
font-family: verdana;
line-height: 1.3em;
text-align: center;
color: #000000;
background :#ffffff;
padding: 0 3px 3px;
}
.post-body {
margin: 0 0 .75em;
line-height: 1.6em;
padding-left: 5px;
padding-right: 4px;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: #000000;
font-weight: bold;
}
.post-footer {
margin: -.25em 0 0;
color: #aaaaaa;
background :#ffffff;
font-size: 100%;
}

5) Sekarang korang perlu tukar,

kedudukan tulisan - center, right, left

border -solid, dashed, double, dotted. #000000 warna. 5px saiz border.
-moz-border-radius: 35px;border-radius: 35px; - boleh tukar border lain, tengok SINI
tulisan - tulisan ni korang boleh check tulisan kat template designer korang.
#000000 - warna, boleh cari kod kat SINI.

6) Dah siap tu, PREVIEW dulu ok. Wajib! Kalo dah puas hati dan takde error, boleh la SAVE.

*tutorial ni hanya sesuai untuk classic/simple template sahaja. Yang guna template lain, angkat tangan dan garu kepala ye..heee

Nanti aku tunjuk cara nak buat border kat sidebar pulak. Sebelum tu, mau tido dulu.

k bai!

---

Thanks for your reading love! =D

---