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

Putting a badge for a Facebook Page into your Blog

This article describes making a Facebook badge to promote your page, and putting it onto your blog. What is a Facebook page This article is about how to make a badge to promote a Facebook  Page . This is an example of the "follow me" approach to linking your blog and the social networks , although for Facebook pages your reader becomes a Fan rather than a Friend. Many people are confused about when they should use each of the types of "thing" in Facebook, ie Profiles - accounts for flesh-and-blood, living, breathing, individual people Pages - for websites, brands, and organisations that don't want to approve all their Facebook members Groups -  for organisations that want to approve individual members who join (and in return, group-owners can send private messages to individual members. The most common "thing" for blogs to have is a Page - and a Badge is the tool which Facebook provides to help you to promote a Page on your blog or other website. Ho

How Do Insurance Companies Make Money? - How Does It Work Operationally?

How does it work operationally? Insurance companies can be much more complex than it seems. I won't go into details, but I will try to give a sense of the variety of things to do: Marketing and product development - we have to understand what our clients want and product design including "features" and guarantees (e.g., including dental health plan or not in limitation of the disease before the type of questionnaire that we ask clients to fill???), pricing, regulatory constraints, etc. and IT is, of course, for the system to support this product. Distribution - how we bring our products to the clients? Agents, brokers, direct sales channels are all there, plus the development of smartphone applications and internet sales. Customer service and claims that "the process of paper" including address change customer or telephone number, the call center for clients who have questions, people file to review and pay claims, etc. Finance   - n

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 sy