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
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.
Ikuti langkah-langkah dibawah ini.
- Login ke blog dan pilih pengaturan template
- 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.
- Jika sudah menemukan kode seperti diatas. Tambahkan kode ini dibawah nya.
- Jadi kode lengkpnya seperti ini.
- Keterangan:
- 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.
- Setelah selesai, dipreview dulu, jika sudah berubah warna background judul posting kamu, baru disave. Selesai.
h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color);
}
font: $(post.title.font);
color: $(post.title.text.color);
}
background:#0a58a3;
border-bottom:4px solid #1780dd;
padding:6px 15px 4px;
border-bottom:4px solid #1780dd;
padding:6px 15px 4px;
h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color);
background:#0a58a3;
border-bottom:4px solid #1780dd;
padding:6px 15px 4px;
}
font: $(post.title.font);
color: $(post.title.text.color);
background:#0a58a3;
border-bottom:4px solid #1780dd;
padding:6px 15px 4px;
}
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.
border-bottom:4px solid #1780dd; ini warna garis bawah
padding:6px 15px 4px; ini fungsinya untuk meratakan atas bawah huruf judul posting.
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.
- Cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
- Save Template, Selesai.
h3.post-title{
padding:4px 2px 2px;
border-bottom:1px dotted #28b;
}
padding:4px 2px 2px;
border-bottom:1px dotted #28b;
}
