Tutorial 134 : Background pada body post/entry.

Tutorial laju-laju. Cuma ubahsuai daripada tutorial ini. Kalau nak border yang sweet boleh belek SINI.

Sebab utama buat tutorial ni sebab banyak sangat permintaan, kalau korang pandai main coding just ubah-ubah je coding tutorial di atas.

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
----------------------------------------------- */

*/
h2.date-header {
color:#ffffff;
border:none;
background:#EF1A7F;
font-weight:bold;
font:Times New Roman;
padding:5px;
margin-bottom:-30px;
line-height:10px;
text-transform:uppercase;
text-align:center;
font-size:12px;
}
.post {
margin-top:30px;
border-bottom:0px dotted #000000;
padding-bottom:0px;
padding-top:0px;
}
.post h3 {
background:#F6A0BD url();
background-repeat:repeat;
background-position:bottom left;
padding:5px;
font-size:15px;
color:#000000;
text-transform:none;
text-align:center;
font-family:Arial;
font-weight:none;
line-height:25px;
font-size:20px;
letter-spacing:1px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#000000;
}
.post h3 strong, .post h3 a:hover {
color:#000000;
}
.post-body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsSg0f_v5Sid5zQzMwv9nM_Mr4-oJN0gZXKjmkyMmlLF1Xmdo5hpM__tBHDejN-S69cIhfWJVV_lPjFxfdbXJ6z7EyujICq14pgn5TflQJpu-BSv7Fb6uVYIfvcfGHNxDf9MgmCtewoo0/s1600/cutedottedciknurfarah1.gif);
background-repeat:repeat;
background-position:bottom left;
padding:20px;
line-height:20px;
text-align:justify;
margin-top:-15px;
border:2px solid #EF1A7F ;
}
.post-footer {
margin: -.25em 0 0;
color: #333333;
border: solid #F6A0BD 2px;
font-size: 100%;
background:#F6A0BD;
padding-left: 6px;
padding-right: 4px;
padding-top: 5px;
padding-bottom: 4px;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:0px;
border:0px solid #ffffff;
}

5. Sekarang korang kena tukar :

Tulisan merah dengan background url kegemaran korang.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsSg0f_v5Sid5zQzMwv9nM_Mr4-oJN0gZXKjmkyMmlLF1Xmdo5hpM__tBHDejN-S69cIhfWJVV_lPjFxfdbXJ6z7EyujICq14pgn5TflQJpu-BSv7Fb6uVYIfvcfGHNxDf9MgmCtewoo0/s1600/cutedottedciknurfarah1.gif

biru adalah warna background.

purple adalah warna border.

CLICK HERE for more colour.