Tuesday, 31 January 2012

Tutorial Post Title Background

بسم الله الرحمن الرحيم
 السلام عليكم


Hello fellas :)
Harini KayFiirusaa nak ajar satu tuto yang senang untuk korang semua ikut, sangat simple dan awesome :)
Btw, tuto ini hanya untuk pengguna template ya? Pengguna blogskin sila bersabar sebentar , peace :D

Lets begin.

1. Korang tekan Dashboard > Design > Edit HTML > Click Expand Widget

2. Ctrl + F , then korang cari code ni :

h3.post-title, .comments h4 {

Full code dia macamni, tapi setiap template akan ada kelainan sikit codingnya, jadi korang delete satu paragraph je *
  dari h3.post-title, .comments h4 { sampai  simbol macamni --> }


h3.post-title, .comments h4 {
font:normal normal 22px Arial,Tahoma,Helvetica,FreeSans, sans-Serif;
margin: .75em 0 0;
}

3.  Then , paste code yang kat bawah ni, menggantikan code yang telah korang delete sebelum ni,

Code untuk post title bercorak ( ada background cute cute, hehe ) :


h3.post-title {
background-image:url("URL BACKGROUND");
background-repeat:repeat;
background-position:center center;
text-align:center;
  margin: 0;
  font: $(post.title.font);
border:2px solid #33CCDD;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

.comments h4 {
  margin: 1em 0 0;
  font: $(post.title.font);
}


  • Merah : Cari kat sini dan sini
  • Kuning : Untuk ketebalan border korang. 
  • Biru : Jenis line border korang. boleh pilih dashed or solid or dotted
  • Hijau : Warna border korang. Boleh search kat sini
  • Purple : Jenis border yang korang suka. Choose here :D


Code untuk post title berwarna :


h3.post-title {
background:#FFFFFF;
text-align:center;
  margin: 0;
  font: $(post.title.font);
border:2px solid #33CCDD;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
.comments h4 {
  margin: 1em 0 0;
  font: $(post.title.font);
}


  • Hijau : Warna background korang, pilih kat sini
  • Biru : Ketebalan border korang
  • Pink : Jenis line border korang, pilih dashed or dotted or solid
  • Purple : Warna border korang , pilih kat sini
  • Merah : Jenis border, korang pilih kat  sini :D

Selamat mencuba. Sorry kalau tuto ini agak serabut dan banyak perkataan 'SINI' =.=

No comments:

Post a Comment