Icon Variations on Sidebar Titles

Have you ever seen a blog with icon variations of one widget with another widget?
Indeed, the icon variations seem to be interesting because actually the sidebar title has no icon. The icon of one widget will be the same as the other one. In order to have the icon variations on Sidebar Titles, there is a little trick to do.
If you are interested and want to know how, the following trick may be very useful for you to get the description how to install your favorite icons onSidebar title.

#1 Choose your favorite icons
Please prepare your favorite icons or if you do not have any, you can download the icons for free on the Internet. As reference, I have posted about some free providers. You can read here at Free Icons For Website and Weblog or at Need Icons for your Blog? Find out at Icon Finder.

As the examples, some icons that I use are:

 

Please upload those icons to your free image hosting as usual. If you are still wondering how to upload the images or pictures, please read my articles about  How to Make a Logo and Image Button or Make Google Site as file hosting
Below are the examples of some image/icon addresses (URLs) from uploading:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQk0pfu7ANIRj6hlwgwAftbg9oSoJ1vbMp92hJuw9mEZiip3wqbcszSqFjqZtcriNdc4XP1-7YWh6_m-uduT_2bgQS-WjfewYrliOPlCxis6BFHHh6x6Cq71QAmn7QemQpEMiFY47Yn8/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogMCoI0iz5ZxAiEue0K-zWw5p4sQ0eC8AXuyuZPMx4dJLdZeFlHsU9TlZ4LHpFdLwGkVh2V-jIUMCimSzC21AdpSsFKhA5EO4iAFhtmR1hi8P6OTN1gu0447tCPI0wKMMU9QUPKyLIlI/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjQImitms-N96HOBYKv_Ljs8f-6tCC_ovdGmGCflq4MtP1FxVTwxT88UP2oR0VKTFL8E3ROzfBws7mz4soUslsySzgWbZE9_gMNSBNHVOS56mNG2OAquXT_o-w3MsmwXibRK2fzA1Wk4/

Please adjust the number of icons to be installed. As the example, I will explain how to install three icons.

#2 Find out the Sidebar Widget codes
The second step is to find out the widget code in your template, which ones you want to add the icons. Below are the steps:

• Please login to blogger with your ID
• Click Layout
• Click Edit HTML
• Find the code similar to: 
  
  
  
  
  
  
  
• Every blog may have the different codes, so I say the ones that are similar to above code. Copy the codes on Notepad or the other text editor.

from above example, my blog has five widgets, what you have to notice are the red and orange printed words, namely:

• Profile1   -    About Me
• Label1    -    Categories
• HTML2   -   Friend Llinks
• HTML1  -  Sponsors
• BlogArchive1  -  Blog Archive

The red-printed ones are the IDs of the widget and orange-printed ones are the titles of the widgets on the titles to be appeared on Sidebar.
As an example, I will only install the icons on widgets with IDs of Profile1, Label1, and HTML2.

#3 Create CSS code
The third step is to create the CSS codes for Widget IDs as mentioned above (Profile1, Label1, and HTML2). The property to be created is very simple. You only add the “h2” at the end, e.g.:

#Profile1 h2 { }
#Label1 h2 { }
#HTML2 h2 { }
 
For the values, you can customize and adjust yourself, but as the examples, see below:

#Profile1 h2{
background:transparent url(ImageURL) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(ImageURL) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(ImageURL) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}

For ImageURL you certainly need to replace with your own. But as an example, I will use the image/icon URLs as I have written above, so the codes will be:

#Profile1 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQk0pfu7ANIRj6hlwgwAftbg9oSoJ1vbMp92hJuw9mEZiip3wqbcszSqFjqZtcriNdc4XP1-7YWh6_m-uduT_2bgQS-WjfewYrliOPlCxis6BFHHh6x6Cq71QAmn7QemQpEMiFY47Yn8/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogMCoI0iz5ZxAiEue0K-zWw5p4sQ0eC8AXuyuZPMx4dJLdZeFlHsU9TlZ4LHpFdLwGkVh2V-jIUMCimSzC21AdpSsFKhA5EO4iAFhtmR1hi8P6OTN1gu0447tCPI0wKMMU9QUPKyLIlI/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjQImitms-N96HOBYKv_Ljs8f-6tCC_ovdGmGCflq4MtP1FxVTwxT88UP2oR0VKTFL8E3ROzfBws7mz4soUslsySzgWbZE9_gMNSBNHVOS56mNG2OAquXT_o-w3MsmwXibRK2fzA1Wk4/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}

#4 Install the CSS code
Since we have gotten the CSS codes we need, the last step is to install the CSS codes into your template. Below are the steps:

• Please login to blogger with your ID
• Click Layout
• Click Edit HTML
• Find the code ]]>
• Copy and paste the following codes above the code (Remember that Widget IDs and the URLs must be replaced by your own codes from your blog) #Profile1 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQk0pfu7ANIRj6hlwgwAftbg9oSoJ1vbMp92hJuw9mEZiip3wqbcszSqFjqZtcriNdc4XP1-7YWh6_m-uduT_2bgQS-WjfewYrliOPlCxis6BFHHh6x6Cq71QAmn7QemQpEMiFY47Yn8/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }
  #Label1 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogMCoI0iz5ZxAiEue0K-zWw5p4sQ0eC8AXuyuZPMx4dJLdZeFlHsU9TlZ4LHpFdLwGkVh2V-jIUMCimSzC21AdpSsFKhA5EO4iAFhtmR1hi8P6OTN1gu0447tCPI0wKMMU9QUPKyLIlI/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }
  #HTML2 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwjQImitms-N96HOBYKv_Ljs8f-6tCC_ovdGmGCflq4MtP1FxVTwxT88UP2oR0VKTFL8E3ROzfBws7mz4soUslsySzgWbZE9_gMNSBNHVOS56mNG2OAquXT_o-w3MsmwXibRK2fzA1Wk4/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }
  
• Click SAVE TEMPLATE
• Done

It is very easy, isn’t it?

In order to suit your template, please replace the values of padding or margin.
padding:8px 8px 2px 40px;
margin-top:15px;

Hope You do it all right !!! 

Print Page