Sunday, 20 April 2014

Memasang Font Awesome di Judul Gadget atau Menubar

Unknown

Sunday, 20 April 2014

Memasang Font Awesome di Judul Gadget atau Menubar - Selamat sobat blogger semua, semoga sehat selalu. Nah, kali ini untuk menjawab pertanyaan teman-teman yang ingin meletakkan font awesome di judul gadget sidebar ataupun di menubar.
Langsung saja berikut ini caranya..

Cara Pertama

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>

Perhatikan yg saya garis bawahi
Kode awal:

<h2 class='title'><data:title/></h2>

Ganti menjadi:

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

Pada code <i class="icon-facebook"/> di atas silahkan sobat sesuikan dengan yg sobat inginkan, disini List Icon Font Awesome dan CSS Value Content V4.0.3 yang mungkin bisa membantu sobat mencari icon yg di perlukan.

Cara Kedua

1. Masuk Ke Blogger
2. Pilih Template >> Edit HTML
3. Masukan kode CSS dibawah ini tepat di atas ]]></b:skin> atau </style>

.awesome h2 {
 background : #292929 !important;
 color : #fff;
} 
.awesome 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;
}

pada code content : "\f0d5"; bisa anda dengan value font awesome yg di inginkan..
Selanjutnya silahkan anda cari kode seperti ini (contoh)

<b:widget id='HTML2' 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>

Perhatikan yg saya garis bawahi
Kode awal:

<b:includable id='main'>

Ubah menjadi

<b:includable id='main'><div class='awesome'>

dan garis bawah yg kedua

</div>

Ganti menjadi

</div></div>

Jika ada yang belum paham, dengan tutorial ini, bisa kita bahas di dalam kolom komentar...
Terimakasih sudah berkunjung,,, Semoga Tutorial ini bermanfaat ya...