Blogger Tutorial - Add an Image to Sidebar Titles

Over on my other blog All These Pretty Things I have added a cute little feather to the start of my sidebar titles. this is a great design fluorish and makes the items in my sidebar stand out. so today I'm going to show you how to achieve the same thing on your own blogs. Of course you can use any images you like.

To start with you'll need to create your image in your photo editing software of choice. I made mine 40px high and 80px wide. Upload your image to photobucket and grab the direct link. Make a note of this url.

Log into blogger and navigate to the template designer. Click on advanced and select add CSS. Paste the following code into the CSS box.

.sidebar h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5KnsQeyX7wWhEAAApf6l6Vxjn1tc1pC8usxBuO1kb7EXOG3AE4clXyBJxK5bxHPivN10ifXSefLvAPyTJwgZJuj2UPzE9tCdqoochAmIr6aU4O4OwPdFxDIY0mfnCUC07Y-AWBOH2QI/s1600/feather.png);
background-repeat: no-repeat;
background-position:left;
height:40px;
margin:0;
padding:10px 3px 0 80px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}

Replace the bolded url with the direct link you made a note of earlier.

Change the height to the height of your image and replace the '80px' on the line padding: 10px 3px 0 80px with the width of your image.

Press apply to blog.

You should now have an image next to your sidebar titles. easy peasy!