Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Feb 10, 2007

Digg This Story

Add Images or Icons to Sidebar links

Sidebars are sometimes crowded with lots of text. There are many ways to make some of the items stand out. In my case, I decided that I will add icons next to the links, to differentiate links from normal text. I will also draw a thin line after each link. To be consistent, the color of these lines shall be the border color.

Note: This is the style we used for our Minima template. Since each type of template has its unique margin, padding and style settings, this guide may not apply to these other templates. You can try to adapt this to your template. Preview the change, and adjust the margins and paddings. Often, a bit of experiment with these values will do the trick. If they still don't look satisfactory, do not save the template.

First, scout around for a picture that you would like to use. In this site, I have used an arrow image. You can use any photo editing software to reduce the image size to about 9px x 9px; I used Google's Photo Editing Software Picasa.

After having an image, upload it onto a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the URL of the Image file.

Go back to “Template” tab and click “Edit HTML”. Scroll to look for the following lines:-

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


Replace them with this:-

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

.sidebar ul li {
background:url("URL OF IMAGE FILE") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $bordercolor;
line-height:1.4em;
}


Remember to insert the URL OF IMAGE FILE into the code.

If you don't want the line at the bottom of every item, delete the border-bottom code (shown in green) or change the value to 0px.

Preview to see if you like the layout. If it is fine with you, Save the Template.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

60 comments:

wendy said...

hi, i don't know if this is the right post to ask this question, but here goes: how did you get your blog archives to show up as titles only sans dates? i opted for the "hierarchy" and "monthly" settings and would like to have at least the last 5 to 7 entry titles visible instead of being 'filed away' and disappearing once the month is over. i only post between 2 to 5 entries per month (and sometimes none) so this may require several months to remain open. as always, thank you much for all the great info on this blog.

bizwhiz said...

Hi Wendy

I am presently using a Link list and not an archive. I plan to group the articles in future and have links only to the main topics. In that sense, a Link list suits me better.

I have not tried tweaking the archive widget because I have not used one. It might be possible to have the posts archived yearly and display the latest 5 entries. If it could be done, it would be ideal for you. Perhaps you may be able to find such tweaks posted on the net. Cheers :)

memo tembelçizer said...

hi, i want to add a picture with a link at the side bar.my english is not good enough so i dont know i mean the riht thing, i want to click on the picture and i want it to take me to some url. i read many of the posts here about links or banners, you tell about the picture url, but you dont tell about the url where the link should take me to. which topic should i read? what should i do?

bizwhiz said...

Hi memo

Would you like to let me know how I can contact you? Can give a detailed note on how you can create a picture link.

CeElle said...
This comment has been removed by the author.
CeElle said...

Hello,
I attempted to add a .jpg to my links, however the text was overlapping. How can I correct this? You have a terrific blog! I am spreading the word!

bizwhiz said...

Hi CeElle

In your template you will see this .sidebar li {
padding:0 0 .25em 15px;
text-indent:-15px;

Try removing the indent and adjusting the padding values. They vary depending on the size of your image.

Candace Dempsey said...

My problem is that my template came with little icons in the sidebar & I would love to get rid of them and/or sub in new ones, but don't know how.

Every time I add a new widget, I get another icon (looks like two little tools stacked together. I don't see this on anybody else's tool.

Help!

bizwhiz said...

Hi Candace

Are you referring to another blog of yours? Your womanatthetable blog is a Minima template and does not seem to have any icons in the sidebar.

In any case, to see the icons, you can go to #sidebar and look for the image URL. If you want to replace the image, you can upload your new image onto a server, and then insert your new link.

Maybe you can let me know which blog or site you are talking about?

Cheers.

Tuki said...

Hi Bizwhiz, your blog is so helpful for me.. I learned a lot of tips here! Now I have a problem, I don't understand why the address of every post is composed by the post title and some text (i don't like this).. well, I'm not using post title because I don't want a link, so I insert title and icon every time I write a new post. Please, can you help me?

Ray said...

Hi! I have the same exact question as Memo : hi, i want to add a picture with a link at the side bar.my english is not good enough so i dont know i mean the riht thing, i want to click on the picture and i want it to take me to some url.
My Email is Ray@elderabusehelp.org
Thanks in advance

Ray said...

Also My Rss feed shows funny characters in the beginning.
I don't know how to fix it!
Any ideas?

bizwhiz said...

Hi Ray

We have since detailed the instructions in the article Hyperlinks and Image Links. You can insert an image in the side bar and link it to an address. In Part I of our article, we covered as well email links.

Saw your RSS feed reader. It didn't seem different from the previous time we looked at it. Maybe you could let us know what exactly is different, e.g., fonts, layout, format? If it is with the code, you may want to ask the source where you took it from whether they had altered it. If it is font, you can vary the typeface and size in the code.

captain1821 said...

Hello! Your blog has been very helpful and I never needed to message you so far...

But it seems that now I have a problem that I can't fix it myself.

Please open your Internet Explorer and take a look at the link lists of my blog http://paid-mails.blogspot.com/
You will see a nice little blue mark before each link.

Now take a look at my blog but this time use Opera or Firefox. The blue little mark is gone!

What is going on here is that when you see the blog via IE, the link lists leave a big ugly gap on their left, which does not happen at Opera or FF.

So what I do is killing the blue thing at Opera and FF in order to reduce the gap for the IE.

Unfortunately I have a lot of visitors that use those 2 browsers...

The code that I use and I believe that affects this matter is this:

#sidebar1 ul {
list-style-type:none;
padding-left: 0;
margin-top: 0;
}

