Friday, August 26, 2011

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!






13 comments:

  1. wahhh rajin farah buat tuto :)

    ReplyDelete
  2. salam.kak farah.nak tanya.mcm mana nak lebarkan border tu? border tu kecik la.ada tulisan terkeluar2 kat border.hope kakfarah tolong.thanks :)

    ReplyDelete
  3. Assalammualaikum akak boleh tak ajar lin macam mane nak buat border penuh macam akak ? border ni kecik lah nak buat macam akak boleh ajar ?

    ReplyDelete
  4. @Fadhlin Sakinaaskum farah..ira dh buat tp border tajuk n cerita x sama..pastu tarikh xdew bowder..mcm mna yew

    ReplyDelete
  5. jadi macam berlapis lak dik..cam ne ea??

    ReplyDelete
  6. Cik Farah yang comel...hehe,mcm mana nk jadikan border keluruhan blog kita petak? Selain dari ubah template? cuba tgk header blog Lezza? Mcm cacat skit sebab headernya terangkat...

    ReplyDelete
  7. tolong template saye xde border sebab ikut tutor nie!!!!!! please bantu saya baiki template blog

    ReplyDelete
  8. wahhh,,,what a beautiful background !! :)

    ReplyDelete
  9. farah... saya nak cuba some tutorials kat blog farah tau.. tq, for the tuto farah.

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.