Cara tambahkan Icon pada title Widget menggunakan Cheatsheet Font Awesome

Tips dan Trik Cara tambahkan Icon pada Title / judul Sidebar Blogger Template ini hanya sebuah cara untuk mempercantik Template Blogger Anda agar lebih terlihat profesional. Kali ini menggunakan Cheatsheet Font Awesome, untuk itu sebagai pertama kita harus memasang css 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'/>
Langkahnya cukup mudah, silahkan tambahkan code pada Css Template Anda :
/* Icon Widget */
.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 Cheatsheet Font Awesome dapat dilihat di : https://fontawesome.com/v4.7.0/cheatsheet/

Cara tambahkan Icon pada title Widget menggunakan Cheatsheet Font Awesome
  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