Artikel Terbaru Dari Cerita Ngeblog

Friday, January 10, 2014

Cara Menambahkan Icon/ Gambar Ke Dalam Judul Widget

Print Friendly and PDF

Bagaimanakah Cara Menambahkan Icon/ Gambar Ke Dalam Judul Widget? Mungkin jawabannya akan terdapat banyak versi, namun disini CERITA NGEBLOG akan berusaha memberikan cara termudah dalam pencapaian maksud sobat untuk memasang icon ataupun gambar mini di bilah judul widget/gadget blog. Tujuan tutorial ini semata-mata adalah untuk mempercantik tampilan blog dan tanpa bertujuan untuk menaikkan peringkat seo apalagi ingin menggurui. Tidak! Tidak seperti itu.

Okay, sebelum mengutak-atik atau merubah-ubah beberapa kode yang ada dalam template blog, aku sarankan terlebih dahulu sobat menyiapkan 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.

Cara Menambahkan Icon Ke Dalam 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='http://4.bp.blogspot.com/-kK3RzQIzxIA/Us6fhhsYh2I/AAAAAAAAAZ0/FYKre29QEYw/icon.png' 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='http://4.bp.blogspot.com/-kK3RzQIzxIA/Us6fhhsYh2I/AAAAAAAAAZ0/FYKre29QEYw/icon.png' 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>


Cara Menambahkan Icon/ Gambar Ke Dalam Judul 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. Demikianlah cara menambahkan icon/gambar ke dalam judul widget. Baca juga cara menyisipkan icon/gambar ke dalam judul postingan. Selamat mencoba dan bye-bye...



Terima Kasih Atas Kunjungan Sobat dan Telah Membaca Artikel Cara Menambahkan Icon/ Gambar Ke Dalam Judul Widget , Silahkan Bagikan Artikel Ini, Atau Tekan Tombol G+ di Bawah

Klik BERLANGGANAN, Untuk Mendapatkan Update Terbaru Dari CERITA NGEBLOG


Share This :

Ditulis Oleh : Edo Kapengi Jam: 11:05 AM Kategori:

3 komentar :

Edo Kapengi
  1. masih bingung sobat w mau bikin logo pada blog
    cara yang diatas tadi yang begitu harus nulis ctrl-f dll masih belum ngudeng

    ReplyDelete

Silahkan meninggalkan komentarnya.!
*(Mohon untuk tidak mencantumkan link hidup)