Monday, December 04, 2006

How to put a active (clickable) picture in the sidebar

The way to put pictures in the sidebar of a Blogger blog will depend on whether you are using a Blogger classic template or a Blogger beta template.

Blogger Classic

You will first have to upload the picture to the web, either via Blogger (see How to get Blogger to host your picture for the profile, etc. (close new window to get back to this page)) or host it with Photobucket. For a comparison between the two methods, see post Comparison between hosting images with Blogger and Photobucket (click "BACK" button to get back to this page) Update 22 May 2007: Photobucket has been acquired by MySpace which is part of Fox Interactive Media (FIM) for $300 million!!! That means that Photobucket is now backed by another giant. That changed the situations and what has been said above may no longer apply.. Once you have the URL of the picture, you just insert this HTML code into the sidebar:
<a href="URL of target site"><img src="URL of picture" alt="" width="" height=""></a>
, making sure that the figure in between quotation marks (width="") of the picture does not exceed the sidebar width (you can leave out the height="" if you want and the image will automatically be rescaled to keep the aspect ratio constant and the image undistorted).

Update: You can also upload your photos at Google Page Creator

You may also just resize the picture to fit the sidebar before you upload it, and leave out width="" and height="", and the picture will then display in the actual size. The attribute alt="" is optional, but it is good to include in and type the description of the picture in between the quotation marks. This is because search engines cannot read images, but can read the alt text. For either way, the free Irfanview photo editor will be of great help. See post Using Irfanview photo editor for your blog (click "BACK" button to get back to this page).

Regarding which part of the old classic template to paste it in, this post will be a good guide: Blogger template tutorial: adding content via the template (click "BACK" button ot get back to this page).

Once done, just click SAVE TEMPLATE, then REPUBLISH.

Blogger beta

If you just want a (non-clickable) picture in the sidebar of a Blogger beta template, it is very easy. You just sign into the Dashboard, and in the relevant blog, click LAYOUT, then click "Add a Page Element" in the sidebar. In the pop-up, you then select "Picture" and click "Add to Blog". You can either select the picture from your computer (Browse), or if have the picture already hosted on the Web, type in the URL. You have 2 choices - add the picture in the actual size or resize to fit. If you use the actual size, you will have to ensure the width of picture does not exceed the sidebar. You also have the option of adding a title and a caption. When done, just click "Save changes", and you will see a new page element (widget) titled Picture at the top of the sidebar of the LAYOUT. You can drag it into whatever position you like. However, this method will give you a non-clickable picture.
Blogger beta: adding a picture in the sidebar

To make a clickable link, I will describe the method by describing how I added a clickble picture in the sidebar of this blog: Star Home Improvements (close new window/tab to return to this page).

I first need to know the width of the sidebar. I am using Ramani's Blogger Beta 3 column template. To get the width, I first get into the template editor (click TEMPLATE > EDIT HTML) and found this block of CSS code:

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

