[HOT] Cara Memberi Icon Untuk Menu atau Widget di Blog

Hibbank - Cara Membuat Logo Font Awesome Pada Title Widget - Halo sobat semua, sekarang saya akan membagikan Tutorial super duper menarik, yaitu ''Cara Memberi Icon Untuk Menu atau Widget di Blog'' jika masih bingung contohnya bisa di lihat di samping kanan Blog ini..

Contoh... :

BAHAN

Jika ingin membuat seperti itu ikuti tutorial dibawah ini,,,, :D

Sebelum melakukan tutorial disini,,, kalian harus mengikuti Tutorial ini dahulu :D

Cara Menggunakan Ikon Font Awesome Untuk Menu atau Widget Di Blog

1. Masuk Ke Blogger

2. Pilih Template >> Edit HTML

3. Masukan kode CSS dibawah ini tepat di atas ]]></b:skin> atau </style>

/* LOGO FONT AWESOME IN SIDEBAR */
.social h2 { background : #292929 !important ; color : #fff; } .social h2:before { content : "\f0d5"; font-family : FontAwesome; font-size : 15px; font-style : normal; font-weight : normal; padding : 4px 1px; margin : 0 10px 0 0; border-radius : 3px 0 0 0; }

NOTE :
1. Ubah text yang berwarna Orange dengan nama Widget
2. Ubah text yang berwarna Merah dengan code warna
3. Ubah text yang berwarna Kuning dengan code Logo Font Awesome
4. Ubah text yang berwarna Hijau dengan ukuran Logo

Perbanyak CSS itu,,, jika widget kalian banyak,,,,
Langkah Selanjutnya

Cara Memasang Logo Kedalam Title/Judul Widget

Contoh : Cari Kode seperti ini... di EDIT HTML
<b:widget id='HTML4' locked='false' title='Social Media' type='HTML'>
  <b:includable id='main'>

Menjadi... Lihat Baik2 Tutorial di bagian sini

<b:widget id='HTML4' locked='false' title='Social Media' type='HTML'>
  <b:includable id='main'><div class='social'>

Turun kebawah,, dan temukan code yang Error/Berwarna Merah Tambahkan Tag Penutup yaitu </div> di atas kode yang berwarna merah tadi...
Biasanya Kode merahnya Bertuliskan </b:includable> Jadi Letakkan Kode </div> Sebelum atau Diatas Kode Merah Tersebut

Pilih Logo >>> Silahkan Pilih Icon <<< Contoh Logo seperti ini >>> "\f0d5" <<<

CARA PEMASANGAN PADA MENU DI BLOG

<li>
      <a href='http://hibbank.blogspot.com/search/label/Blogging'><i class='icon-edit'/> Blogging</a>
    </li>
    <li>
      <a href='http://hibbank.blogspot.com/search/label/Artikel'><i class='icon-pencil'/> Artikel</a>
    </li>
<li>
      <a href='http://hibbank.blogspot.com/search/label/Information'><i class='icon-info-sign'/> Information</a>
    </li>
<li>
      <a href='http://hibbank.blogspot.com/search/label/JKT48'><i class='icon-music'/> JKT48</a>
    </li>
    <li>
      <a href='http://Hibbank.blogspot.com/404'><i class='icon-unlink'/> 404</a>
    </li>

Jika ada yang belum paham, dengan tutorial ini,, bisa memasukan pertanyaan di dalam kolom komentar...Terimakasih sudah berkunjung,,, Semoga Tutorial ini bermanfaat ya... :D

Keywords : Cara memberi Ikon pada Menu blog , Cara memberi icon pada menu blog, Cara memberi Icon di menu blog, Cara memasang Icon pada menu blog, Cara memasang ikon pada menu di blog

Support