Skip to main content

Getting the HTML code to put a picture into your blog's sidebar, header or footer

You can use the Post Editor to get the HTML code that you need to put a picture into your sidebar (or header or footer, or anywhere else a gadget can go).



The Picture gadget is the normal tool for adding a picture to your blog's sidebar.

But sometimes you want more control over the picture size or behaviour.  Eg, you may want to have two pictures very close to each other and guarantee that they're the same size.

To do this, you need to get the HTML code for the picture, and then put it into your blog as an HTML-gadget.  Fortunately, Blogger's Post-editor make it very easy to do this without writing the code yourself.


Using the Post Editor to generate the HTML for a picture

1  Start a new Post  (NB   you're not ever going to publish this:  it's just a work-area)

2  Don't enter any text:   just use the Picture icon on the toolbar to add a picture.   Blogger will prompt you to upload the picture, or to choose it from a Google-album-archive or to enter its URL:  add the picture the way that you usually would.

3  Switch to the HTML tab   (top left of the editing window).

This show you the HTML code for displaying the picture, as it is set to display in the Post (depending on the picture-settings you've chosen, it may be centered or right/left aligned, and the size may vary).

Copy the HTML.

5  Switch back to Compose, so that you don't get confused the next time you edit a post.

Return to the list of posts:  you may be asked if you want to leave the page without saving - the answer is Yes.  Or you may have a new draft-status post, which you can delete.



Job Done!   You now have some HTML code in your memory which you can paste into an HTML/Javascript gadget, or anywhere else that you may need it - even into another post that you are editing in a separate window, or into a totally different tool.



Related Articles

Stopping pictures on your blog from being "clickable"

Inserting a Picture into a blog Post.

Putting 3rd party HTML into your blog

Center-align the gadgets on your blog

Hosting pictures outside of Google / Picasa

Inserting a picture into your blog as a gadget

Comments

Popular posts from this blog

How to share pictures from Google Photos, using shareable-links

This article describes how to get a link to one ore more photos from your Google Photos collection, using the Shareable Link controls.   It also explains how to delete shareable links that you have made in the past Google Photos is a tool for managing picture collections. It replaces Google+ Photos, and works alongside Picasa-web-albums.   You can read more about it here . Shareable Links are a new type of linking introduced in Google Photos, which let you easily share one or more pictures at the same time.   You can email them, or use them in tools like Facebook. When someone opens a shareable link, they see a display with the date, the name and picture of the person who is logged in to Google at the time, and all the pictures that are included in the same shareable link. If you want to use an image from Google Photos in a tool which cannot use shareable links, you need to find the URL for the photo, instead. How to get the shareable link for one photo in Google Pho...

How to rename picture files in Picasa-desktop

This article is about re-naming files from within Picasa-desktop, to provide SEO benefits for your blog. Picasa's desktop software is a good tool for organizing and editing photos on your local computer.   And it is still available for you to use, even though Picasa-web-albums has been replaced by Google Albums + Google Album Archive. For pictures that are important in your blog, I still recommend preparing them in a tool like Picasa-desktop and then uploading the finished versions to Google Photos before putting them into a post, because: The desktop tool has better editing tools (cropping, zooming, auto adjustment, adding watermarks) and Picasa-web-albums does. It lets you control the size of the uploaded file It's easier to ensure sure that you still have full-size files on my local machine for printing etc, as well as smaller, more optimized, copies to use on web-pages. Picasa-desktop folders have a very nice relationship with files and directories with the Windows file s...

How to find the URL for a picture in Google Photos

This article describes how to get the URL or internet address of a picture in Google Photos, and the difference between Google's shareable links and URLs. Google Photos is a tool that help bloggers (and everyone else) to manage their picture collections. It replaces Google+ Photos, and works alongside Picasa-web-albums.   You can read more about it here . In Google Photos, there are two different types of web-address for a photo. One is the URL , and this can be used to refer to pictures from Blogger, or from other tools that want a link that just shows the photo, eg Twitter, Google Maps.  This is the traditional style of internet-address for a photo. The other is the shareable link.   This is what Google Photos provides from the Share function.   Shareable links can be used in Facebook, and other places where the photo that is being shared is displayed within a web-display, rather than just as a picture.   (Ref:   How to make and manage shareab...