Cara tambahkan Icon pada Title Sidebar Blogger Template

Tips dan Trik Cara tambahkan Icon pada Title Sidebar Blogger Template ini hanya sebuah cara untuk mempercantik Template Blogger Anda, langkah pertama kita harus mempunyai image/icon terlebih dahulu, jika mau gampang kita tinggal cari di situs http://www.iconarchive.com atau http://www.iconfinder.com/ , jika sudah dapat silahkan sobat hosting/upload icon tersebut (misalnya di imageshack.us, tinypic.com atau photobucket.com) atau juga silahkan Anda ambil link Image-nya saja ( Ngirit Sppace Hhosting kita .

Langkahnya cukup mudah, silahkan tambahkan code pada Css Template Anda :

1. Langkah 1 : Silahkan Login dan Back Up template Anda.


2. Langkah 2 : Masukkan CSS dibawah ini pada Template Blogger Anda, Atau diatas ]]></b:skin> :
   
   /* Sidebar Content Modifikasi
----------------------------------------------- */

#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{  
    background: url(http://2.bp.blogspot.com/_HR8egC6j8tg/S8dFQ3fZhAI/AAAAAAAAAFo/R6cEAgqcBr8/s1600/arrowred.png) no-repeat left;
}
 */

#sidebar-wrapper h2 {
        background: url(http://cdn.iconfinder.net/data/icons/humano2/48x48/mimetypes/gnome-mime-application-x-archive.png) no-repeat 0px .7em;
        height: 48px;
        font-size: 30px;
        padding: 30px 0px 0px 55px;
}

#BlogArchive1 h2 {
        background: url(http://cdn.iconfinder.net/data/icons/musthave/48/Archive.png) no-repeat 0px .7em;
        font: bold 1em Arial,Helvetica,FreeSans,clean,sans-serif;
    color: $colortituloslateral;
        height: 48px;
        font-size: 30px;
        padding: 30px 0px 0px 55px;
}

#LinkList1 h2 {
        background: url(http://www.forum-gsmmobile.com/images/statusicon/64/forum_old-48.png) no-repeat 0px .7em;
        height: 48px;
        font-size: 30px;
        padding: 30px 0px 0px 55px;
}


#Followers1 h2 {
        background: url(http://www.messageops.com/files/User-group-48.png) no-repeat 0px .7em;
        font: bold 1em Arial,Helvetica,FreeSans,clean,sans-serif;
    color: $colortituloslateral;
        height: 48px;
        font-size: 30px;
        padding: 30px 0px 0px 55px;
}

#Label1 h2 {
        background: url(http://cdn.iconfinder.net/data/icons/berlin/32x32/cost.png) no-repeat 0px 1.1em;
        height: 48px;
        font-size: 30px;
        padding: 30px 0px 0px 55px;
}

#Label1 ul, #Label2 ul {
list-style-type:none;
}

#Label1 li, #Label2 li, .post-labels {
    background: url(http://cdn.iconfinder.net/data/icons/berlin/16x16/cost.png) no-repeat 0px .3em;
    padding-left: 40px;
}



3. Langkah terakhir silahkan Save Tempalte.

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

Referensi Artikel :

1. Add icon beside Sidebar title (heading).
   Link : http://www.blogbulk.com/2009/02/add-icon-beside-sidebar-title-heading.html
2. How to Add Image to Sidebar Titles in Blogger.
   Link : http://www.simplebloggertutorials.com/2010/05/how-to-add-image-to-sidebar-titles-in.html )