Tutorial 109 : Border di Post Body.

Assalamualaikum..

This is hot tutorial entry!
Permintaan ramai ni..
Baru sekarang aku gagahi untuk buatkan.
Sebenarnya malas nak buat nih hehehe. Korang pun tak kisahkan?

Terlebih dahulu korang download full template ye. Nanti rosak binasa pula kalau tak jadi.

#untuk makluman tutorial ini sesuai untuk classic template dan hanya sesetengah template designer je yang boleh guna. Kalau tak jadi jangan garu kepala ye. hehehe.
Ikuti step by step untuk berjaya membuat tutorial ini.

1. Sign in Blogspot > Design > Edit Html

2. Cari code di bawah, Ctrl F dan paste dalam kotak find..enter!

/* Posts

korang akan jumpa code macam ni selepas cari:

3. Di bawah code tadi, korang akan jumpa code seperti ini ( lain template, lain code ) korang padam code je yang aku merahkan.. Padam sampai had .post blockquote {
.post blockquote { tu jangan gatal tangan usik apa-apa ye *amaran ni!
kalau coding korang tak sama macam code .post blockquote { ni, korang padamkan sebelum sampai perkataan blockquote sahaja. *asalkan ada perkataan blockquote pun tak apa

/* Posts
----------------------------------------------- */
.date-header {
  margin: 1.5em 0 0;
  font-weight: normal;
  color: $dateHeaderColor;
  font-size: 100%;
}
.post {
  margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}
.post-title {
  margin: 0;
  padding: 0;
  font-size: 125%;
  font-weight: bold;
  line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
  text-decoration: none;
  color: $textColor;
  font-weight: bold;
}
.post div {
  margin: 0 0 .75em;
  line-height: 1.3em;
}

.post-footer {
  margin: -.25em 0 0;
  color: $textColor;
  font-size: 87%;
}

.post-footer .span {
  margin-$endSide: .3em;
}
.post img, table.tr-caption-container {
  padding: 4px;
  border: 1px solid $borderColor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin: 1em 20px;
}
.post blockquote p {
  margin: .75em 0;
}

4. Gantikan tulisan yang merah tu dengan code ini, bawah code

/* Posts
----------------------------------------------- */

.date-header {
margin: 1.5em 0 .5em;
text-align: right;
background: white;
color: #000000;
line-height: 1.0em;
font-size: 16px;
font-family: verdana;
}
.post {
margin: .4em 0 2.5em;
padding-bottom: 1.5em;
border: solid #000000 3px;
background: #ffffff;
}
.post-title {
margin-bottom: 1px;
margin-top: 4px;
font-size: 18px;
font-weight: 500;
font-family: times new roman;
line-height: 1.3em;
text-align: left;
color: #000000;
background :#FC5DB4;
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: #000000;
background :#FC5DB4;
font-size: 100%;
}

5. Sekarang korang kena tukar :



kedudukan tulisan - right, left, center
jenis font - ikut suka koranglah.
font-size - saiz font
#FC5DB4 - warna background post title dan footer, cari SINI
#000000 - warna tulisan  SINI
#ffffff - warna body entry background. SINI
border: solid #000000 3px; - solid boleh tukar kepada dotted, dashed, double. 3px - lebar, #000000 warna border.




6. Kalau korang bosan dengan bentuk petak, nak betuk lain-lain? sila letak code ini di bawah code

border: solid #000000 3px;

7. Preview, kalau menjadi sila SAVE je.


P/s : Apa lagi? tekan lah nuffnang aku beramai-ramai..! LIKE sekali!

SHARE:

blog tutorial