Add icon beside Sidebar title (heading)

February 10, 2009

This time, we'll learn how to place a small icon or picture right beside the Sidebar widget/gadget title...
In the article Blogger sidebar titles customization, you saw how to customize the background of the titles, add some borders to it, or replace it with picture..
Now, we want to achieve this:
There are 4 steps to get this working:

1. Find the icon (picture) you like, optimize it
2. Upload the pic to a free web host (to get the URL)
3. Make a CSS style for the sidebar headings (titles)
4. Play with the CSS style (customize)

***

1. This is a fun part. Find the pic (icon) you like, design one, crop it, cut it, color it.....Two things you should take care of:

► size of the icon - keep them small, like 25x25 px...This is not a rule, and the ratio is not important (you can make 25x10px..). Trial and error. You'll get it...
► transparent pic or not? - I suggest NOT to use transparent pics. Rather make a pic with a background that has same color as your sidebar background color (so they blend together).
Transparency is great, but older Internet Explorer browsers do not display them properly. And lots of folks out there are using those. Still....

***

2. When your pic is ready, next thing is to upload it to a free web host. We do this in order to get the direct link of our hosted pic, so we can use it (link to it) from our template...Free picture (image) hosting providers (my favorites):
photobucket.com
tinypic.com

Create an account, upload pic and get the link (direct link)...

***

3. Now, we have to create the style for the sidebar headings in Blogger HTML. Don' worry, it's just cut-paste job...with a little tweak..
Default style for sidebar headings (titles) already exists in templates, but in default Blogger templates (like Minima) it defines the style for the date heading also. So, we have to divide those styles...Anyway, you can either have a:

► default Blogger template (the one from Blogger Pick a new template) - you'll have no problem with this tutorial
► customized, third party Blogger template - you'll have to identify your sidebar headings style in the HTML code (CSS), and then customize it...Usually, these templates already have a nice clean code, and the styles are divided, so, you won't have problems...

Here's what you have to do:
First, back up your Blogger template. Then go to LAYOUT ► EDIT HTML ► and insert the new code (in orange) ABOVE the existing code (in pink):

.sidebar h2 {
background:url(URL OF HOSTED PIC);
background-repeat: no-repeat;
background-position:left center;
height:25px;
margin:0;
padding:10px 3px 0 30px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}


]]></b:skin> </head>

***

4. Let's analyze (and customize) our new sidebar heading (title) style:

► you have to replace URL OF HOSTED PIC with your uploaded picture (step 2)
► adjust the height corresponding to your picture (icon) height...if your pic height is 40px, then the line would be height:40px;
► with padding, you can adjust your title (textual part):

...for example, if you increase top padding to 20px, this will push the title down,
...and if you decrease left padding to 20px, this will pull the title to the left...
...it seems weird, but you'll get it..

► with other styles (you can also add some more) you can adjust the uppercase (CAPS) to lowercase, letter spacing (space between letters in title)...

That's it! If you'll have some troubles, scream! I'll help.