This means that the width of sidebar is 150px, and that is the maximum width (pixels) of the photo I can put in the sidebar without causing the sidebar to slide to the bottom of the page. I first uploaded the picture via a post in Blogger: Malaysia Cameron Highlands Smokehouse (close new window/tab to get back to this page). I click on the picture which will take me to the page on the Web containing the full size of the picture. I copied the URL from the address bar (you can also right-click on the picture and select "copy shortcut" to save the URL to clipboard) and paste it into Notepad for later use. (Update: it has been found that this method doesn't work with the New Blogger anymore. You will have to click on the image to be taken to the page containing just the image, click EDIT > VIEW SOURCE in the menu bar at the top of the page, then get the actual URL of the hosted image from the source code).

I then go to the Dashboard of Star Home Improvements and click on LAYOUT, followed by clicking on "Add a Page Element" on the sidebar. But this time, instead of selecting "Picture", I selected "HTML/Javascript" and click "Add to blog". I then typed the hyperlink tag into the window:
<a href="URL of target site"><img src="URL of picture" alt="" width="150" height="100"></a>

Blogger Beta: Configure HTML/Javascript
I then click "Save changes" and the clickable image will then be added to the top of the sidebar of the blog Star Home Improvements (close new window/tab to get back to this page). Try clicking on the image and see where it takes you. I hope you do that because our Spaceship Earth needs help.

  NEWER POST    HOME  OLDER POST

23 comments:

  1. is there no other way for doing so? or any other way to upload the button pic as a post? otherwise that pic will show in my blog. unless like u do, create a new blog to store such pics.

    thanks

    ReplyDelete
  2. You can also use Google Page Creator to upload your photos.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  3. i tried using flickr...to not avail. argh!!!!

    i followed your instructions:

    href="http://xxx.blogspot.com">
    (img alt="" width="100"
    src="http://www.flickr.com/photos/7615672@N03/443559415/" height="50"/)

    wat is wrong??

    ReplyDelete
  4. thanks...done it with google page. i simply just upload the pics haha!

    ReplyDelete
  5. Hi Bidarlah,

    The HTML seem correct, but the photo URL seem to point to a photo album, not to a particular photo. I am not too familiar with flickr as I hardly use it. The other alternative is to upload your photo to Google Page Creator.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  6. Peter - I see that you are currently in the process of saving people's blogs! I was looking on the Discussions board of Google Groups and I have tried twice to post my question there.

    So far neither question has shown up.

    I just got a new template and hate it. I want my old one back. I can't get it though. I saved it to an xml file, but when I cut and paste it to templates, it just creates a mess of font.

    I'm desperate and so upset.

    Can you help?

    http://blutharnett.blogspot.com

    I've lost all my good stuff on the sides of my page.

    ReplyDelete
  7. Hi Segway,

    With New Blogger xml template, you don't cut and paste into the template editor window like the old classic template. You click BROWSE at the top of the template editor, browse to the xml file, click UPLOAD and it is done.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  8. Thanks for responding to my email Peter!

    I followed all the steps, and when I finally added the "html" page element, the image couldn't be viewed on the blog (it had the small red cross sign in an empty box). Please help!

    [picture has been uploaded on following location: http://indiansummersnaps.blogspot.com/

    Thanks for your help! Bhavna

    ReplyDelete
  9. Figured it out Peter! :)

    ReplyDelete
  10. Hi Bhava,

    The blog you used for uploading the photo is a private blog so obviously the photo is not available for public viewling. Either make it public or upload the photo to a public blog. Even then, I will have to see what photo URL you are using.

    Peter (Blog*Star)
    Earning Online

    ReplyDelete
  11. Hi Peter,

    Dropping in a quick note to let you know that this tip of yours has really helped me. And I love going through your other tips and tricks on your blog and have found them extremely empowering!

    ReplyDelete
  12. Peter you are great!

    I had been agonizing over this for over an hour and not getting anywhere.

    Your tip helped.

    Its funny that everywhere I went I got the instructions on how to build out the html, but I already had that. I just needed to get it in the sidebar. That was actually the easy part!!!!!!!!!

    Thanks again

    ReplyDelete
  13. Peter, thank you!
    I was trying to add a badge for the first time and was clueless.
    First I figured out I had to change back to classic, but I still couldn't get the code I was given to work. I tried your code, still wouldn't work. Copied & edited the blogger button, no go. Finally the link worked but there was no image (using one on a post on the same blog).
    Read some of your other posts and checked the source of the photo but it matched.
    Finally found your suggestion to put the photo on a Google page and it works.

    ReplyDelete
  14. thank you, it was really helpful =)

    ReplyDelete
  15. Hey peter here is asuper easy photo editing site you just enter the pixels and it creates it

    http://www.resize2mail.com/advanced.php

    ReplyDelete
  16. Hi Peter,

    I would like to underline words in my text. How can I do this?
    Thanks for your help.
    Dorothée

    ReplyDelete
  17. Hi Dorothee,

    Refer to How to display underlined text.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  18. Hi Peter
    I have been trying to add picture to my sidebar but it just has not worked out. I am stuck here. It would be so nice if you could tell me what i am doing wrong

    This is the html I am using:
    a href="http://www.nelli1985.blogspot.com"img alt="" width="350" src="http://bp2.blogger.com/_8-MQjEZMcdU/R8N4NRc0WQI/AAAAAAAAAAk/tlWkj7Tw_1Y/s1600-h/tmpphpmtG9oy.jpg" height=""/

    thats the picture:
    http://bp2.blogger.com/_8-MQjEZMcdU/R8N4NRc0WQI/AAAAAAAAAAk/tlWkj7Tw_1Y/s1600-h/tmpphpmtG9oy.jpg

    and here is my sidebar wrapper:
    #sidebar-wrapper {
    background-color:#703F63;
    width: 350px;

    ReplyDelete
  19. Hi Nelli,

    Make sure you use the right photo URL. Refer to Get New Blogger to host your profile photo, photo in sidebar, etc. (from memory, if wrong post, let me know).

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  20. Peter,

    Thanks for all you do! Could you please add how to add a border around the clickable image in the side bar?

    Thanks.

    ReplyDelete
  21. Hi Vitruvian Duck,

    Try adding the attribute border="1". The bigger the figure, the thicker the border should be.

    <img src="photo URL" border="5" /">

    Peter ChenBlog*Star
    Environmentally friendly presents (gifts)

    ReplyDelete
  22. I cant figure out what I am doing wrong. The image doesnt show up in the sidebar, only the text that is between alt="Studio" is showing up as a hyperlink. I am using photobucket to host the image.

    I tried to post the code I am using, but blogger wont let me put it here in the comments.

    Any ideas? Your help would be much appreciated. I've been to several tutorial sites and can't figure this out. Thank you!

    ReplyDelete
  23. Photobucket I believe disable/delete inactive accounts and wondering if that is what happened to you. YOu may also be interested to read how to display HTML tags in posts and comments.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics