Cara memasang icon awesome di judul widget

Font Awesome merupakan kumpulan icon dan tombol yang berbasis font. Artinya, ketika sobat membutuhkan icon di blog, tidak lagi menggunakan gambar / image yang tentunya akan lebih mempercepat loading blog sobat. Dan untuk postingan kali ini saya akan kasih tutor cara meletakkan nya di judul widget sesuai dari pertanyaan dari sahabat blogger bernama Amaresa Abdillah. Sebenarnya icon ini bisa di letakkan dimana² sesuai selera sobat masing-masing tetapi disini yang saya bahas hanya di judul widget saja. Script ini saya ambil dari Blog Dian AnaRchyta atau pemilik template blog yang saya pakai sekarang ini :) 
Okey cukup sekian basa basi nya langsung ajah menuju  ke TKP,... wkwwwkkk

Yang pasti sobat harus memasang script Icon Font Awesome nya terlebih dahulu berikut script nya. silahkan sobat copy kemudian taruh di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kalau sudah lanjut lagi ke tutorial berikut nya di bawah ini :

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.awesome h2 {
 background : #292929 !important;
 color : #fff;
} 
.awesome h2:before {
 content : "\f114";
 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 : "\f114"; bisa anda ganti dengan value font icon awesome yg di inginkan..
klik disini untuk memilih value icon font awesome nya.

5. 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>

Untuk kode yang saya block warna kuning diatas silahkan sobat ganti dengan kode ini

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

dan kode block wana kuning yang ke-2 ganti dengan kode dibawah ini

</div></div>

Jika ada yang belum paham dengan tutorial ini silahkan corat coret di kolom komentar asal jangan SPAM ya ,.. 

Terima kasih telah membaca artikel tentang Cara memasang icon awesome di judul widget di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template

Suka artikel ini? Bagikan :

FacebookGoogle+