Tutorial 134 : Background pada body post/entry.

Assalamualaikum.

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/AVvXsEhN1wSeGAeUoalCdkSvq4cBnXGPSMwspqQTIkAznl7UjMVRbbcaSo6J4j-lfvO6YV9TqEw8yIRdf_4bIzwyS1zJfmP3ILsLndKuvWUvJUaMRZtDW0wY0M0Rk9ztwIhr4Tz7MhG8fD2gbWuo/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/AVvXsEhN1wSeGAeUoalCdkSvq4cBnXGPSMwspqQTIkAznl7UjMVRbbcaSo6J4j-lfvO6YV9TqEw8yIRdf_4bIzwyS1zJfmP3ILsLndKuvWUvJUaMRZtDW0wY0M0Rk9ztwIhr4Tz7MhG8fD2gbWuo/s1600/cutedottedciknurfarah1.gif

biru adalah warna background.

purple adalah warna border.

CLICK HERE for more colour.

Nak pilihan lain? boleh cilok mana yang anda suka. Lepas tu click iklan aku berjuta kali.

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN1wSeGAeUoalCdkSvq4cBnXGPSMwspqQTIkAznl7UjMVRbbcaSo6J4j-lfvO6YV9TqEw8yIRdf_4bIzwyS1zJfmP3ILsLndKuvWUvJUaMRZtDW0wY0M0Rk9ztwIhr4Tz7MhG8fD2gbWuo/s1600/cutedottedciknurfarah1.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfurtmu2nQcgZ1QaE1zpVfwpQG_27hYHpu7O4xkxLBgA9OonutbAdnv2SsFGyWzC5ES4iTxmIJNEWDdotG3y27gaV0TXRQPgzU_sIVpBCYU8jHeUYiD2jp9hiAoQQiWDJLKQkgwX_u6LpN/s1600/cutedottedciknurfarah2.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6XRLXIWemPYg7xQpFjhts7W5wFwoJEZ9AOQ0d5oLb-ANedIFY9d7ermTBMZd8Cxna_m8nD3gxy14bfGIbKWeZ2I_9DRkY43Ko1o_A7vJ_AB-gwuLV2MYCHlgrdVafz0Q-TPF3MNERO9qb/s1600/cutedottedciknurfarah3.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPtvjc0TB80x6ad3t-tlQjT2xVQRABQHJZsEITzbYM-N408g4P-wA9FjV5B18NxixZe6n3SMJsj_86CR8pIBG74tRKZ6TXee2fmBOzWZ42foXoVu4ETikIGanbtw-njWqd5f0Rrh46LRZV/s1600/cutedottedciknurfarah4.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXifMn6uj9FpmTTAH4nSRj8FfIYzt6XUYr_9yz4XIcekd8keNm3QNXeEDpv-INHYLbwMcsA59mmRz0_SHXsC4gSBPDp6gjxa1JC3HdxE-Y_c-_5hPcRxm7yoD5u2uhLkukN3ib7KIaMYb/s1600/cutedottedciknurfarah5.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFK3QLligcxI5pONkUJKmQdB2793J4US2JFIzdWe5pV8-hEbJ78TCAwoV-oGHsAJWEkzosCp7wfkk4jSMQ4bqMoynolfT6WrJzZ9vewiXLQA96uQTnQzMEHMV7RFdMI0-TwoIzwG-v5ru1/s1600/cutedottedciknurfarah6.gif

#saiz gambar tu sama besar dengan background entry aku #yang love kecik-kecik tu, aku besarkan supaya korang senang lihat design dia. faham?

Setakat itu je free gift, nak lain design sila cari sendirian berhad yer. 

6. Dah puas membelik dan try PREVIEW, kalau menjadi dan puas hati, sila SAVE.

bye!

SHARE:

blog tutorial