Modifikasi Tampilan Judul Postingan

Tampilan blog yang menarik dan cantik tentu akan membuat pengunjung senang mengunjungi blog anda. Nah, salah satunya yang menentukan kemenarikan template blog anda adalah tampilan judul posting.

Supaya lebih menarik, kita bisa memodifikasinya. Caranya adalah sebagai berikut.

1. Login ke Blogger, lalu pilih menu Tata Letak > Font dan Warna.

2. Cari tulisan Warna Judul Posting.

3. Klik tulisan tersebut, dan pilih warna yang diinginkan.

4. Klik Simpan Perubahan.

Nah, cara diatas dapat digunakan bagi anda yang belum mahir kode-kode HTML dan CSS. Untuk anda yang sudah mahir, lakukan langkah-langkah berikut.

1. Seperti binasa, eh, seperti biasa maksudnya, login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup dulu ya templatenya...

3. Cari kode yang kira-kira seperti berikut.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%; /* Ukuran font */
font-weight:normal;
line-height:1.4em;
color:$titlecolor; /* Warna judul posting */
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover { /* Kondisi judul posting saat hover */
color:$textcolor; /* Warna judul posting saat hover */
}

Karena kode di setiap blog tidak sama, maka carilah kode yang mirip (atau setidaknya mendekati) dengan kode diatas.

Untuk mengganti warna judul posting, ubahlah kode color:$titlecolor; dengan warna yang diinginkan. misalnya color:blue;. Untuk mengganti warna saat judul posting hover juga demikian. Ubah kode color:$textcolor; dengan warna yang diinginkan.

Untuk membuat judul posting menjadi bergaris bawah, ubah kode font-weight:normal; dengan font-weight:underline;. Jika ingin judul posting menjadi underline pada saat hover, Tambahkan kode font-weight:underline; dibawah kode .post h3 strong, .post h3 a:hover {. Jadi seperti ini.

.post h3 strong, .post h3 a:hover { /* Kondisi judul posting saat hover */
font-weight:underline;
color:$textcolor; /* Warna judul posting saat hover */
}

Apabila anda ingin mengubah jenis font judul posting, tambahkan kode font-family:fontyangdiinginkan;. Ubah fontyangdiinginkan dengan font yang diinginkan. Misal: font-family:verdana;. Nah, lalu taruh kode tsb di bawah kode .post h3 {. Jadi seperti ini.

.post h3 {
font-family:verdana;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%; /* Ukuran font */
font-weight:normal;
line-height:1.4em;
color:$titlecolor; /* Warna judul posting */
}

Anda bisa memberikan tambahan lain. Misalnya dengan menambahkan background atau membuat border di sekeliling judul posting.

4. Lalu simpan.

Silahkan lihat hasilnya. Semoga blog anda lebih menarik dan lebih indah dipandang mata.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya