-->

Cara tambahkan Icon pada title Widget menggunakan Cheatsheet Font Awesome

Cara tambahkan Icon Awesome pada Title Widget Blogger, Cheatsheet Font Awesome
Cara tambahkan Icon pada Widget Title (judul) Sidebar Blogger Template ini hanya sebuah cara sederhana untuk mempercantik Template Blogger Anda agar lebih terlihat profesional. Banyak para perancang template menggunakan cara ini, seperti memberikan icon atau gambar pada sebelah kiri tulisan "Popular Post", dengan cara ini dapat membuat betah pengunjung blog.

icon widget title

Cara membuat Icon Widget Title :

Cara sederhana ini menggunakan Cheatsheet Font Awesome, sehingga sebagai langkah pertama kita harus memasang external link CCS font awesome, dengan cara tambahkan kode dibawah ini diatas kode </head> :
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Jika sudah terpasang selanjutnya, tinggal kita tambahkan code pada Css Template, dengan cara letakkan kode dibawah ini diatas kode ]]></b:skin> :
.widget h2{line-height:45px;position: relative;}
.widget h2:before{line-height:45px;width:45px;top:0;left:0;text-align:center;position:absolute;font-family:FontAwesome;}
.widget.PopularPosts h2{content:'\f087';}
.widget.HTML h2{content:'\f0f4';}
.widget.Label h2{content:'\f02b';}
Catatan :
Untuk contoh icon dan cara penerapan Cheatsheet Font Awesome yang lebih jelas dapat dilihat di :
https://fontawesome.com/v4.7.0/cheatsheet/

Anda mungkin menyukai postingan ini

6 komentar

  1. Empu Band
    Sangat Bermanfaat,.
  2. Anonim
    #sidebar-wrapper li{
    text-decoration: none;
    padding:.3em 0 .3em 35px;
    background: url(http://cdn.iconfinder.net/data/icons/humano2/16x16/mimetypes/gnome-mime-application-x-archive.png) no-repeat left;
    }

    /*
    #sidebar-wrapper li a, #sidebar-wrapper li a:visited {
    height: 1.5em;
    text-decoration: none;
    padding:.3em 0 .3em 15px;
    background: url(http://i120.photobucket.com/albums/o190/jaloewig/Black%20Skins/arrow-1.gif) no-repeat left;
    line-height: 1.5em;
    }

    #sidebar-wrapper li a:hover{
  3. Anonim
    Penulis tidak menyediakan View Demo Cara tambahkan Icon pada Title Sidebar Blogger Template , untuk melihat hasilnya silahkan lihat Sidebar pada template Style Blogger Template ( sidebar left / sidebar samping kiri ).
  4. Manuk Merak
    Terimakasih telah berkunjung di Style Blogger Template dan sudah meninggalkan Commentar ....
  5. Ghaly Ziaulhaq
    caranya gimana tu n sidebar itu tempatnya di mana
  6. Firmaenz
    keren banget, thanks ya gan ...
  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>