Icon Berbeda Pada Setiap Judul Sidebar

Situseo Blog : Icon gambar berbeda pada setiap header judul sidebar, berbeda dengan postingan sebelumnya yang menampilkan icon gambar pada setiap header judul sidebar otomatis sama (1 icon), dengan menambahkan icon gambar berbeda pada setiap header judul sidebar akan memberi keterangan lebih terhadap judul (h2) sidebar.

Untuk menambahkan icon gambar berbeda pada tiap judul sidebar cara pemasangannya pun berbeda, yaitu kita mesti memberi tambahan icon gambar tersebut satu persatu (manual) terhadap setiap header judul sidebar, sebagai ilustrasi tampilan icon gambar berbeda pada setiap header judul sidebar seperti dibawah ini :

Untuk menambahkan icon gambar pada tiap header judul sidebar, kalian harus mengeatahui id dari widget yang terpasang, sebagai ilustrasi gambar yang dipergunakan, sidebar tersebut menggunakan 1 kolom dan bagian bawahnya terbagi 2 element (seperti terlihat pada gambar diatas), perhatikan kode HTML id dari header judul sidebar yang saya pergunakan sebagai contoh seperti dibawah ini :

<div id='side-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Favorite site : Situseo Blog' type='HTML'/>
</b:section>
<div style='clear: both;'/>

<div id='side-wrapper'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div id='side-wrapper'>
<b:section class='sidebar' id='sidebar4' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Blogroll' type='HTML'/>
</b:section>
</div>

<div style='clear: both;'/>
</div>

Kode HTML tersebut diatas menunjukan id dari widget yang terpasang pada sidebar, untuk menambahkan icon gambar pada tiap judul sidebar perhatikan nama id dari salah satu widget, sebagai contoh saya ambil judul widget sidebar Favorite site : Situseo Blog, judul sidebar Favorite Site : Situseo Blog menggunakan id HTML1 (id=HTML1), setelah mengetahui id dari widget terpasang (judul sidebar) langkah selanjutnya kita membuat kode css untuk nama id tersebut, yaitu dengan menambahkan kode h2, sehingga menjadi #HTML1 h2 { untuk kode css-nya.

Kode css untuk menambah icon pada header judul sidebar Favorite Site : Situseo Blog, saya ilustrasikan menjadi seperti ini :

#HTML1 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
}

Untuk judul judul widget sidebar lainnya, kalian bisa mengganti kepala css menjadi #Label1 h2 { dan #HTML2 h2 { pada kasus contoh html diatas dan isi css samakan dengan kode css diatas.

Isi kode css harus mengacu kepada kode css yang berhubungan dengan judul sidebar (h2) template yang kalian pergunakan, ini sangat penting karena jika tidak sesuai dengan kode css judul sidebar (h2) pada template akan terjadi perbedaan bentuk, baik warna, ukuran dll.

Untuk penempatan kode css-nya, letakan diarea untuk kode css yaitu antara dibawah <b:skin><![CDATA[ dan diatas ]]></b:skin>. Seperti pada keterangan-keterangan kasus sebelumnya, melakukan backup template sebelum melakukan modifikasi akan lebih bijak untuk menghindari segala kesalahan dan lakukan pratinjau sebelum melakukan penge-save-an.

Semoga bermanfaat,