Cara Membuat Logo Font Awesome Pada Title Widget Blog

Cara Pasang Font Awesome Icon Di Widget Blog I Gratis I Tips Blogger

Halo sobat kumpulan's.... kali ini admin akan memberikan sedikit tips tentang blogger. Judulnya "Cara Membuat Logo Font Awesome Pada Title Widget Blog". Mungkin sobat kumpulan pernah bertanya-tanya bagaiman caranya ya ?? Atau ada yang bertanya bagaimana ya tampilannya ??? Masih bingungkah sob... baiklah. Sekiranya beginilah scr-nya.

Terlihat di samping judul "SOCIAL MEDIA" itu terdapat logo icon G+, itulah yang admin maksud.

 

Sebenarnya caranya gampang-gampang susah sob... tinggal sobat ikuti aja langkah-langkah berikut ini. Mudah-mudahan berhasil.

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; }

Catatan :  

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

Lalu perbanyak CSS itu, jika sobat mempunyai banyak widget, biar seimbang. JIka tidak, tidak masalah kok sob....

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 Baik-baikTutorial di bagian sini sob...

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

Untuk Logo bisa sobat lihat disini : 

• Font Awesome
• Blog Kang Ismet

Contoh logo kodenya seperti ini : "\f0d5"

Sebelumnya Special Thx : 

Blog Kang Ismet dan Dunia Blanter

Tweet