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(http://3.bp.blogspot.com/-RoPzj9clFuw/T26I_BbX8rI/AAAAAAAAC7Y/izAW-L5J2F8/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.


http://3.bp.blogspot.com/-RoPzj9clFuw/T26I_BbX8rI/AAAAAAAAC7Y/izAW-L5J2F8/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.


 http://3.bp.blogspot.com/-RoPzj9clFuw/T26I_BbX8rI/AAAAAAAAC7Y/izAW-L5J2F8/s1600/cutedottedciknurfarah1.gif


 http://3.bp.blogspot.com/-pYqXzKldqtU/T26I_SiX-HI/AAAAAAAAC7g/OOfMZOzTd9o/s1600/cutedottedciknurfarah2.gif


 http://4.bp.blogspot.com/-8i_MMMw1huQ/T26JAGANlaI/AAAAAAAAC7o/0JrgS2krHP0/s1600/cutedottedciknurfarah3.png



 http://1.bp.blogspot.com/-TDessFEWK2U/T26JAod9EsI/AAAAAAAAC7w/-T4lXd_iKUA/s1600/cutedottedciknurfarah4.png


 http://4.bp.blogspot.com/-SH76Z0lLFRI/T26JA3_DFGI/AAAAAAAAC74/Zo18Ewcaf6Q/s1600/cutedottedciknurfarah5.png


 http://4.bp.blogspot.com/-5oOfwkV3hBc/T26JBbRW-rI/AAAAAAAAC8A/Ke32aTqwviA/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 this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
24 Comments for "Tutorial 134 : Background pada body post/entry."

thanks bnyak2 kak farah ! :D bgi freebies

huhuhu..sy xleh wat laa.....:(

tengz tutorial nie . nice ^__^

@firna (:dh jd...tq darling...rajin2 view my blog

xblh wt sbb bwh post 2 xsma dgn d ats.xda cara lain agy ke tuk tutorial kt ats 2???

thanx sis...dh try dh....byk tutorial sis jadi sy buat..thanx sgt2 taw..sy dh follow blog sis..follow la sy lak ea... :-)

xleh pun. xjumpa pkataan blackquote pun. dah search by ctrl+F da..huhu.. cmne?

Thnks sis farah...tuto ni sgt helpful...

(^_^)

kakak x dpt la? boleh x akk buat vid cara akak buta. hehe

assalammualaikum..farah blh x tlng buat kn blog kta bg cntik cm farah pnye,kta dh try buat tp still gak xlh nk cntik kn..agy pwn kta bwu jw buat blog ni..hrap farah sdi bntu..

Wah kak..bagusnnya..akak pandai!! Time kasih ye kak..Best

akhirnya... baru jumpa totorial nie.. tq farah...

saya nak tahu nak tukar saiz nyer cam mana???

suke sgt dgn tutorial kt blog ni, thanks sgt2,, love ~

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

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts Plugin for WordPress, Blogger...
Back To Top