TechFlaps | Waves of Technology

Recently I published two articles which brought before you set of Icons and web buttons that you can use in your blogs and web sites. After reading the article, one of my friends and a reader of this blog sent me a mail asking how can we make use of these icons in our blogs.

This post will tell you how to use Icons in your blogs to enhance the style and appearance of your blogs. Icons are used in blog and sites mostly in two parts. One, they can be used instead of link texts, that is, instead of having a text link to one of your posts or an external blog/site, you can put an icon or button. This is pretty straight forward use and can be done by anyone.

An example of using icons or buttons as links is as given below. Click on the icon and it will take you to the RSS Feed for this blog.

The code for this is a so simple as given below

<a href="http://feedproxy.google.com/feedburner/JOZS" title="Click here for the RSS Feed"><img src="http://i288.photobucket.com/albums/ll161/templatehell/main/ico-arcfeed.gif" border="0"></a>

Now the second use is as background for headers and some other information. You can see the user icon shown below the post title in this blog, just before my name. You cannot click this as this is specified as the background for the division which holds my name. Well, this is also pretty simple and the background is defined in the CSS.

We will see how to add an icon as background to a post title. We already have an article published on how to edit post title in your blog. For this we need to find the style definition for your blog's post title or header. This usually comes in the style sheet of your blog template. If you are using a customized template, chances are that the style is defined in the title tag (<h2>) itself.

To do this find search for and find

<data:post.title/>

in your blog's template code. This XHTML tag is normally wrapped inside a

<h2 class="CLASS_NAME"/>

or a

<h3 class="CLASS_NAME"/>

tag. This differs from template to template. But in almost all the cases it will be either and h2 or an h3 element. Also chances are that this will be like

<h2 id="ID_NAME"/>

or a

<h3 id="ID_NAME"/>

.

At present the header will look like this as given below, without any backgrounds. Just a plain header.

THIS IS THE POST HEADER

Once you found this tag, get the CLASS name or ID name, in the example above it is

CLASS_NAME

, as specified in your blog's template code. Search for it in your blog template's style sheet. If it is defined as

class="CLASS_NAME"

, it will appear as

.CLASS_NAME

, or if it is defined as

id="ID_NAME

,
then search for

#ID_NAME

.

If it is defined as a CLASS then the style should be defined as given below. There might be difference in the contents, but it will be wrapped like this.

.CLASS_NAME {..................}

If it is defined as an ID then it will appear as given below.

#CLASS_NAME {..................}

Now check whether there is a property called

background

defined inside this. This normally comes like this.

background: #ffffff; /*background color*/

Change this as given below

background: #ffffff url(URL_OF_THE_ICON_WHERE_YOU_STORED_IT) no-repeat left;

Replace URL_OF_THE_ICON_WHERE_YOU_STORED_IT with the URL of the icon you want to show as the background.

This is the resulting header, with a background icon added to it.

THIS IS THE POST HEADER

As you can see, the heading comes above the background and it hides the background. we don't want it to happen like this. We need the background also to be shown.

For this, find for the

padding

property inside the style definition.We need to change this also so that the image is shown before the heading, not below it. We have to move the header a little bit to the right so that the background is shown. At the end of the CLASS or ID definition add

padding-left: 25px;

as given below. Take care that you place the line above the

}

, the closing parenthesis. This is to ensure that if there is some left padding properties defined inside this CLASS of ID, this will override that definition. So the resulting code will look like this.

.CLASS_NAME{

..............
............
existing properties
............
............
background: #COLOR_CODE url(URL_OF_THE_ICON_WHERE_YOU_STORED_IT) no-repeat left;
padding-left: 25px;
}

OR

#ID_NAME{

..............
............
existing properties
............
............
background: #COLOR_CODE url(URL_OF_THE_ICON_WHERE_YOU_STORED_IT) no-repeat left;
padding-left: 25px;
}

Replace the #COLOR_CODE with the color code for your blog background or the background color of your choice. Also replace URL_OF_THE_ICON_WHERE_YOU_STORED_IT with the URL of the icon you want to show as the background.

THIS IS THE FINAL POST HEADER

You can increase or decrease the padding-left depending upon the size of the icon you are using as the background. Also please take sure that you don't make changes to other properties which are defined inside the CSS CLASS or ID.

You can download excellent and beautiful icon sets from here.

1. 10 Free Web Icon and Button Sets for Web Designers
2. Coquette Part 2 - Free Icon Set for Download

Hope this will help you to understand how to make use of icons and buttons in your blog. This background property can be used with any of the element, like the sidebar header, the comments header etc.

Let me know if you need any help regarding this and will be happy to assist you in that. Please leave your suggestions, questions and comments.