Untuk mendapatkan cara menambahkan icon yang berbeda pada setiap judul widget blogger mungkin terdapat banyak versi. Dan saya akan memberikan cara sesimple mungkin untuk dapat dipahami pembaca. Untuk menggunakan cara yang saya berikan, pastikan template yang kalian gunakan sudah terpasang Font Awesome karena saya akan menggunakan icon dari Font Awesome. Jika kalian belum memasang Font Awesome bisa membaca Cara Memasang Font Awesome pada Blogger.
Jika ingin menambahkan icon diluar font awesome atau menggunakan icon buatan anda sendiri, saya sarankan terlebih dahulu anda menyiapkan sebuah icon atau gambar yang berukuran kira-kira sekitar 15x15 pixel atau lebih. Langsung saja masuk pada point dari topik yang kita bahas.
Simak langkah-langakah yang saya berikan.
1. Pada dashboard blogger kalian pilih Template >> Edite HTML
2. Cari ID Widget yang akan kalian tambahkan icon. Sebagai contoh saya akan menambahkan icon pada widget Popular Post.
3. Tambahkan kode icon kalian sebelum atau sesudah <data:title/>
Untuk mendapatkan icon dari font awesome bisa kunjungi http://fontawesome.io/icons/ dan yang ingin menggunakan icon buatan anda sendiri bisa menggunakan HTML dibawah ini.
4. Jangan lupa menambahkan style='margin-right:10px;' untuk memberi jarak antara icon dan judul widget seperti pada langkah 3
5. Pilih Pratinjau untuk melihat hasilnya. Jika kode sudah bekerja dengan semestinya klik Simpan
Saya rasa cukup jelas, jika masih ada yang kurang jelas bisa bertanya dikolam komentar. Terima kasih sudah berkunjung dan semoga bermanfaat.
Jika ingin menambahkan icon diluar font awesome atau menggunakan icon buatan anda sendiri, saya sarankan terlebih dahulu anda menyiapkan sebuah icon atau gambar yang berukuran kira-kira sekitar 15x15 pixel atau lebih. Langsung saja masuk pada point dari topik yang kita bahas.
Simak langkah-langakah yang saya berikan.
1. Pada dashboard blogger kalian pilih Template >> Edite HTML
2. Cari ID Widget yang akan kalian tambahkan icon. Sebagai contoh saya akan menambahkan icon pada widget Popular Post.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>...</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>...</div>
</b:includable>
</b:widget>
3. Tambahkan kode icon kalian sebelum atau sesudah <data:title/>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>...</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><i aria-hidden='true' class='fa fa-fire' style='margin-right: 10px;'/><data:title/></h2></b:if>
<div class='widget-content popular-posts'>...</div>
</b:includable>
</b:widget>
Untuk mendapatkan icon dari font awesome bisa kunjungi http://fontawesome.io/icons/ dan yang ingin menggunakan icon buatan anda sendiri bisa menggunakan HTML dibawah ini.
<img src='http://4.bp.blogspot.com/-kK3RzQIzxIA/Us6fhhsYh2I/AAAAAAAAAZ0/FYKre29QEYw/icon.png' style='border:0;padding:0;margin-right:10px'/>Ganti URL diatas dengan URL icon anda
4. Jangan lupa menambahkan style='margin-right:10px;' untuk memberi jarak antara icon dan judul widget seperti pada langkah 3
5. Pilih Pratinjau untuk melihat hasilnya. Jika kode sudah bekerja dengan semestinya klik Simpan
Saya rasa cukup jelas, jika masih ada yang kurang jelas bisa bertanya dikolam komentar. Terima kasih sudah berkunjung dan semoga bermanfaat.
0 nhận xét: