Telling Google, and visually-impaired people, about the pictures in your blog

<b>This article is about why and how to attach keywords and related text to the pictures in your blog posts.  This is helpful for both search engine optimisation (SEO), and for making your blog accessible to people who use screen-reader software.</b> <br /><br /><div style="clear: both;"></div><a name="more"></a><h2>Pictures and your blog</h2><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfvbY0d62EgK2Ph0113rpTu5wncOFZd7sRXEq1wQp4RVIo_GYZgP8KjfocUNbsOZ-LGMIZdj4cJPTR7Qfd8dB8ohjGksuMBSVw4VL969FAwnUF9uYL-KpIlpF7DyjhyGixx7efIfuqrb0T/s320/picture-with-example-of-descriptive-alt-text.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfvbY0d62EgK2Ph0113rpTu5wncOFZd7sRXEq1wQp4RVIo_GYZgP8KjfocUNbsOZ-LGMIZdj4cJPTR7Qfd8dB8ohjGksuMBSVw4VL969FAwnUF9uYL-KpIlpF7DyjhyGixx7efIfuqrb0T/s320/picture-with-example-of-descriptive-alt-text.png" width="320" /></a></div>Blogger has a <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/picasa-blogger-part-2-putting-things.html">set of tools for putting pictures into your blog</a>, including several options for putting images into posts or gadgets.  <br /><br />In most cases, the other content in each post provides enough information for Google's indexing tools to know what the post is aobut.<br /><br />But if your blog <b>mainly</b> has photos, your posts may not have enough key words to get properly indexed.  And even if the image-indexing tools do some auto recognition, a description of a picture written by a human being  will almost always be better than one which was created by a computer.<br /><br />Also, if your blog's visitors may include visually impaired people or others who use screen-reader software, then you need to think about how well your content will work for them:  if you important information is inside images but not in the text, then they won't be able to get this information in any way.<br /><br />These two good reasons for adding "alternate text" to your pictures - and there may be more.<br /><br />What's even better is that Blogger now has a tool for to make it easy to do this.<br /><br /><br /><br /><h2>How to add captions and alt-text to pictures in Blogger</h2><br /><b>Add</b> the picture to your Post.<br /><br />In <b>Compose mode</b>, float your mouse over the picture.   This will show the picture-editing-toolbar, like this:<br /><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1N1ONY3Hk_qwy10UhdxM-ibHsx9lg4dMb5EzV9TH7ZB3P9d6uzXA7GmH6ZWt4HLjOfB5amfF5I4Xr8hiQlRChVoYujZVAHzUXpe84pmOLcmKF53-V-ehU2GskGgebAm22rEVphy7_G9Ji/s551/post-editor-picture-toolbar-alt-text-title-via-add-properties.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1N1ONY3Hk_qwy10UhdxM-ibHsx9lg4dMb5EzV9TH7ZB3P9d6uzXA7GmH6ZWt4HLjOfB5amfF5I4Xr8hiQlRChVoYujZVAHzUXpe84pmOLcmKF53-V-ehU2GskGgebAm22rEVphy7_G9Ji/s640/post-editor-picture-toolbar-alt-text-title-via-add-properties.png" width="640" /></a></div><br /><br />Choose the <b>Properties</b> option.<br /><br />This opens a dialog box where you can enter<br /><ul><li><b>A title</b> - this is shown when a visitor hovers their mouse over the picture</li></ul><ul><li><b>Alt text</b> - this is kept in the background, and only displayed to people who (for whatever reason) cannot see the picture.</li></ul><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHRDoU8ABHe4-CLE24FKXUBJ4i3FzLPDENX0IdNJScN62o8voV-W9W4m2TOTB5IDieyb9AWqa_N_dTICohBU4ziNVv6z7DKOqYSEccMgPYIyDJFzHrmb1bJjZjc5bZuDRr-ufHozTQH6o/s485/post-editor-image-properties-title-aka-hover-and-alt-text-fields.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHRDoU8ABHe4-CLE24FKXUBJ4i3FzLPDENX0IdNJScN62o8voV-W9W4m2TOTB5IDieyb9AWqa_N_dTICohBU4ziNVv6z7DKOqYSEccMgPYIyDJFzHrmb1bJjZjc5bZuDRr-ufHozTQH6o/s640/post-editor-image-properties-title-aka-hover-and-alt-text-fields.png" width="640" /></a></div><br /><br /><br /><h2>What your readers will see</h2>People who read your blog <b>on line</b>, either with a standard browser or an RSS feed reader, won't see anything different, until they hover over the photo.   When they <b>hover</b>, they will see the text you put into the Title field.<br /><br />People who read your blog <b>in their email</b> (because you've offered a <a href="http://blogger-hints-and-tips.blogspot.com/2011/03/follow-by-email-gadget-easy-way-to-add.html">subscribe-by-email option</a>) may see the alt text instead of the picture, depending on what setting they have in their email system.<br /><br />People who use <b>screen reader software</b> will have the text that you added read out to them in the usual way that their software works.<br /><br />And most importantly, <b>search engines will see the text you added</b>, and hopefully the will use it in indexing your post.<br /><br class="Apple-interchange-newline" /><br /><br /><h2>Other Alternatives</h2>The Post and Pages editor also has an Add Caption option on the photo toolbar, although I only recommend using  if you're comfortable editing HTML, because it puts the picture into a table, and so to move it inside the post you need to edit the code, not just drag-and-drop it.<br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/picasa-blogger-part-2-putting-things.html">Tools for putting pictures into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/picasa-blogger-part-4-putting-slideshow.html">Addingng a Picasa slideshow to your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/tools-for-applying-copyright-protection.html">Tools for applying copyright protection to your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">Why RSS/Subscribe to Posts is important for your blog</a>.<br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/03/follow-by-email-gadget-easy-way-to-add.html">Adding a subscribe-by-email option to your blog</a>

