Tutorial~Add icon beside sidebar title

It’s quite easy to add an icon automatically to each sidebar title, which is by modifying your template CSS code. Here’re the tutorial:

Prepare icon image

As the first step you should do is to prepare the icon image you want to install, you can create yourself or download through free icon provider sites. Some of the free icon provider sites are:

• http://www.iconspedia.com
• http://www.freeiconsweb.com
• http://www.vistaicons.com
• please search in Google using “Free Icon” keyword for other sites

For example, the icon will be installed like the following:

Suggested, the icon size that will be installed is 16×16 or 32×32 pixels .

Upload the icon to blogger

The second step is to upload the icon to blogger. The icon/ image upload tutorial has been written in How to create Image Gallery using Blogger Post tutorial. If you has uploaded the icon, copy the icon address, this step has been described in Create HTML Code to Display Image on Blog tutorial. For example, the icon addres i had is:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheKlao6CZvNSHJnjXnf0Z2CEoCuY4Tbk0aQ8yRbD2ycVhvNP5hoBLNfYiN2KxU36dqspvsyyNvuDr1104LfDYarz4CriydC0EDQZ-W67rZbOikyuwZGuSdVGaNjnimhke7ikX26GU6aM8/s1600/love.png

Add the icon code to the template code

The last step is to add the icon code you had to the CSS code in used template. However, need to be noticed that the template code is different for each other, but generally the sidebar title code is uding heading 2 (h2) code. Example:

• h2 { ….. }
• #sidebar h2 { …. }
• etc

Note: to practice the following tutorial, you are suggested to use a trial blog and use Simple Template. Read about create trial blog here at Create Multiple Blog In One Blogger Account.

To make it easier, I use Simple template in this tutorial, that is default blogger template. Here are the steps:

1. Please login to blogger using your ID
2. Click Design
   
3. Click the Edit HTML sub menu
   
4. Do the back up for yout template first by clicking Download Full Template
5. Find the following code (remember, it just an example by using template called Simple)

   h2 {   margin: 0 0 1em 0;   font: $(widget.title.font);   color: $(widget.title.text.color);   text-transform: uppercase; } 

6. Add the additional CSS code for the icon and the code will be as follows:

   h2 {   margin: 0 0 1em 0;   font: $(widget.title.font);   color: $(widget.title.text.color);   text-transform: uppercase; } .sidebar h2 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheKlao6CZvNSHJnjXnf0Z2CEoCuY4Tbk0aQ8yRbD2ycVhvNP5hoBLNfYiN2KxU36dqspvsyyNvuDr1104LfDYarz4CriydC0EDQZ-W67rZbOikyuwZGuSdVGaNjnimhke7ikX26GU6aM8/s1600/love.png) no-repeat scroll left center; padding:10px 0px 5px 38px; } 

7. Click Save Template
8. Done

Example result:

In addition, for suitable icon display to the template condition then you can change the padding value.

padding:10px 0px 5px 38px;

Good Luck!

Search Post

Label :