Cara Memasang Icon Di Samping Judul Sidebar Blog

Salah satu tips dan trik untuk mempercantik penampilan blog ialah dengan menambahkan icon pada judul sidebar. Hal ini sebenarnya dilakukan oleh para blogger karena tampilan standar yang diberikan oleh blogger kurang memuaskan.

Jadi bagi sobat yang ingin menambahkan icon di samping judul sidebar pada blognya ikuti langkah-langkah berikut ini.

1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand Template Widget.
4. Cari code yang mirip seperti di bawah ini dan fokuskan pencarian pada code yang berwarna merah.

h2 {margin : 0 0 10px;
border-bottom : 2px dotted #ccc;
font-family:arial, serif;
font-size : 19px;
color : #000;
}

4. Hapus code yang berwarna biru dan ganti dengan code berwarna biru ini

h2 {background:url(http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/32/Folders-OS-Android-Metro-icon.png) left no-repeat;
margin : 0 0 10px;
padding:0 0 0 25px;
border-bottom : 2px dotted #ccc;
font-family : Arial, Helvetica, sans-serif;
font-size : 15px;
color : #000;
}

Catatan:

Ganti tulisan yang berwarna ungu dengan URL icon sobat.

5. Simpan/save template. Maka hasilnya akan nampak seperti gambar di bawah ini.

Ref

Memasang Icon Di Judul Sidebar

Nah Kali ini saya akan membahas tentang bagaimana cara memasang Icon di judul sidebar Blog. apakah Adna pernah melihatnya ?

Jika tertarik Anda juga bisa memasangnya di Blog Anda ada 2 cara yaitu hanya menabah icon dengan 1 macam icon saja dan yang kedua daengan berbagai variasi icon. Mungkin memang lebih menarik dengan cara yang ke dua yaitu dengan memasang variasi icon jadi lebih menarik dan terlihat beda antara sidebar 1 dengan yang lainnya....

Lngsung saja untuk memasangnya ikuti langkah berikut ini :

*Cara Pertama 1 macam icon :
1. Login ke akun Blogger.
2. Klik Tata Letak/layout dan klik Edit HTML.
3. Beri centang pada Expand Template Widget.
4. Untuk berjaga-jaga jika terjadi kesalahan pada saat mengedit download terlebih dahulu dengan klik links "Download Template Lengkap".

5. Cari code #sidebar-wrapper (untuk mempermudah dalam pencarian gunakan Ctrl+f atau F3.
6. Jika sudah ketemu, tambahkan code warna biru jadi akan menjadi seperti ini :

#sidebar-wrapper h2{ background: url("http://www.blogblog.com/rounders/icon_arrow.gif") 0px 0px no-repeat; margin:.6em 0 .6em; padding:0 20px; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px solid #C0C0C0}

(Jangan lupa untuk mengganti alamat gambar yang berwarna merah dengan alamat gambar yang kamu inginkan).

7. Klik Save Template

*Cara kedua variasai icon yang saya dapat dari Kang Rohman :

1. Login ke akun Blogger
2. Klik Tata letak/Layout dan klik edit HTML
3. Cari kode yang mirip dengan kode dibawah ini :

<b:widget id='HTML8' locked='false' title='My Menu' type='HTML'/>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='HTML9' locked='false' title='Site Info' type='HTML'/>

"Catatan mungkin setiap Blog berbeda kodenya"

4. Perhatikan Kode yang berwrna merah dan biru.

HTML8 My Menu
Label1 Kategori
HTML9 Site Info

5. Buatlah kode CCS dengan ID kode tadi dengan menambah h2 di ujungnya jadinya, misalnya sepeti ini :

#HTML8 h2{}
#Label1 h2{}
#HTML9 h2{}

6. Kemudian tambahkan vaule-nya untuk menabah iconnya, jadinya sepeti ini :

#HTML8 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML9 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}

"Jangan lupa mengganti kode warna biru dengan URL Gambar atau Icon yang akan dipasang"
NB : Anda juga dapat berkreasi sendiri kode vaule-nya sesuai keinginan

7. Letakkan Kode CCS tersebut diatas Kode ]]></b:skin>
8. Klik Save Template

Sumber : Kolom-tutorial.blogspot.com