Telling Google, and visually-impaired people, about the pictures in your blog

This article is about why and how to attach keywords and related text to the pictures in your blog posts.  This is helpful for both search e...

Read more »

How to center gadgets in Blogger

<b>This article is about centering gadgets from 3rd parties that you install onto your blog.</b> <br /><br /><b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKxEgCOxgTeBWv6ABd0INi-LzO8aNMwMxTyVroS5CXNdpT6PjcS5wfKzi4gQ2K9WkMVmWHcJip-PuguGQ65utHEODXafKZsiErcMX3Lu2ciTHcvlsf0bimamAAukF4cY6i3cPx4rZ224/s1600/center-align-put-gaget-in-the-middle-of-header-footer-or-sidebar.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKxEgCOxgTeBWv6ABd0INi-LzO8aNMwMxTyVroS5CXNdpT6PjcS5wfKzi4gQ2K9WkMVmWHcJip-PuguGQ65utHEODXafKZsiErcMX3Lu2ciTHcvlsf0bimamAAukF4cY6i3cPx4rZ224/s200/center-align-put-gaget-in-the-middle-of-header-footer-or-sidebar.png" width="200" /></a></div>Previously, I've described <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">how to put HTML code from a 3rd party into your blog</a>.<br /><br />When code like this is<a href="http://blogger-hints-and-tips.blogspot.com/2012/03/adding-gadget-to-your-blog-using.html"> put into a gadget</a>, one common question is "how do I center it?"<br /><br />There are (at least) three options for doing this, ie for putting a gadget into the middle (horizontally) of the area it is located in.   These are described below.<br /><br /><br /><h2>Option 1: Centre all the gadgets in your blog</h2>To center-align every single gadget in your blog, just, <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">add a CSS rule to your blog</a>.  The rule to add is:<br /><blockquote style="background-color: #ead1dc;">.widget {<br />  text-align: center;<br />} </blockquote><br />This will centre the <i><b>contents and title</b></i> of every gadget on your blog.<br /><br /><br /><h2>Option 2: Only center-align the specific gadget</h2>To only centre-align one gadget, which is made from HTML/Javascript code, you can just put the gadget-code from the 3rd party (eg PayPal, Amazon, etc) inside a centering statement, like this:<br /><br /><blockquote style="background-color: #ead1dc;"><div style="text-align: center;"><br /><br />PUT THE CODE FROM THE 3RD PARTY HERE<br /><br /></div></blockquote>Install the code into your blog the way you would usually <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html" target="_blank">install this 3rd party code</a>.<br /><br />This will centre-align the contents (not title) of the specific gadget that you add.<br /><br />Note the American spelling of the word "<b>center</b>" - and don't forget to put the closing </div> statement at the end.<br /><br />There may be some gadgets where it would be possible to add the centring statement to the gadget code itself, rather than putting it outside.    I don't recommend this (unless you're so comfortable with HTML and CSS that you don't need to be reading this article), because it introduces a risk that you will interfere with some other aspect, or that you will lose the centering if you ever need to refresh the code.<br /><br /><br /><h2>Option 3 - Make a new style rule just for the gadget</h2>If you only want to centre one (or several) gadgets - not all of them - then it's best to define a new style that is to be used on specific gadgets:  <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">put this new style into your template</a>, and then apply it to the gadgets like this.<br /><blockquote style="background-color: #ead1dc;"><div style="background-color: #ead1dc;"><div class="YourNewSytle"></div><div style="background-color: #ead1dc;"><br /></div><div style="background-color: #ead1dc;">PUT THE CODE FROM THE 3RD PARTY HERE</div><div style="background-color: #ead1dc;"><br /></div><span style="background-color: #ead1dc;"></div></span></blockquote><br />This approach will only centre the gadget contents - not any header that you give to it.<br /><br />There are lots of options that you could put into the new style rule, but at a minimum it needs to have<br /><blockquote style="background-color: #ead1dc;"><b>.</b>YourNewStyle<br />{<br />  text-align: center;<br />}</blockquote>Notice that there is a "." (ie a full-stop) before the name of your new style.<br /><br />Also, it's best not to use a number as the style-name (eg "2nd-gadgetStyle"), because this doesn't work with some browsers.<br /><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Putting HTML code from a 3rd party into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS style into your template</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/centering-header-in-your-blog.html">Centering the header in your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/12/putting-gadget-above-your-blogs-header.html">Putting a gadget above your blog's header</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/removing-attribution-gadget-from.html">Removing the attribution gadget from Designer-template blogs</a>  <br /><br />

