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(http://4.bp.blogspot.com/-U2m_Cmz2-TQ/T1Sri-d6BtI/AAAAAAAACVg/SQ0FkwwJjz0/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!
I would love to do this, but the code is cut off at fea … in your post. Maybe just on my iPhone? I’m loving your blog, btw!
Thanks for the fix. I love your site! You’ve helped me a lot the past couple days!
Cheltz recently posted..Tales of Daring: The High Dive
Just did it on my blog! It look lively now. Thank you!
Hi, your blog post about blog design tutorial is awesome!!!
)
I have practiced them to my blog and it looks even better now.
Please check it out if you have time
Keep posting!
Indispensable Lady recently posted..A Love Note