Cara tambahkan Icon pada title Widget menggunakan 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/

Baca juga :

6 comments:

  1. #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{

    ReplyDelete
  2. 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 ).

    ReplyDelete
  3. Terimakasih telah berkunjung di Style Blogger Template dan sudah meninggalkan Commentar ....

    ReplyDelete
  4. caranya gimana tu n sidebar itu tempatnya di mana

    ReplyDelete
  5. keren banget, thanks ya gan ...

    ReplyDelete

to Top