Membuat Logo Font Awesome Pada Title Widget
![[Image: font_awesome.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmNumuCdfgOoHKtH-h9fDg04dh39VH2UTxiujW-J9OF8GrXLdtKyYtsfWFYUFG8XeXcx0zpdTi2Xb7BrZG_vnzMo14vVQ3zfUZSKFnCjhgnBThI7dyCWt-4hyphenhyphenC5_NrSI61gzC5Z0u297A/s1600/font_awesome.png)
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... :
![[Image: Contoh+9+Post.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPoBfBOoby6-JApBSapNLmMrZckF49kW9wqhx-CETJeP_qCIXGJ4ZU5qJXskMd4MjL_Sst1U9TUuARozFcx33V2immkpPJz2wb0AFlw13NCOUMaB7mlvkB070XCJwBC5DkWB_HiuON08/s1600/Contoh+9+Post.png)
Jika ingin membuat seperti itu ikuti tutorial dibawah ini,,,,![[Image: icon_smile.gif]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9izEeC9OhPBFqVA1627hnZzXSATPa9q0Go__sukYDy2Jyj2m9gcICDqLWp1or-jc6qjDEFv0UlDFuMofsNdxYziKDyJ8Kg2CRSIZlt5Vmdk8y8D01ZZdRGENqL65TLg3JitARh_a7AEQ/s1600/icon_smile.gif)
Sebelum melakukan tutorial disini,,, kalian harus mengikuti Tutorial ini dahulu
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>
Code:
/* 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; }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
Code:
Contoh : Cari Kode seperti ini... di EDIT HTML
<b:widget id='HTML4' locked='false' title='Social Media' type='HTML'>
<b:includable id='main'>Code:
<b:widget id='HTML4' locked='false' title='Social Media' type='HTML'>
<b:includable id='main'><div class='social'>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...
Share :