Cara buat background pada post title

ASSALAMUALAIKUM 

Hari ni Nas nak share kat korang cara macam mana nak buat background pada post title, macam yang dekat post title Nas tu. Tujuannya supaya nampak lebih cantik, *of courselah*, lebih nampak professional *yelah tu! it just nampak macam dah legend lah..* and sedap mata memandang.. yeahh... So, Nas tak nak cakap panjang, jom ikut cara-cara kat bawah ni!

  • Dashboard > template > edit html
  • Then, korang tekan dekat kotak html tu. pastu tekan ctrl+a 
  • lepas dia dah copy semua html tu, tekan pulak ctrl+f nanti dia akan keluar kotak search kat tepi kotak tu.
  • Cari kod ni (gunakan kotak search tadi)
DENIM TEMPLATE

.post-title {

MINIMA TEMPLATE

.post h3 {

DESIGN TEMPLATE/SIMPLE TEMPLATE

h3.post-title, .comments h4 {
 ATAU
h3.post-title {
 ATAU
h3.post-title, h4 {

  • dah jumpa?? kalau dah, dekat bawah kod yang korang cari tadi ada kod asalkan??. Korang DELETE semua kod tu sampai kod   }    ok?? 
  • then, korang gantikan kod yang korang DELETE tadi dengan kod kat bawah ni
padding: 0 3px 3px;
margin:1.5em 0 .75em;
border: 2px dashed #000000;
text-align:center;
background-image:url(URL Background);

Kod bentuk-bentuk border di sini

}

  • done. Sekarang korang just kena letak URL Background sahaja. Yang kod bentuk-bentuk border tu, kalau korang nak bentuk KOTAK sahaja macam Nas punya, korang tak payah letak kod bentuk-bentuk border. Tinggalkan kosong sahaja. ok? Yang warna pink, green and red tu, korang tukar ikut citarasa. 
  • Dah edit, korang PREVIEW dulu! Kalau tak, blog korang akan hancuuss kalau ada error kat coding tu. 
  • Bila tengok tu dah ok, puas hati.. korang bolehlah save.. 


*PINK: ketebalan border *selalunya Nas suka pakai 1 je*
*RED: korang boleh pilih antara dashed, solid atau dotted
*GREEN: warna border. klik SINI untuk dapatkan colour code yang korang nak *Nas selalu ambik hitam je (#000000)*
*ORANGE: korang boleh dapatkan dekat pakcik google or buat sendiri.. suka hatilah. kalau kat pakcik google, korang click left kat gambar tu, then pilih Copy image URL lepastu korang pastelah kat bahagian code warna orange tu
*BLUE: korang boleh ambik code border kat SINI

Alhamdulillah, dah habis tuto..do comment if you have any problem..

Share
Tweet
Pin
Share