2008-05-13

Blogging Tip : Place icons to your sidebar links

Great way to customize your sidebar is by pointing an arrow to your sidebar links. To achieve this, you need to have an arrow picture of 9x9 in pixels exactly. Upload the picture onto your free image hosting and you will be getting your direct link for the picture like this:-

http://i44.servimg.com/u/f44/11/94/91/
73/arrow210.jpg


Below is an example of the steps you will need to take:-

1- Click on Dashboard> Layout> Edit Html
2- Find this following lines:-

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

3- Remove the above lines with these lines:-

.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar ul li {
background:url("YOUR IMAGE URL")no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px SOLID #000000;
line-height:1.4em;
}

(Note: the line in red is for you to place your image url and the line in blue is meant for the border thickness, color of the border and type of the border. If you find it unnecessary, please either you change the number from 1 to 0 or else you may delete that particular line)

4- Save the template.

0 comments:

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L