Center-kan Post Tittle


Assalamualaikum..

tutor kali ini HH nak tunjuk dekat korang macam mana nak center-kan tajuk post korang macam HH punye tu. Tutor alal adalah dalam bahasa inggeris dan HH akan tukar menjadi bahasa ibunda kita iaitu bahasa melayu. tanpa membuang masa HH akan tunjukkan macam mana caranya. Tutor ini adalah untuk template designer yang baru.


1. Simple template


Kalau korang pengguna simple template (macam HH). Mula-mula korang kena pergi DESIGN-> Edit Html.
Lepas tu cari (ctrl+F) kod yang berikut


h3.post-title, .comments h4 {
font: $(post.title.font); 
margin: .75em 0 0;
}

 Kalau dah jumpa tambahkan text-align:center; untuk centerkan tajuk atau text-align:right; kalau nak taju header tu ke kiri dekat bawah margin.Lepas tu save la templatenya. Dan hasilnya akan jadi macam ni:




h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
text-align:center;
}




2. Picture Window 


Kalau korang guna template Picture Window pulak. Mula-mula pergi DESIGN > Edit Html.
Lepas tu (ctrl+F) cari kod yang berikut:   




h3.post-title { 
margin: 0;
font: $(post.title.font);
}


Kalau dah jumpa tambahkan text-align:center; untuk centerkan tajuk atau text-align:right; kalau nak taju header tu ke kiri dekat bawah margin.Lepas tu save la templatenya. Dan hasilnya akan jadi macam ni:


h3.post-title {
margin: 0;
font: $(post.title.font);
text-align:center;
}





3. Awesome Inc


Ni kalau korang guna template Awesome Inc. Mula-mula pergi DESIGN > Edit Html
Lepas tu (ctrl+F) cari kod yang berikut : 




h3.post-title, h4 {
 font: $(post.title.font);
 color: $(post.title.text.color);
}






Kalau dah jumpa tambahkan text-align:center; untuk centerkan tajuk atau text-align:right; kalau nak taju header tu ke kiri dekat bawah margin.Lepas tu save la templatenya. Dan hasilnya akan jadi macam ni:







h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-align:center;
}







4. Watermark


Untuk pengguna template waremark pula korang kena pergi DESIGN > Edit Html
Lepas tu (ctrl+F) cari kod yang berikut: 




h3.post-title {
font: $(post.title.font);
margin: 0;
}






Kalau dah jumpa tambahkan text-align:center; untuk centerkan tajuk atau text-align:right; kalau nak taju header tu ke kiri dekat bawah margin.Lepas tu save la templatenya. Dan hasilnya akan jadi macam ni:


h3.post-title { 
font: $(post.title.font);
margin: 0;
text-align:center;
}






5. Etheral


kalau korang guna template etheral korang boleh terus ke DESIGN > Edit Html
Lepas tu (ctrl+F) cari kod yang berikut :





h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}



Kalau dah jumpa tambahkan text-align:center; untuk centerkan tajuk atau text-align:right; kalau nak taju header tu ke kiri dekat bawah margin.Lepas tu save la templatenya. Dan hasilnya akan jadi macam ni:



h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-align:center;
}


6. Travel

Dan kepada pengguna template travel. Pergi ke Design > Edit html
Lepas tu (ctrl+F) kod yang berikut: 

h3.post-title {
  margin-top: 20px;
}

Kalau dah jumpa tambahkan text-align:center; untuk centerkan tajuk atau text-align:right; kalau nak taju header tu ke kiri dekat bawah margin.Lepas tu save la templatenya. Dan hasilnya akan jadi macam ni:


h3.post-title {
  margin-top: 20px;
  text-align:center;
}




Semoga berjaya. kalau tak boleh buat tolong beritahu HH okay ^_^


7 comments:

Cik Bahgia a.k.a Zet said...

thanks... dah buat... =)

Cik Bahgia a.k.a Zet said...

nak tanye boleh?? kalau nak center kan dekat header dgn title tepi2 tu macam mne eh?? hehe..

hafrizzul hafiz said...

erm.. mcm mane tu ea... soalannya tak berapa paham lah ><!

AnakPakZohar said...

nice tutor... simple n easy.. =)

hafrizzul hafiz said...

terima ksih

Cik Bahgia a.k.a Zet said...

kalu tajuk2 yang lain la.. title dekat bahagian tepi nih..

hafrizzul hafiz said...

kalau yang tu... belum carik la tutor nye.. nanti kalau ade HH publish dekat blog okay