How to center gadgets in Blogger

This article is about centering gadgets from 3rd parties that you install onto your blog. Previously, I've described how to put HTML c...

Read more »

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

<strong>This article explains how to use Blogger's 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).</strong><br /><strong><br /></strong> <strong><br /></strong> <br /><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3uZUqTA-diq0sHwhZpRKdHdXrVHRntj_z4ffCs0EovyDrUcVUSzBS0baoi5rTogzPQdw1T8kLg2vJ8KWSnBfBmZLQQL_E15VQWYMUI2wvzjeW-JtZSr8sW9OydgMPpdXSA8IrOQWYiO_d/s557/get-html-code-for-an-image-file.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3uZUqTA-diq0sHwhZpRKdHdXrVHRntj_z4ffCs0EovyDrUcVUSzBS0baoi5rTogzPQdw1T8kLg2vJ8KWSnBfBmZLQQL_E15VQWYMUI2wvzjeW-JtZSr8sW9OydgMPpdXSA8IrOQWYiO_d/s320/get-html-code-for-an-image-file.png" width="320" /></a></div>The <b>Picture gadget</b> is the normal tool for <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/insertng-picture-as-gadget.html">adding a picture to your blog's sidebar</a>.<br /><br />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.<br /><br />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.<br /><div style="clear: both;"></div><br /><br /><h2>Using the Post Editor to generate the HTML for a picture</h2>1  Start a <b>new Post</b>  (you're not ever going to publish this:  it's just a work-area)<br /><br />2  Don't enter any text:   just use the Picture icon on the toolbar to <b>add a picture</b>.   Blogger will prompt you to upload the picture, or to choose it from a Google-album-archive or to enter its URL:  <b>add the picture</b> the way that you usually would.<br /><br />3  Switch to the <b>HTML</b> tab   (top left of the editing window).<br /><br />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).<br /><br />4  <b>Copy</b> the HTML.<br /><br />5  Switch back to <b>Compose</b>, so that you don't get confused the next time you edit a post.<br /><br />6  <b>Return to the list of posts</b>:  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.<br /><br /><br /><br /><b>Job Done!   </b>You now have some HTML code which you can <b>paste </b>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.<br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/11/stopping-pictures-on-your-blog-from.html">Stopping pictures on your blog from being "clickable"</a> <br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">Inserting a Picture into a blog Post</a>.<br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Putting 3rd party HTML into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/03/centering-gadgets-on-on-your-blog.html">Center-align the gadgets on your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/hosting-pictures-outside-of.html">Hosting pictures outside of Google / Picasa</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/insertng-picture-as-gadget.html">Inserting a picture into your blog as a gadget</a>

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

This article explains how to use Blogger's Post Editor to get the HTML code that you need to put a picture into your sidebar (or header ...

Read more »

Putting pictures side-by-side in a blog post or gadget

