Monday, January 20, 2014

Putting a picture on your blog as a Gadget

You can put a picture anywhere in your Blogger blog that you can insert a gadget - and you can make it link to a post in your blog or to any other website.

The Image gadget

Dry dock in Claddagh Basin
A very simple way to put a picture into your blog is to use an Image gadget (previously called a Picture gadget). 

This is a tool that Blogger provides to make is easy to add a picture that shows up on all screen and is linked to somewhere.

Often gadgets (sometimes called widgets or page elements) are put on the sidebar - but in many blogger templates they can go in other places too (header, footer, etc).

Follow these steps to add a picture gadget in Blogger

1  Make sure you know where the original picture is and that you have copyright permission to use it.

2  Copy the location (URL or file system full path-name) of the picture - and remember whether it's on your computer, or on the internet.
(This article tells you how to find the URL of a picture that's already stored in Picasa.   To find the URL of a picture on the internet, you can usually right-click on it and choose "copy image location" - or similar depending on your browser)


3  In Blogger, follow the usual Add a Gadget procedure, and choose the Image gadget from the list of options (you may have to scroll down to find it in the list).


4  In the Configure-Image box, enter the options you want for your picture.   These include:

  • The title for the Gadget,
  • The caption for the picture
    (the small words that go underneath it, usually explaining it, or where it came from),
  • What should happen when a reader clicks the picture - put this into the Link field
  • Where to find the picture
    (ie the file-location that you copied in step 2)
  • Whether to re-size (ie shrink) the picture to fix the space in the sidebar in your current template.


5 Press Save.


6  If necessary, drag-and-drop the new gadget to the place where you want the picture to go, and press Save.

 

What your visitors see

People who visit your blog in a web-browser, will see the picture, in the place where you put the gadget.  However pictures are not supported gadgets for dynamic view templates, so it won't be see if you use one of these.

Also, people who see your blog through an RSS reader, or by receiving emailed updates don't see any gadgets, so they will not see the picture.  

If you entered a value for Link, your visitor's browser leaves your blog and goes to the Link location:  with the Picture gadget, then there is no way to make this open a new window.   If you want to do so, then use an HTML gadget instead, get the code for the picture, and put target = "_blank"   into it:, so the code looks something like: 
<a href="YOUR LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target = "_blank"><img border="0" src="YOUR PICTURE LOCATION" /></a>



Related Articles

Options for putting pictures into your blog

Copyright, blogs and bloggers

Picasa and Blogger - an overview

Getting the HTML to add a picture to your blog

Finding a picture's location in Pisasa-web-albums

Finding the URL of a picture stored in Flickr

Showing a PowerPoint presentation in your blog

Why RSS / Subscribe to Posts is important for bloggers

Following a blog by email

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

9 comments:

  1. Is there a way to make the picture smaller if you are using a gadget? I have the option Shrink to Fit checked but the photo is still a little too big for my sidebar. Maybe I should just shrink it in photoshop...

    ReplyDelete
  2. 'Fraid not. Using a gadget, you have no control over the picture size. Instead, you need to either shrink it in photoshop, or put it into a HTML gadget - see http://blogger-hints-and-tips.blogspot.com/2010/05/getting-html-code-to-put-picture-into.html for a hint on how to do this easily.

    ReplyDelete
  3. where is the picture gadget now

    it's gone

    ReplyDelete
    Replies
    1. It was back again this morning. Scroll down the list (don't search) and you will find it.

      Delete
    2. It's been renamed as the Image gadget. I've updated the instructions to say this.

      Delete
  4. hii I want to add all my food blog pictures like screensaver (day by day wen I update recipe)..can u suggest me how to add screensaver gadget n image gadget..

    ReplyDelete
  5. How do I add a link like a website to a widget?

    ReplyDelete