Memasang Awesome Icon di Judul Gadget atau Menubar

Memasang Awesome Font/Icon di Samping Judul Gadget - Pagi ini full membahas Awesome Icon. Seklaian daripada lupa mending post beberapa sekaligus. Hari ini berurutan mulai post:
- Menggunakan Awesome Font di Blogspot
- Daftar Lengkap Awesome Icon Untuk Blog
- Custom CSS Untuk Awersome Icon/Font

Nah, kali ini untuk menjawab pertanyaan teman-teman yang ingin meletakkan awesome font tersebut di judul gadget sidebar ataupun di menubar.


Pemasangan Di Samping Judul Gadget


1. Login Blogger
2. Edit HTML
3. Kemudian cari kode gadget Anda, misalkan:

<b:widget id='HTML1' locked='false' title='Artikel Terkait' 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>


*yang di stabilo ungu adalah judul gadget Anda
*perhatikan yang di stabilo putih adalah baris yang harus Anda rubah dan sisipkan kode.

Kode awal:
<h2 class='title'><data:title/></h2>
menjadi:
<h2 class='title'><i class="icon-facebook"> <data:title/></h2>

*yang berwarna biru ganti dengan kode icon sesuai keinginan Anda. Kode icon bisa dilihat di: Daftar Lengkap Awesome Icon Untuk Blog
*Untuk mengatur icon di samping judul gadget agar posisinya bagus, bisa dengan CSS tambahan sesuai dengan artikel: Custom CSS Untuk Awersome Icon/Font


Pemasangan Pada Menubar

Untuk pemasangan pada menubar, maka posisi awesome icon seperti pada kode di bawah ini:
<li><i class="icon-facebook icon-2x"></i>  <a href="#">Pemula</a></li>

Sesuaikan dengan CSS agar terlihat bagus pada menubar.
Semoga bermanfaat. Blogging is Sharing... Kadang-kadang monetizing hehe

Item Review: Memasang Awesome Icon di Judul Gadget Blog

Komentar

Postingan Populer