<b>This article shows how to put pictures side-by-side in Blogger (or any other website) using HTML, in a way that works for visitors using mobiles (smartphones and tables) as well as larger screens.</b><br /><br /><br /><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGdbnBuN99GEKj7qQ4Hv-pv5mY90xCviHHMpQujriapUiQJV7Gv-G4KU19_fLPb-mEpwDvQfvzCU_5DxBzA9ul22uAiXnpiByrMmi6kQxOjhPh9XYai4o9g8pn8i_2ty0qRmt1ACIi7O9T/s640/putting-pictures-side-by-side-in-html-code-for-bloggers.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Placing pictures side by side in Blogger: a picture of three images next to each other on the same line" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGdbnBuN99GEKj7qQ4Hv-pv5mY90xCviHHMpQujriapUiQJV7Gv-G4KU19_fLPb-mEpwDvQfvzCU_5DxBzA9ul22uAiXnpiByrMmi6kQxOjhPh9XYai4o9g8pn8i_2ty0qRmt1ACIi7O9T/s640/putting-pictures-side-by-side-in-html-code-for-bloggers.png" title="Positioning images in horizontal-alignment using HTML" width="300" /></a></div>Previously I've explained <a href="http://blogger-hints-and-tips.blogspot.com/2011/08/using-tables-to-show-data-in-your-blog.html">how to use a table</a> to force photos (and other things) to all show into a line, even if the user's screen is too small to display them all at once.   And I've looked at <a href="http://blogger-hints-and-tips.blogspot.com/2011/01/putting-text-and-pictures-side-by-side.html">putting text and pictures side-by-side</a> - assuming you're only working with one picture.<br /><br />Tables are great if you are showing data and need rigid alignment, or if you don't mind your mobile device visitors having to either scroll, or to pinch their screen so much that they cannot read the text.<br /><br />But there is a way to lay out pictures so that they display side by side if there's room on the screen, or start on a new line if there's not.<br /><br />I've done this recently on a blog where really wanted to make a display for last / next week and last / next year on two different dimensions. It looks like this on a smartphone vs a tablet.   Notice that on the tablet, the two middle pictures are on the same line.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbM01ga0Y1aHQbzGm1g5be8aeEle2DNp1aIHoUhDReH2HfCr25injKX_PkF130r5EZKx3gnH5fLqINoAD8W7LvblgViBycWek2FiI2RCi9yDR-SOnxEO_NSjuCGo-JRIV9Kn04RpVbVHCg/s912/effect-of-div-statement-alignment-of-images-in-webpage-smartphone-vs-tablet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbM01ga0Y1aHQbzGm1g5be8aeEle2DNp1aIHoUhDReH2HfCr25injKX_PkF130r5EZKx3gnH5fLqINoAD8W7LvblgViBycWek2FiI2RCi9yDR-SOnxEO_NSjuCGo-JRIV9Kn04RpVbVHCg/s912/effect-of-div-statement-alignment-of-images-in-webpage-smartphone-vs-tablet.png" width="90%" /></a></div><br /><br /><h2>How to lay out several pictures side-by-side if there's space, or one-under-another if not</h2>Start to prepare your post in the usual way.<br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">Add your pictures</a> to the post in the usual way. Ideally, put them just before or just after some <a href="http://blogger-hints-and-tips.blogspot.com/2014/07/use-marker-text-to-go-to-a-place-in-html-code.html">marker text</a> that you can use to help you to find the code for it in the next step.<br /><br />Hover over each picture, and choose the <b>small</b> size (you can change this later)<br /><br />Go into <b>HTML mode</b>.<br /><br /><b>Find the place</b> where the pictures are.   (If you've used marker-text, just use your browser's search feature to go to it.)<br /><br /><b>Add this code</b>, just where you want the line of images (or other items) to end up.<br /><blockquote><span style="font-family: Courier New, Courier, monospace;"><div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;"></span><br /><span style="font-family: Courier New, Courier, monospace;">IMAGE CODE FOR PICTURE</div></span><br /><span style="font-family: Courier New, Courier, monospace;"><div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;"></span><br /><span style="font-family: Courier New, Courier, monospace;">IMAGE CODE FOR PICTURE</div></span><br /><span style="font-family: Courier New, Courier, monospace;"><div style="display: inline-block; margin-bottom: 2em; margin-right: 0em; width: NN;"></span><br /><span style="font-family: Courier New, Courier, monospace;">IMAGE CODE FOR PICTURE</div></span></blockquote><br />That has space for three pictures - you can <b>delete one or add more lines</b> if you want to - just make sure that the very last one has margin-right: 0em; and the others all have margin-right: 2em;<br /><br />Now, for each picture that you added,<br /><ul><li>Find the HTML code for it.   (<a href="http://blogger-hints-and-tips.blogspot.com/2010/11/stopping-pictures-on-your-blog-from.html">This post </a>has a detailed explanation of what the HTML code for a picture)</li></ul><ul><li>Delete the <b>height = "nn"</b>  part from it   (nnn = whatever number is there)</li></ul><ul><li>In the <b>width = "nnn"</b> part, <b>replace</b> nnn with  "100%", so it says   width = "100%" <br />Note:  this is saying to make the picture take up the whole width of the division you have assigned it to.   You can make it smaller than 100%.   But you want to do it put a bigger margin between the two pictures, then you can do this by increasing the value in   <span style="font-family: 'Courier New', Courier, monospace;">margin-right: 2em;</span>      </li></ul><ul><li><b>Move the picture code</b> to where it says IMAGE CODE FOR PICTURE</li></ul><ul><li>Decide how wide the picture should be, and <b>change the value in Width: NN</b> within that DIV statement to the right amount. <br />You can either use pixels (eg width: 100px;), ems (eg width: 20em;) or percentages (width: 40%;)   If you use percentages, then the total amount for all the pictures should be a little less than 100%, so allow for some space between the pictures:  for example, with a 2em margin and three pictures in a row, you may need to make the total approx 90%.</li></ul><br />Go back into <b>Compose mode,</b> and check that your pictures look roughly right - if necessary, you may need to adjust the picture sizes.   (See the note below under Troubleshooting for more about this.)<br />Delete the marker text.<br /><br /><br /><b>Job done!   </b>Your pictures will now display side-by-side if they can all fit into the user's screen, or one under another if not.<br /><br /><br /><h2>Troubleshooting</h2>Getting the pictures right can be quite fiddly, so I recommend preparing the blog post in private, so you can do this in stages, and save your work regularly as you go.<br /><br />Your pictures will be vertically aligned on the bottom axis, and this means that the approach will work best with pictures that are the same height.    (I'm working on another article looking at alignment issues - it's they're quite tricky.)<br /><br /><h3>Post editor view vs your visitor's screen</h3>An issue that many new bloggers struggle with is that what they can see in the post editor is<b> not the same </b>as what their blog-visitors will see.<br /><br />The post editor screen is only a certain width.    Most times, it is smaller than the width of the main body of your blog.  So, if you have used fixed-widths (ie in pixels, or ems, not percentages), more pictures fit on the same line in your blog than in the post editor. But if a visitor is using their smartphone to read your blog (and I do a lot of my blog-reading on the phone these days) - the screen width is less than it is in the post editor.<br /><br />This is why using <div> statements instead of <table>'s is a good idea.  But it does means that sometimes you will have to compromise on whether things can be put together.<br /><div><br /></div><h3>Is this only for pictures?</h3>No - you can use this technique with blocks of text, videos - in fact anything that you can put into your blog.<br /><br /><h3>What about gadgets?</h3>You can use this technique anywhere that you can edit the HTML.  So, you can put pictures in a row in your sidebar, header or footer by using a HTML-gadget.    (<a href="http://blogger-hints-and-tips.blogspot.com/2010/05/getting-html-code-to-put-picture-into.html">This post</a> shows a handy way to get the picture code when you're making gadgets.)<br /><br /><h3>Captions</h3>I <b>don't</b> recommend using captions with this this technique.   Blogger shows them using tables:  they put the photo and text into a one-column-two-row table, and this makes working with the picture code a lot more difficult.   If you really want to use them, then add them after you have moved your picture code inside the <div>...</div> statements.<br /><br /><br /><br /><hr /><h2>Related Articles:</h2><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/08/using-tables-to-show-data-in-your-blog.html">Using a table to display data in your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2014/07/use-marker-text-to-go-to-a-place-in-html-code.html">Marker text helps you to find places in your blog post</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/01/putting-text-and-pictures-side-by-side.html">Putting text and photographs side-by-side </a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">How to add a picture to a blog post</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/getting-html-code-to-put-picture-into.html">How to get the HTML code for a picture when you don't have an insert-picture icon on the toolbar</a>

Putting pictures side-by-side in a blog post or gadget

This article shows how to put pictures side-by-side in Blogger (or any other website) using HTML, in a way that works for visitors using mob...

Read more »