Cara Menambahkan Icon Pada judul Widget Sidebar

Ijokuroyo – Selamat datang terimakash sudah berkunjung di blog ini, pada artikel ini akan membahas mengenai mempercantik widget sidebar agar kelihatan lebih cantik dan menarik. 

Blog yang menarik membuat pengunjung ingin lebih lama lama melihat dan tidak membuat bosan ,untuk itu banyak blogger mencoba untuk mempercantik blognya dengan berbagai cara, salah satunya yang akan di bahas dalam artikel ini, yaitu menambahkan icon pada judul widget sidebar. Unutk menambahkan icon pada widget sidebar, disini akan menggunakan dua cara;

1. Dengan Icon Online
2. Dengan membuat icon sendiri

Cara menambahkan icon pada judul widget sidebar dengan icon online

Maksud dari icon online ini yaitu icon yang sudah oleh rang lain dan kita tinggal menggunakannya tanpa perlu mendownload dan menguploadnya lagi. Pada artikel ini akan menggunakan fontawesome.

1. Login kemudian pilih blog yang akan dirubah, Masuk ke Dashboard >> pilih Template>>Edit HTML

2. Lalu cari ID Widget yang akan ditambahkan icon. Jika ingin menambahkan pada widget popularpost maka cari id popularpost juga berlaku pada label dll. Sebagai contoh disini akan menambahkan icon pada widget Label. 

Perhatikan kode berikut;

 <b:widget id='Label1' locked='false' title='Label' type='Label'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>CLOUD</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>

Kode tersebut merupakan kode untuk menampilkan widget label,cari <data:title/>, sebelum menambahkan icon,pastikan kita sudah mendapatkan kode icon yang akan ditambahkan. 

Untuk mendapatkan kode icon silahkan kunjungi http://fontawesome.io/icons/ ,terdapat versi gratis dan pro. Cara menambahkan icon fontawesome di menu blogger 

Setelah ketemu tambahkan kode icon tersebut sebelum atau sesudah .kode <data:title/>

 <b:widget id='Label1' locked='false' title='Label' type='Label'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>CLOUD</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><i class="fas fa-tags"></i><data:title/></h2>
  </b:if>

Jika sudah menambahkan, simpan perubahan atau pratinjau dahulu jika belum yakin sesuai atau tidak. 

Cara meambahkan icon pada judul widget sidebar dengan icon sendiri 

1. Jika ingin menambahkan icon buatan sendiri,pastikan cocok dengan tata letak pada template yang akan dipasang icon tersebut. Atau jika repot membuat icon sendiri bisa download di situs situs yang menyediakan icon gratis. 

2 .Icon yang sudah dibuat atau download, upload icon tersebut di penyimpanan online favorit masing masing, tapi saran saya lebih baik upload di blog, caranya seperti menambahkan image saat membuat postingan. 

Jika sudah copy link icon tersebut. Perhatikan kode dibawah, ini merupakan contoh kode yang akan menampilkan icon pada judul widget sidebar.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pHau8SCJsVcGYpwMpUcze6ZUvaayuOghEFjNCoXrUJ8WhyphenhyphenLxMGR5V-WLI3KdmBAH7uA3eH8Y71cDqmz_LHaCez_zx1boqUtBNnSdX2Pgntw9ZZvdVAOYwkPC8mFXXHpdRLQC42LXRUni/' style='border:0;padding:0;margin-right:10px'/>

3. Ganti link icon tersebut dengan link icon yang akan ditambahkan 

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgkrf34b7zwPXMQaVjxmufkwk62BOLR1zBaZR9gX19L6Py7pvf9heC917dUQ2R_5mLn7EUPGh-P7B14i7dNKVF-82ldpoRaFxFYhKASV4eDOrUkpFNkRWwzaLIFk_iMIQfGemOt5ft08/s1600/iconmonstr-trophy-7-240.png'style='border:0;padding:0;margin-right:10px'/>

4. Terakhir copy semua kode yang sudah dirubah tersebut, kemudian tambahkan sebelum atau sesudah pada kode widget yang akan ditambahkan icon.

<h2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgkrf34b7zwPXMQaVjxmufkwk62BOLR1zBaZR9gX19L6Py7pvf9heC917dUQ2R_5mLn7EUPGh-P7B14i7dNKVF-82ldpoRaFxFYhKASV4eDOrUkpFNkRWwzaLIFk_iMIQfGemOt5ft08/s1600/iconmonstr-trophy-7-240.png' style='border:0;padding:0;margin-right:10px'/><data:title/></h2>

style='border:0;padding:0;margin-right:10px' untuk memberi jarak antara icon dan judul widget. 

Sangat mudah bukan? Saya yakin jikapun seorang pemula mampu untuk mempraktekannya. Cukup Sekian artikel mengenai cara menambahan icon pada judul widget sidebar, jika ada pertanyaan silahkan ajukan di kolom kmentar

Share this post