Secara default, layout blogger atau blogspot tidak memungkinkan kita untuk melakukan kostumisasi terhadap Font, ukuran dan warna dari judul postingan kita. Sebenarnya, Kalau kita hobby otak-atik HTML/CSS blog kita, untuk merubah semuanya itu, tidaklah sulit. Akan tetapi, karena kita baru belajar ngeblog, pasti timbul kekhawatiran akan adanya Error template kalau kita asal otak atik (Heee... Padahal sebenarnya saya saja yang khawatir).
Pada tutorial kali ini, saya akan memandu sobat blogger untuk merubah warna, ukuran dan font dari judul postingan kita. Tapi, sebelum sobat blogger mengikuti semua langkah yang ada, coba dulu sobat blogger memerika blog sobat di Template -> Costumize -> Advanced, Apakah disana sudah terdapat setting atau pengaturan untuk judul postingan? Kalau memang tidak ada, sobat blogger ikuti langkah di bawah ini!
Cara mengganti warna, ukuran dan Font Judul Postingan :
- Login di Blogger
- Di menu drop down, klik template
- Backup template sobat
- Klik Proceed (Tidak perlu kasih tanda centang pada Expand Widget Template)
- 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;
}
- Kalau sobat blogger sedah menemukan kode seperti itu, 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; }
- Selanjutnya, cari kode /* Variable definitions
- Kalau sudah ketemu, letakkan kode berikut di bawahnya :
<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">
- Kalau di template sobat, ada salah satu dari kode di atas, hapus saja salah satu (Untuk menghindari kode yang sama).
- Selanjutnya, simpan template sobat.
