Cara Menambahkan Icon atau Gambar Ke Dalam Judul Widget

Image result for image surat al-kautsar

Cara Menambahkan Icon atau Gambar Ke Dalam Judul Widget

Pertama-tama siapkan sebuah icon atau gambar yang berukuran kira-kira sekitar 15x15 pixel atau lebih. setelah itu mari kita lanjutkan pada tatacara pemasangan icon pada sisi judul widget.
'Login' ke dalam dasbor blog, kemudian pilih 'template' dan pilih lagi 'edit html'. Setelah kode-kode yang ada dalam template terbaca semua, kemudian tekan ctrl+f pada keyboard agar memunculkan kotak pencarian cepat. Selanjutnya ketikan nama judul gadget kedalam kotak pencarian, misalnya nama judul gadgetnya adalah 'google+badge' tanpa tanda kutip. Tekan 'enter' maka akan didapat beberapa kode seperti ini: 
 <b:widget id='HTML4' locked='false' title='Google+Badge' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title '><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
Klik tanda panah yang ada disisi kiri template untuk mengurai keselurahan kode.
Selanjutnya sisipkan kode url gambar berikut ini tepat sebelum kode <data:title/>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeD9dB_iXBV6m0_ttKWFWcm74VibjsyoIs3VLRP3uBIqlK1cZXIV8lYzov2oEkd_yFR-6IDxWviSQe8_kz3WoX0JOGdcUvA6Y3kgIYTThxhMuh1DEbGPhxoDS97X-0EhwGYWKCiVmarAyk/' style='border:0;padding:0;margin-right:10px'/>
Hingga urutan kodenya menjadi seperti berikut. 

  <b:widget id='HTML4' locked='false' title='Google+Badge' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeD9dB_iXBV6m0_ttKWFWcm74VibjsyoIs3VLRP3uBIqlK1cZXIV8lYzov2oEkd_yFR-6IDxWviSQe8_kz3WoX0JOGdcUvA6Y3kgIYTThxhMuh1DEbGPhxoDS97X-0EhwGYWKCiVmarAyk/' style='border:0;padding:0;margin-right:10px'/><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
Catatan: Ganti url gambar yang berwarna merah menggunakan url gambar/ url icon milik sobat sendiri.
Pilih 'pratinjau' terlebih dahulu, setelah dirasa cukup kemudian pilih 'simpan template' dan selesai

HALAMAN

POPULAR POST