Add Image Icon Beside Sidebar Titles On Blogger

In 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 ]]>

.sidebar h2 {
background:url(IMAGE-URL-HERE);
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.

Drop Your Comments, Views And Questions Below.