#sidebar1 ul li {
background:url("http://www.blogblog.com/tictac_blue/tictac_blue.gif") no-repeat 1px .55em;
margin:0px 0px 0px -15px;
padding:0px 0px 3px 16px;
margin-bottom:1px;
list-style-type:none;
font-size:95%;
}


this "-15px" affects the gap.

I hope you can help me fix this.

Thanks a lot for your time and this wonderful free blog!

bizwhiz said...

Hi captain1821

Try changing the margins in both #sidebar1 ul li {
and
#sidebar2 ul li {
to

margin:0;

We can't gauge the margin adjustment since we don't have a sand dollar template which is what you are using. The usual way to adjust is to set to 0 and then add values a little at a time.

captain1821 said...

Thanks for the reply!

Well, this will fix the problem for Opera and FF, but it will make worse the problem with the gap at IE.

The sand dollar template with 2 columns is available at blogger but if you want I can mail you the code from the one I use.

bizwhiz said...

Hi captain1821

We can set up another test blog with a Sand Dollar template. But even with we adjust the margins, it may not apply to yours, which is a modified three column template.

When we do one for our three columns sand dollar template article, we shall look into that as well.

Jerkolas said...

Hey this looks like a great help resource. I was hoping you could help me with a small problem. I just started a rounders 2 template blog and I have posted a few pictures in page elements on my sidebar. Each of these pictures rests all the way to the edge of the sidebar (the right side) and I would like them to be centered in the sidebar. I have been fooling around with margins and padding and borders in the html, but I am not getting anywhere. Can you offfer me any suggestions?

Thanks

rastina580 said...

First, thanks for all your blog help. You've opened a whole new fun world to me. I've gotten as far as getting my image in the correct position and size for my link list, it's just not putting the image next to my link list. It's putting it off on it's own. What am I doing wrong?

bizwhiz said...

Hi Jerkolas

You want to let us have your Blog URL since it is not in your profile? We can take a look.

bizwhiz said...

Hi rastina580

Are you referring to the red heart next to your links? I assume you have solved the problem coz they are currently aligned to your links.

Jerkolas said...

Yeah, sorry it is:

http://jerkolas.blogspot.com/

Thanks for the help.

Tom

bizwhiz said...

Hi Jerkolas

Try ticking the "Shrink to fit" option when you upload the image. Then position the image with this guide Style and Position Sidebar Images.

rastina580 said...

I thought I'd have a red heart next to each link like you have the arrow next to each link...I still don't think I have it right. Any other suggestions?

bizwhiz said...

Hi rastina580

I am able to see the hearts next to each of the 4 links in your blog. Would you like to ask your friends to view it too? Don't know if it has to do with your browser settings.

Jerkolas said...

Thanks for the help, but it still doesn't move the pictures (although my profile picture is getting moved around by doing this). I have the shrink to fit, but could my pictures still just be too big?

bizwhiz said...

Hi Jerkolas

Your gallery pics look fine and exactly centered. Have other people take a look with their browsers. It may not look the same with different browsers (IE, Mozilla). Little we can do about that.

Anonymous said...

Hi,

