Cara Memberi Warna Background Judul Posting Blog

Baca Juga:

Satu lagi cara agar tampilan blog lebih menarik yaitu dengan memberi warna pada background judul posting blog. Dengan memberikan warna background di judul posting, maka akan mempermudah pengunjung untuk melihat judul artikel apa yang sedang pengunjung baca.

Dan juga tidak membuat pengunjung menjadi bosan, dengan tampilan huruf yang biasa-biasa saja, yang terkadang hampir sama tampilannya antara judul dengan isi artikel, yang membedakan hanya besar kecil huruf, ataupun ketebalan huruf. Silakan lihat tulisan dibawah ini untuk contoh judul posting dengan garis bawah atau lihat judul dari artikel yang sedang anda baca ini.

Cara Memberi Warna Background Judul Posting Blog

Ikuti langkah-langkah dibawah ini.

1. Login ke blog dan pilih pengaturan template
2. Klik Edit HTML dan cari kode h3.post-title, h4 { atau h3.post-title saja, gunakan Ctrl f untuk memudahkan pencarian. kode lengkapnya seperti dibawah ini.
h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
3. Jika sudah menemukan kode seperti diatas. Tambahkan kode ini dibawah nya.
background:#0a58a3;
border-bottom:4px solid #1780dd;
padding:6px 15px 4px;
4. Jadi kode lengkpnya seperti ini.
h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
background:#0a58a3;
border-bottom:4px solid #1780dd;
padding:6px 15px 4px;
}
5. Keterangan:
background:#0a58a3;  warna background, ganti #0a58a3; dengan warna yang kamu inginkan
border-bottom:4px solid #1780dd;  ini warna garis bawah
padding:6px 15px 4px; ini fungsinya untuk meratakan atas bawah huruf judul posting.
6. Silakan diubah sesuai dengan keinginan kalian, untuk padding, Jika tidak salah, 6px itu untuk jarak huruf dengan batas posting atas, 15px  untuk kanan, 4px untuk kiri. Silakan coba diganti agar sesuai dengan posting kalian.
7. Setelah selesai, dipreview dulu, jika sudah berubah warna background judul posting kamu, baru disave. Selesai.

Efek dari h3.post-title, h4 { itu akan mengganti warna background judul posting dan juga tulisan poskan komentar/tidak ada komentar di atas kotak komentar blog.

Satu lagi efek dari h3.post-title, h4 {  tulisan yang berada ditengah posting ini, yang bergaris bawah adalah kalimat yang diubah formatnya menjadi heading saat menulis artikel ini, hasilnya menjadi seperti itu. Jika ingin mengganti background judul posting saja. Ikuti langkah-langkah dibawah ini.

1. Cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
h3.post-title{
        padding:4px 2px 2px;
        border-bottom:1px dotted #28b;
}
2. Save Template, Selesai.

Baca juga cara mengganti warna judul sidebar blog, maksudnya judul widget di kiri kanan blog, seperti arsip, populer post, dll. Jika ingin memasang tombol share dibawah posting blog, baca cara membuat tombol share  facebook, twitter dan google +. Semoga Bermanfaat.

Tweet