Menambah Icon Gambar Pada Judul Sidebar

Situseo Blog : Dengan menambah icon gambar pada header atau judul sidebar akan menambah tampilan sidebar menjadi lebih menarik, dengan tambahan gambar kecil seukuran 16px menurut saya tidak terlalu memberatkan terhadap loading blog, sebagai ilustrasi tampilan icon gambar pada header atau judul sidebar, seperti gambar dibawah ini :

Secara otomatis penambahan icon gambar pada judul sidebar akan menampilkan icon gambar yang sama terhadap header judul sidebar, baik itu judul sidebar yang telah ada, maupun dilain waktu kita menambah judul sidebar yang baru, berbeda apabila kita menambahkan icon gambar untuk judul sidebar dengan icon gambar yang berbeda-beda pada setiap judul sidebar.

Biasanya kode css pada header judul pada sidebar menggunakan kode h2 (heading 2), untuk menambah icon gambar pada sidebar coba kalian cari kode css yang berakhiran h2, seperti #sidebar-wrapper h2 {, #side-wrapper h2 { atau #sidebar h2 { dll, dari ketiga contoh kode css yang berhubungan dengan header judul sidebar mungkin ada pada template kalian (karena penamaan kode css yang berhubungan dengan header judul sidebar bisa berbeda dengan template yang kalian pergunakan).

Kode css bagian header judul sidebar saya ilustrasikan seperti ini :

#sidebar h2 {
background:#ffffff;
line-height: 16px;
color:#00408c;
font-size: 16px;
margin:-15px -15px 10px;
padding:0px 0px 0px 22px;
kode ... css lainnya
}

Untuk menambahkan icon gambar pada header judul sidebar, kalian tambahkan pada bagian background alamat icon gambar yang akan dipakai, sehingga menjadi seperti ini :

#sidebar h2 {
background:#ffffff url(alamat url icon gambar.png) no-repeat center left;
line-height: 16px;
color:#00408c;
font-size: 16px;
margin:-15px -15px 10px;
padding:0px 0px 0px 22px;
kode ... css lainnya
}

1. Supaya tidak tunpang tindih antara judul sidebar dengan icon gambar yang terpasang, kalian atur jarak antara judul sidebar dengan icon gambar dengan mengatur nilai pada bagian padding, angka pertama menunjukan padding-top (atas), angka kedua menunjukan padding-right (kanan), angka ketiga menunjukan padding-bottom (bawah) dan angka terakhir menunjukan padding-left (kiri).

2. Keterangan left menunjukan posisi icon gambar berada pada posisi kiri, jika posisi icon gambar berada pada sebelah kanan, kalian gantiketerangan left menjadi right.

3. Sedangkan keterangan no-repeat supaya icon gambar tidak tampil berulang memenuhi bagian header judul sidebar.

Untuk kasus lain jika tidak ditemukan #sidebar h2 {, #sidebar-wrapper h2 {, #side-wrapper h2 { atau yang berhubungan dengan header judul sidebar (h2), kalian bisa menambahkan kode css tersebut pada template anda, misalnya pada template kalian ada kode css #sidebar { (kode cssyang mewakili bagian judul sidebar) tapi tidak ada kode css #sidebar h2 {, kalian bisa tambahkan kode css #sidebar h2{ dan tampatkan pada bagian bawah kode css #sidebar {, ilustrasi kode css-nya menjadi seperti ini :

#sidebar {
kode...css lainnya
}
#sidebar h2 {
background:#ffffff url(alamat url icon gambar.png) no-repeat center left;
line-height: 16px;
color:#00408c;
font-size: 16px;
margin:-15px -15px 10px;
padding:0px 0px 0px 22px;
kode ... css lainnya
}

Dengan menambahkan icon gambar pada header judul sidebar Situseo Blog berharap bisa menjadikan tampilan blog kalian menjadi lebih menarik.

Semoga bermanfaat,