20 Agustus 2013

Cara merubah ukuran, jenis font dan warna pada judul post

http://redaksiexpo2012.blogspot.com/2013/08/cara-mengatur-tag-h1-h2-h3-h4-h5-h6.html

Artikel tersebut sebenarnya berkaitan erat dengan postingan sebelumnya yakni;  Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot. Karena dalam pengaturan tersebut berpengaruh terhadap ukuran, jenis font dan warna pada judul post. 

Cara merubah font, ukuran, dan warna pada Judul Postingan,  sebenarnya tidak terlalu rumit, namun perlu ketelitian dalam memelototi kode-kode HTML pada template blog.

Seperti biasa; 
  • Login di Blogger
  • Di menu drop down, klik template - Edit HTML
  • Backup template kalian dahulu (Takut terjadi sesuatu yang tidak dinginkan)
  • Cari kode yang seperti ini :
.post h3 {text-shadow: 1px 1px 3px #fff;
margin:.25em 0 15px;border-bottom:1px dashed $bordercolor;
padding:1px 0px 4px;
font:normal normal 24px Oswald;
font-weight:normal;
line-height:1.4em;
color:#333;
font:$titlefont;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font:normal normal 24px Oswald;color:#333;
}
.post h3 strong, .post h3 a:hover {
color:#c22400;
}

Jika sudah menemukan kode tersebut, hapus kode itu dan ganti dengan kode berikut :

.post h3 { margin: .25em 0 0; padding: 0 0 4px; color: $titlecolor; font: $posttitlefont; } .post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: $titlecolor; } .post h3 strong, .post h3 a:hover { color: $titlehovercolor; }

Lalu Cari lagi kode /* Variable definitions dan letakan kode berikut tepat dibawah kode /* Variable definitions

<Variable name="titlecolor" description="Post Title Color"type="color" default="#c60" value="#cc6600"><Variable name="titlehovercolor" description="Post Title Hover Color"type="color" default="#c60" value="#cc6600"><Variable name="posttitlefont" description="Post Title Font"type="font" default="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
 Setelah itu, maka dapat diatur sendiri ukuran dan warna font sesuai dengan keinginan. Lalu save template. 

Cara Mengubah Ukuran Teks Header pada Blogspot

Cari bagian  <Group description="Blog Title" selector=".header h1"> atau yang mirip dengan itu.  Ganti ukuran jenis font yang ada. Seperti yang telah diberi tanda warna merah dibawah ini.

<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> 

Cara Mengubah Ukuran Font Deskripsi pada Blog

Cari kode:
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>   
Lalu ubah nilai persentase yang telah diberi tanda warna merah seperti tersebut diatas.

8 komentar

Mas, bisakah menolong saya untuk perbaikan template? Pada blog saya (matapelajaranski.blogspot.com) kok fitur read more gak bisa berfungsi. Trims

Secara langsung edit template HTML blog anda mungkin tidak bisa. Namun saya sudah posting artikel yang berkaitan dengan fitur auto read more. Mungkin bisa dicoba mas... Silahkan kunjungi halaman ini. http://redaksiexpo2012.blogspot.com/2013/10/cara-pasang-auto-read-more-otomatis.html

mas dedi bisa liat blog saya mas? soalnya saya cari kode seperti yg mas posting di atas kok ga nemu nemu ya? ada cara lainnya ga mas?
oya ini alamat blog saya mas tutorialbelajarseoblog.blogspot.com

Terima kasih tutorialnya Mas Gan ! Blognya rame banget visitornya Mas !

terimakasih informasinya.. mudah untuk diikuti..
TBC Paru pada Ibu Hamil

bagaimana cara merubah font dalam postingan pada template agan yang pake di blog ini, soalnya ane juga sama tapi gak nemu.

makasih mas tutorialnya sangat bermanfaat...