Add Image Icon Beside Sidebar Titles On Blogger

Posted : Sunday, January 09, 2011 | Post Author : Paul Crowe | 13 comments

best blogger design tipsIn this post i have a neat Blogger design tip for your blog.With just a small snippet of Html code we you can add an icon beside the titles on your Blogger sidebar gadgets.This looks great and also helps helps your sidebar appear less cluttered.You can add any icon you like the only restriction will be the size of the image you use as it needs to be similar in size to the Title Text size.So lets look at a demo i created, i have added a simple Green Star Icon beside the titles in the demo.

Live Demo – Click To See Demo : Image Icon Beside Sidebar Title

Add Image Beside Sidebar Titles Blogger

Step 1. In your Blogger dashboard click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)


Step 3. Copy and Paste the following code Directly Before / Above ]]></b:skin>

.sidebar h2 {
background-repeat: no-repeat;
background-position:left center;
padding:10px 3px 0 30px;

Note – You must now add the image URL for your icon.Replace IMAGE-URL-HERE with the image you want to display.

Find Images – Google image search is a quick way to locate the right size image.When you search Google images you can use the options on the left to choose the exact size you want to find.

Once your happy save you template and check out the Sidebar Icons.Be sure to check out more of our Best Blog Design Tips.


  1. Excellent just what i was looking for I’m sooooo glad i found your site.


  2. Http://
    Very nice trick bro


  3. I followed the instructions but the icon I want to use isn`t showing on my blog….please help!


  4. @ Erii – If you followed the steps it works you must have gone wrong along the way I’m afraid.


  5. i add this, but title are appear above the icon 🙁

    what to do?






  6. i do have the same problem before, i guess u just need to messing up with the codes a little bit more..
    maybe this will help

    .sidebar h2 {
    background:url(“ur image url here”) no-repeat left;
    padding-left: 30px !important;
    background-position: 0 -1px;

    the code 30px is the space between the title and the icon, just increase that to give it more space



  8. @ Harri – You can see the padding in the code is currently 10px 3px 0 30px – this is in order 10 top 3 right 0 bottom 30 left.You can increase this to give more space were needed.a


  9. @Paul Crowe you are Genius Dear
    Thanks & Keep Sharing With Us 🙂


  10. What does the size need to be?


  11. @ Tweetypie65 – Would depend on your template but around 16×16 to 24×24 should do.


  12. Thanks, I’m a complete novice to blogging never mind html and I found it easy to follow. Keep up the great work. PS I was searching around blogs for different ideas when I hit on your blog and up popped a wee note in the bottom right corner with just what I was looking for, magic.


  13. How do you change your comment style yo that plz tell me and sorry for bad english I am from Pakistan


  14. do you have any other tutorial? it works for me thanks alot!