adding clickable pictures on blogger sidebars,blog posts,etc.
Posted by kranthi on Tuesday, December 18, 2007This post shows you how to add pictures,clickable images,images(open in new window),etc.
If your site is full of text,then it will spoil the look of your blog.So,if you add some pictures here and there in the sidebars in your blog,then it will give your blog a professional look.
Let's see how to do it.
Adding a picture(unclickable one):
First upload your photo to any free image hosting site like photobucket.com.They will provide an url(link) directly to the photo.Take a note of the url and use the code below replacing the url( from http to jpg) in the code to your original one.(Set your own dimensions to suite your needs)
The image looks like this(unclickable)

Code to add a clickable image:
Here is the code to add a clickable image(open in the same window)
In the above code,kranthitips.blogspot.com is the target url(replace that url with your desired target url) and
the image url aswell(set your own image dimensions).
The output image will looks like this
Clickable image(open in new window):
Here is the code for it
The output image looks like
(click on the images if you want to test)
If you want to add the pictures in sidebar,sign into your blogger account>add a page element>html/javascript>paste the code and save the changes.
If you have any doubts,you can ask your questions via comments and get the answers.
Subscribe to:
Post Comments (Atom)








46 comments:
you are the best,this helped a lot thanks!
very useful information....very helpful to the newbies like me
-thanks
----
Lee
Great tricks !!!. I have tried some on my blog. Thanks so much.
How can I host an image on blogger.com and link to the site.
in a blog i want a text hyperlink which when clicked shows images..now these images r in ma computer.so how shud i do dat..means do i hve to upload dem at sme site or is thr any way out lik posting dem at ma blog smewhere n from thr i hve to make a hyperlink!!!
Another gr8 article.. loved it!
awesome! i used this on my site! ;D
I have taken a print screen of an image (for example an image showing how to do a function in Word -- so it might be of the toolbar or a dialogue box). How do I put that image into Blogger into a post? I have saved it as JPEG and that does allow me to put it in there, but it is too small (I am saving it through Paint). I see it on other sites so I know there has to be a way to do it, but I can't figure it out. Help!
@ Patricia,
What's the width and height of the template?? You can use this method that I discussed in this post for any picture. If the pic is too small, increase the width and height values in the code.
Guess I am still such a "newbie" I can't even add a google gadget to my blog!! I cannot figure out where to paste what I have copied. I have just got to learn how to easily add photos as that is mostly the reason I started it.
how to keep an old post on the top of new one?
please
i tried to link a picture site into my blog using photobucket. my problemn is, i want my subscribers to go directly to the site at phtobucket without them registering there...is this possible? my goal is to create a photo directory for my blogs using webhosting like photobucket. how will i do this? thanks.
Awesome..Will add this to by blog soon...
i tried the code but it didnt work. well didnt work as in my picture did come out but when i scoll my mouse on the picture it didnt show "name" and there's an unshown picture on top of my picture. what's wrong with it? =/ please help
I've tried and success..I also translate in my language...and I repost it...
I put the direct link here to this page
Thank U
Thanks for your tips on the sidebar image & scrolling marquee. I've put them on my blog and they work perfectly! I will add this to my blog...
How to add picture with the blog tittle?
I am able to upload photos via blogger but they are not coming up in search engines do you have any ideas
Good post! hope to see you at sharefortuneblog!
Hi I added a background image to the header via page elements. It is behind title (which links to my home page) and description. I want to make the image link to my About Page. Cant see any reference in the template to the background image so dont know how to add any HTML. Any ideas?
Really Really Usefull site...
Thanks a lot.
I've just come across your 'answer' re: clickable pictures. What I would like for my blog is to have clickable buttons for 'Home' page etc. At present I have to click 'older posts' at the very bottom of my blog to go to my other page. Then vice-versa to get back to my home page. I would like a button format in a more prominent position, possibly the sidebar. Can you help?
Thank so much!
thank you!! i've been wondering how to add a clickable photo to my blog--worked on the first try from your directions!
Hello,
I just went to add a page element and selected add a picture.I downloaded my picture from my desktop then it asked me to enter the url where it takes after the click.
the only problem I have is it does not open in a new window if you have a solution to that it I will be grateful
Thanks
Brilliant! Really clear and helpful.
Thanks for this wonderfull tip its working well
thank u
This is good to know! Do you have any suggestions on how to make a scrolling slideshow that can be used as a widget on the top of the page? Maybe the photos can be clickable as well?
Great!!!
Good site! I'll stay reading! Keep improving!.
Thanks
hi
its a gr8 job done by you
i was in a gr8 need of these ... you have made my day.
thanks for sharing ur collection with everyone.
tank for this help
Thanks this really helped me
can you tell me how to use this trick ( link open in new window ) within bolg main text
thank you
thank you for putting this info out there!
Ok. I'm worse than a newbie. I'm 62 and only barely computer literate - think remedial. I design and sell jewelry on several sites, one of which doesn't provide a widget. Using the clickable picture code above (very simple to understand), I now have a beautiful clickable widget to my shop. I love you! If you want to take a look, here it is: http://jbebert.blogspot.com/
The widget I made is the one to 1000Markets. Yaaay!
wow. excellent. thank you. mapaapa.blogspot.com.
How can I add a date to my posts..?
www.theolerfamily.blogspot.com
Please let me know
love it!
thanks! this is the information i searched
heyy kranthi thanx,i hv successfully added 1image on my blog...but i hv 1 questn..what to do if i want to add 3 images in horizontal/ vertical manner?...there may be small htmlcode for space between 2images n no of images should be added..plz help me...
Okay I can't figure this out. Here is my code now that works as a clickable image no problem. I'm trying to figure out how to get it to be 349px by 75px in size and have no idea where to add this in the code I have:
[yourl="http://splurgesisters.webs.com/?action=view¤t=blogheader9419144.jpg"][img]hxxp://i88.photobucket.com/albums/k186/foofooberry/th_blogheader9419144.jpg[/img][/url]
Change to [yourl] to [url] and change hxxp after [img] to http to get it to work. Just had to do it that way so the code shows up here.
thank you so much Pal..keep it works..
thank u so much...i'm looking for this code. I got it! thank u!!!
hi,nice tip to use.thank you.
wow great info's...
Easy to do, but useful for begginers.
Nice work.