Membuat Logo Font Awesome Pada Title Widget

Membuat Logo Font Awesome Pada Title Widget

Rio Ilham Hadi

09 April 2014

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

Contoh... :

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 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,,,,

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

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

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

Share This