I downloaded daily dilbert with a .widget extension from download.com and wanted to add it to my site pref at the top under my text for my site, is this possible and if so, how?

Thanks!

bizwhiz said...

Hi Anonymous

Is that a script document? Ending with extension .js? You can view it in Notepad and copy the code. Under Template ->Add a Page Element, add a HTML/JavaScript element and paste the code. Not all scripts work on Blogger platform. If it doesn't, you may have to raise your query with the provider of the code.

Missladybug from ladybugandco.blogspot.com said...

Thank you SO much for putting together this highly readable and helpful site. I am new to blogging and am going thru your site, tip by tip, to learn and do new fun things with my site. I have one small question. The right margin on my blog is too small, and the ads/widgets are too close to the text. How do I move the text closer to the edge of the page? I'm also trying to add another column to the other side of the page as well. How do I do this? Thank you so much!
(My blog is: http://ladybugandco.blogspot.com)

bizwhiz said...

Hi missladybug

If you want a space in the sidebar, you can go to Template -> Edit HTML and add a margin under here:-

#sidebar-wrapper {
margin-left: 10px;
margin-right: 10px;

Change the figures if you'd like and preview the template.

As for adding a sidebar, we have the Three Columns Minima Template guide.

Monica said...

Hi bizwhiz,

I LOVE your blog!!!

ICLfan said...

thanks, as always able to do that. cricket-fan-india.blogspot.com

Charles,怡文,Virginia 藹伶 said...

Thank you for your blog that I found so helpful to me! I want to add little icon to my sidebar link, but the template I use now is the "scribe" one. Can you tell me how I can do that?? Thank you sooo much!

bizwhiz said...

Hi Charles

It is no different. Under your template, you should see this:-

.sidebar ul li {

and add under it the background image and adjust the padding (spacing):-

background:url("URL OF IMAGE FILE") no-repeat 2px .25em;
padding:0 0 3px 16px;

You have to try it yourself because image sizes differ and the values are not the same.

Cataleya said...

Hi, can you pls tell me how I can get my blog to have tis feature I saw in another blog that can list pix of their current reading/listening list?

This is the blog :-
http://bossacafez.blogspot.com/

Under Currently Enjoying.

Sorry, am showing someone's blog to you, its a great one by the way!

Tks!!

bizwhiz said...

Hi Cataleya

You can put the pictures into your blog using HTML image link codes. There are also third party services which provide you with widgets that can be inserted into the blog. If you need a definite answer, you can ask that blog owner directly.

Casey said...

This blog is so helpful! Thank you so much for sharing so much information!

My question is that I would like to put images in a list of links instead of text. I'd like the list to show images that you click on to take you to another page. I know how to insert images like that in the sidebar, but not all in one list with a heading above. If that's not possible, is it possible to put a different image next to each link, instead of all the same (ie: arrows)?

Thanks so much!

bizwhiz said...

Hi Casey

Image link codes are found in the Hyperlinks and Image Links article. Insert the image codes and separate them with <p> so that each image link will appear on a separate line.

Profile said...

Once again, you continue to help me with all the 411 on your site. How do I add "Add to Google" and "XML" chicklets? Also, is there any way to keep them all tidy in the sidebar and not as far apart?

Thanks,
http://girl-woman-beauty-brains-blog.blogspot.com/

Gyry said...

By all hi!!!
I from Russia. I am sorry for my bad English!!!
At me the question because of what events occurs increase PR of a site?
At me on a site PR-2 why so happens...
http: // zarobotay.blogspot.com/
Whether it influences search???

manan said...

hi, bizwiz

i m unable to put these images in side bar.

my template is harbor , plz give me the exact code.

when i put ur code it shows wrong template soemthing is missing.
plz help

Sandee Foxten said...

Hi! I would like to say thank you for this blog! It is extremely helpful and I have found info here I have been searching for since I first started blogging about a year ago. I have a comment on the question posted by Wendy. Up until a few weeks ago, I had the same problem with my archives. I hate the options Blogger gives you. All I wanted was just a simple list of my posts to show on my blogs without having to use the link list and type all the post address in. I found this site that all you do is enter the URL and choose a few options and put the code in the html of page elements. The website is http://itde.vccs.edu/rss2js/build.php
You can view my post list at http://livedrugfree.blogspot.com

horatio salt said...

hi. your site is a tremendous resource. thanks. i've modified my minima blog to add the newsidebar using your instructions. now i'm trying to get the dotted separator lines under each link. they appear for the sidebar on the right, but not for the newsidebar on the left. got a tip? thanks...

horatio salt said...

ok. i figured out the problem i posted about here an hour ago.... i was trying to put a separator line between each link in my sidebar - but i was trying to do it in an html page element. should have been using a link list. your code works brilliantly now. thanks.

coco said...

Hello, is there any way where i can link my labels to an image. Whereby, after clicking on that particular image, it takes me to my multiple posts under a similar label.
Thank you so much! Tips for new bloggers really helped alot in my blogging. Cheers x)

chikki said...

hi! your blog is my life!
please tell how do i put a line after every label as u have put dotted lines
http://skinfacts.blogspot.com/

Carson Ding said...

Hi bizwhiz, you have a great site here and have shared so much about tweaking blogger's template.

Thank you so much.

Yesterday, following your instructions, I have added a favicon and icons to sidebar links. I was happy that I could see them on Firefox.

Today, still using Firefox, all those wonderful icons are gone!

Can you please tell what is the problem? Grateful for your help.

Carson Ding
Unit Trust investment

UncleJesse said...

My image is a 125 x 125 banner. What do I change in the code so it will format correctly?

ODARA said...

Hello... I Love This Post...

I'm having a slight problem with adding an icon in my recent post widget. I've tired adjust the padding, margins everything but the icon never shows...how can this be fixed. I appreciate your time...Thanks...

Trantor said...

Hi bizwhiz, great blog

i´ve lots of images ( links) and want them to appear side by side , in horizontal.( like you have in your blog )
but they apear in vertical , another line

i can i do that ?

tks

Hugo

David Aragon said...

Hi there,

Your hack worked fine in my blog, but theres a litle problem: it removed all my widgets' title icons. Thank God I had backed up before, lol.

How can I add this cool feature to my blog without changing my widgets' title icons?

My blog:

ujsceara.blogspot.com

My email:

ujsceara@gmail.com

Best regards from Brazil!!!

eSpicer said...

Hi, bizwhiz!

Well done! Its a high quality top information blog! I really enjouy reading this :)

However, I found myself in trouble to put nice little arrows pointing to my links(just the ones like you have).

I am pretty new to blogging and would appreciate your help. Thanks for taking your time to reply.

Russ said...

Hi bizwhiz...
Don't mean to be off topic here, but I've looked everywhere for a simpler solution. My only problem with images are that when people LEFT CLICK an image it takes them away from the site, and opens in the next window with that image only. I hate that when that happens! How do I "hide" image links so that it doesn't get "the finger" when one scrolls over it? Or, more importantly so the image won't open, and the site stays on the current page?
Thank-you O' great one!

Arbitragemwppt said...

Hi Bizwhiz
I've trying to create an easuer way for people to findo some messagens and articles in a blog I'm creating for a friend.
I wanted to place an image on the side bar with a link to a TAG on those messages.
like this, people that wanted to see all messages related to that tag would click on the image and see all the messages with that tag.
I've been reading everything but I could not foun anything about this for the sidebar.
Can you help me?
Thanks

Dea Carvalho said...

Hi there!
I'm loving yer blog.
I have a question: I have moved my blog archive from the sidebar to a fotter column.
What can I do to add a image on these links?

Thanks.

Hetal Patil said...

I want to add arrow icon besides links in side bar. I have centre aligned the side bar elements. I tried adding the arrow like its in ur blog, but in some place the icon is over lapped by the words and there is no space left between the link and arrow. It creats a confusing effect. I am using stretched denim template. The lines in between the comments and links in sidebar looks awesome. Great Job u r doing.
Please mail me on hetalpatil(at)saimail(dot)com

Jodi said...

Can you please have a look at my blog, and let me know how to extend the columns to the edges more? Thank you!

Clare said...

Hi There!

Thank you so much for all your help with my blog. I have now been able to change the font and add link tabs to the top of my blog because of your great advice. This may seem like simple stuff to some people, but I didn't know where to start. I have put a link to your blog from the post, so thanks again.

Love, Clare x

Nancy Pelshaw said...

I made my icon for my blog address.I cant seem to get my .ico file uploaded into my picassa web album. I upload it but I cant see that it is there in the album..is Picassa not recognizing .ico files? What am I doing wrong?