Sunday, March 25, 2012

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:

24 comments

  1. thanks bnyak2 kak farah ! :D bgi freebies

    ReplyDelete
  2. kak farah, saya ambil yer

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

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

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

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

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

    (^_^)

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

    ReplyDelete
  9. 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..

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

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

    ReplyDelete
  12. saya nak tahu nak tukar saiz nyer cam mana???

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

    ReplyDelete

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

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH