Lining up the first post and the sidebar

<div dir="ltr" style="text-align: left;" trbidi="on"> <b>In some Blogger templates, there is a big gap between the bottom of the header and the start of the first post, and this means that the posts and the sidebar are not aligned.  This article explains how to adjust the gap, and so remove that problem</b><b>.</b><br /> <b><br /></b> <br /> <div style="clear: both;"> </div> <a href="https://draft.blogger.com/u/1/null" name="more"></a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp_oLagX_sI1Y_6JCVWp125lyxZIpKJzV3gag8u4IM1-i4lDd4HG-AUXYjjBaSuCuEBithVMoF-u4YeSUWetlK0wnWUyipgGBq6-Knem_JuJe53r3UkoKzHpicYiYPMdsg8f43QL3oeTA/s1600/gap-between-header-and-post-heading-layout-reduction-mind-the-gap.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp_oLagX_sI1Y_6JCVWp125lyxZIpKJzV3gag8u4IM1-i4lDd4HG-AUXYjjBaSuCuEBithVMoF-u4YeSUWetlK0wnWUyipgGBq6-Knem_JuJe53r3UkoKzHpicYiYPMdsg8f43QL3oeTA/s320/gap-between-header-and-post-heading-layout-reduction-mind-the-gap.png" width="320" /></a></div> In the <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/what-template-does-your-blog-use-quick.html">templates that Blogger provides</a>, as well as all third-party templates, the amount of space between elements on the screen is not accidental:   designers put a <b><i>lot</i></b> of effort into working out what spacing will look good, and then finding ways to put CSS code into the template so that the spacing they want is shown in any browser software that Blogger supports.<br /> <br /> <br /> But there are times when you may want to change this spacing, and this is easy to do, provided you are willing to accept the <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">disadvantages of editing your template</a>, and if  you can work out exactly which part of the template code to change.<br /> <br /> <br /> <h2> The pre-Header gap</h2> A pet-hate of mine is the blank space above the first post, which looks strange unless you put something else in to the space.  In this example, I've got an <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/setting-up-adsense-on-your-blog.html">AdSense</a> link-unit in the area highlighted in red, just to fill in the empty area:<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwCOuNyMmcPUwrUaNHJC8GqQEGwvTUIsrqpsFzPzZPxFDwk7IfUOlfxkN-47vEvyeXnCtzWIM41ZG4A4wpIly6xcnZBwDi2CX1Ihb7oBWRFdSBwa34jduzTabwjG2Fh0GS0lWlyU_MmzI/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img al="picture of blog screen with a big empty gap above the first post header" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwCOuNyMmcPUwrUaNHJC8GqQEGwvTUIsrqpsFzPzZPxFDwk7IfUOlfxkN-47vEvyeXnCtzWIM41ZG4A4wpIly6xcnZBwDi2CX1Ihb7oBWRFdSBwa34jduzTabwjG2Fh0GS0lWlyU_MmzI/" width="90%" /></a></div> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <br /> <h2> How to change the gap above the post header</h2> 1  <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html"><b>Edit</b> your template</a>  - don't forget to take a backup.<br /> <br /> <br /> 2  <b>Find</b> this code<br /> <blockquote style="background-color: #ead1dc;"> <span class="Apple-style-span">h3.post-title, .comments h4 {<br />  font: $(post.title.font);<br />  <b>margin: .75em 0 0</b>;<br />}</span></blockquote> The exact numbers used in your template may be different:  the key thing is to find the CSS command that is putting a margin above the post header.  In the template that I took this example from (Simple), it's the "0.75em" - which puts 75% of the space of a the post-header characters as a blank space above the header.<br /> <br /> <br /> 3   <b>Change the <i>first</i> margin value</b>:  how much to change it by depends on your template, but in some cases I've used 0 successfully.<br /> <br /> In CSS, when a margin statement has three numbers beside it, they refer to the<br /> <ul> <li>top, </li> <li>left-and-right, </li> <li>bottom </li> </ul> margins respectively.   So if you want to do something else to the post-header, eg indent it, this is the place to make changes<br /> <br /> <br /> 4   Click <b>Preview</b> to see what the blog will look like - keep doing this until you get the right setting.<br /> <br /> <br /> 5   When you are happy with the spacing, click <b>Save Template</b> to apply the changes to your blog.   (Or Clear Edits if you cannot get it right and need to stop trying).<br /> <br /> <br /> Note:  If you make a big change to your template like this, it would be a good idea to check out out in at least one version of the other browsers that your readers use - at the moment, this usually means Internet Explorer 8, Firefox and Chrome.   But it may depend on your niche - a tool like <a href="http://blogger-hints-and-tips.blogspot.com/2011/02/setting-up-google-analytics-for-your.html">Google Analytics</a> will give you some statistics about what browsers, and screen sizes, your visitors have.<br /> <br /> Also, it is possible to make this change by just <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">installing a new CSS rule</a> for h3.post-title into your blog - because the latest one found is always the one used, and because the template designer's Add CSS function puts the rules you add after the othr rules.   I don't recommend it here, though, because working with the original rule makes it easier to see the effect of making changes to any of the values in the area.<br /> <br /> <br /> <h2> Other affected spacing</h2> If you have more than one post per page, then this change will also reduce the amount of space between the bottom of one post and the header of the next one.   Depending on your template, you want want to add a little more space into the margin statement in the <b><i>bottom</i></b> of the post-footer, eg<br /> <blockquote style="background-color: #ead1dc;"> <span class="Apple-style-span">.post-footer {<br />  margin: 20px -2px <b><i>20</i></b>;<br />  padding: 5px 10px;<br />}</span></blockquote> <br /> If you display comments in your blog, you also need to check the impact on comments, because the original command applied to h4 items in comments as well.<br /> <br /> If you are making a lot of changes, you may want to <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html">make a test blog</a>, and <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html">plan your changes in private</a> before applying them to your main blog.<br /> <br /> <br /> <br /> <hr /> <h2> Related Articles</h2> <a href="http://blogger-hints-and-tips.blogspot.com/2011/02/setting-up-google-analytics-for-your.html">Setting up Google Analytics to get statistics about for your visitors</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 rule to your blog's template</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Advantanges and disadvantages of editing your template</a>.<br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">How to edit your blogger template</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/what-template-does-your-blog-use-quick.html">Who did your blogger template come from - the quick way of finding out</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html">Making a test-blog for template changes</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html">Planning changes to your blog in private</a></div>

Lining up the first post and the sidebar

In some Blogger templates, there is a big gap between the bottom of the header and the start of the first post, and this means that the pos...

Read more »

How to find free pictures for your blog, using Creative-Commons search

<div dir="ltr" style="text-align: left;" trbidi="on"> <b>This article describes the Creative Commons search tool, which you can use to look for pictures, videos, music etc that are available for other people to use under a Creative Commons license.</b><br /> <br /> <div style="clear: both;"> </div> <br /> <a href="https://draft.blogger.com/null" name="more"></a><br /> <h2> What is Creative Commons</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TYPzwjemBi94inWJVqB5JdFr7pInY8QfMLdYiI60lKaFNiYtVsj9CQFDO_i5n5lmr9jvr2Pu94h7MVIEvlM9b5G9K7ciMLcc-g1p248nWzzPhU2wun0dkeRalQh0jO2zPHeWUBp6_9Md/s356/find-free-pictures-for-your-blog-with-creative-commons-search-tool.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Stick-man holding up a Creative-Commons-search logo, while thinking about some images he wants to find" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TYPzwjemBi94inWJVqB5JdFr7pInY8QfMLdYiI60lKaFNiYtVsj9CQFDO_i5n5lmr9jvr2Pu94h7MVIEvlM9b5G9K7ciMLcc-g1p248nWzzPhU2wun0dkeRalQh0jO2zPHeWUBp6_9Md/s320/find-free-pictures-for-your-blog-with-creative-commons-search-tool.png" title="Blogger-HAT-Man recommends Creative Commons search to find interesting pictures to use on your blog" width="250" /></a></div> Previously I've described <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">how copyright applies to bloggers</a>, <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/tools-for-applying-copyright-protection.html">how you can protect your blog-content from copyright theives</a>, and <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/taking-action-when-someone-has-copied.html">what you can do if they take you work anyway</a>.<br /> <br /> The focus in that series was looking after your own rights.<br /> <br /> But rights always come with responsibilities. The details vary by country, but in general you cannot just copy other people's recent work without their permission - in the same way that they cannot copy yours.<br /> <br /> Some people, though, are <b>happy to give other people permission to use their work</b>, often with certain conditions (eg you must including an attribution link to the creator).<br /> <br /> <b>Creative Commons</b> is an easy, legal way for creators to give permission for things they create to be used by other people. It is a framework which offers "licenses" that creators (writers, artists, composers, poets, etc) can apply to their work to say that other people can make copies, and what conditions apply  (eg non-commercial use, only if you attribute me, etc)<br /> <br /> To use it, authors, artists, etc don't need to register their work. Instead, they go to <a href="http://creativecommons.org/" target="_blank">the Creative Commons website</a> and get code / text to put with their published work to show what rules apply.<br /> <br /> Then they can publish or upload their pictures, writing etc anywhere they want, and by linking to the licence <b>the work is as protected as anything on the internet can be</b>.<br /> <br /> <br /> <h2> How to find pictures & music that are Creative Commons licensed</h2> Creative Commons have a very useful search tool, found at <a href="http://search.creativecommons.org/" target="_blank">http://search.creativecommons.org</a><br /> <br /> This is not a search <b>engine</b>. Instead it is a <b>front-end-tool</b> that lets you choose:<br /> <ul> <li>The <b>keywords</b> you want to search for (the search words)</li> <li>The <b>type of license</b> that you need (use for commercial purposes - yes or no, modify, adapt, build upon - yes/no)</li> <li>Which of the file host/search services to use (eg flickr, Google, Open clip art library - etc)</li> </ul> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVi4ciAbaU001Jm6p817OIZp7ddrsR6hK5RyExoZg-9r0DX6XSc7izS5iRSBmvSEHacs-RmG6pw5w7GA1TL1_OoflTTS8pAUvcrFnJ_uWotSdcR0YjCUBMDBz6iGlQZArtNYrPu8qe16i6/s640/creative-commons-search-main-options-menu-specify-keywords-modifiable-attribution.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="screen where you can enter creative commons search parameter values " border="0" height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVi4ciAbaU001Jm6p817OIZp7ddrsR6hK5RyExoZg-9r0DX6XSc7izS5iRSBmvSEHacs-RmG6pw5w7GA1TL1_OoflTTS8pAUvcrFnJ_uWotSdcR0YjCUBMDBz6iGlQZArtNYrPu8qe16i6/s640/creative-commons-search-main-options-menu-specify-keywords-modifiable-attribution.png" title="Creative Commons search tool home page" width="640" /></a></div> <br /> <br /> Once you have entered the search options, click on the source that you want to look in, and <b>you are  taken to that site</b> and shown the results of the search-query and options you entered.<br /> <br /> For example, when I entered:<br /> <ul> <li>"Christmas"</li> <li>Commercial allowed (because I wanted to make <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">a picture to use</a> in <a href="http://blogger-hints-and-tips.blogspot.com/">Blogger-HAT</a>, where I have advertising)</li> <li>Changes allowed (because I wanted an image that I could use as the basis for another one, rather than exactly as it is now)</li> </ul> <br /> and clicked on Fotopedia, I was shown:<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPfz6tD83aw8XwdimamG-8jP-PKmDcJfJFGGTc4jhioxPcnQi6IpVdjajMTxBBisis6I0XACMbo8BS6qJ6Pn7qhuRAGw2HqWTSMZ7MdO8c9N1RDjJ01C15v3MBhnMA5R4oB3NQIxUvWuV/s545/fotopedia-search-results-set-commercial-labelled-reuse-attribution.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="screen showing three Christmas-themes photos from Fotopedia, and their tools for changing pictures per screen and re-use options" border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPfz6tD83aw8XwdimamG-8jP-PKmDcJfJFGGTc4jhioxPcnQi6IpVdjajMTxBBisis6I0XACMbo8BS6qJ6Pn7qhuRAGw2HqWTSMZ7MdO8c9N1RDjJ01C15v3MBhnMA5R4oB3NQIxUvWuV/s640/fotopedia-search-results-set-commercial-labelled-reuse-attribution.png" title="Fotopedia search results set for Christmas with commercial use and modifications allowed" width="640" /></a></div> <br /> <br /> From here I could use the search tools in Fotopedia to refine my image-search and find just the right picture that I could use to represent a Christmas carol worksheet on my blog.<br /> <br /> <br /> <h2> What sources are included</h2> Today, the sources that are linked to from Creative Commons search are:<br /> <ul> <li>Eurpoeana - media</li> <li>Flickr - pictures</li> <li>Fotopedia - pictures</li> <li>Google web - web search results</li> <li>Google images - pictures</li> <li>Jamenda - music</li> <li>Open Clip Art Library - images</li> <li>SpinXpress - media</li> <li>Wikimedia Commons - media</li> <li>YouTube - video</li> <li>Pixabay - images</li> <li>ccMixter - music</li> <li>SoundCloud - music</li> </ul> <br /> <br /> It wouldn't surprise me if this list grow/shrinks, as sites become more or less useful as sources of public-domain or creative-commons-licensed materials.<br /> <br /> <br /> <h2> Things to watch out for</h2> Creative Commons cannot guarantee that the results of searches that start in their tools will always be available for re-use: source systems may change their approach, items may be mis-tagged, content owners may change their mind, etc. So they recommend that you should a<b>lways click-through to the original image in the source site, and double-check the license and attribution requirements</b> there.<br /> <br /> Also, some sites may allow you to link directly to the copy of the image on their site. this can be a lot quicker than making your own copy, uploading it and included it in your blog.  But doing this means that the image will not be used as <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">the thumbnail-image for your post</a>. And if the picture is ever removed from the original site - or its web-site address there changes - then the link in your blog will not work any more.<br /> <br /> <br /> <br /> <hr /> <h2> Related Articles:</h2> <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">Bloggers and Copyright - an overview</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/tools-for-applying-copyright-protection.html">Protecting your blog-contents from copyright theft</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/taking-action-when-someone-has-copied.html">Taking action when someone has used your copyright materials</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">Thumbnail images - a picture to summarise each post</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">Adding a picture to Blogger</a></div>

How to find free pictures for your blog, using Creative-Commons search

This article describes the Creative Commons search tool, which you can use to look for pictures, videos, music etc that are available for o...

Read more »

Blog home-pages and mobile-templates: Do they work together?

<div dir="ltr" style="text-align: left;" trbidi="on"> <b>This article discusses the issues of giving your blog a home page, and how this works for people using mobile devices.</b> <br /> <br /> <div style="clear: both;"> </div> <br /> <a href="https://draft.blogger.com/null" name="more"></a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhotYtfKpDl4C6pa8NHEjVWtA8jYCuoI_m8PP-Kr61VQT5pI_jWx4l2qENtasb9C-SzbUagwRFfoucg7MSgmm0P-1XTH0S0JxpBlDfDDk9ozZjq1WO5Jdy8oloaV3od86PPQMMoPqeWeJZE/s517/blogger-home-page-mobile-template-custom-redirect-issues.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhotYtfKpDl4C6pa8NHEjVWtA8jYCuoI_m8PP-Kr61VQT5pI_jWx4l2qENtasb9C-SzbUagwRFfoucg7MSgmm0P-1XTH0S0JxpBlDfDDk9ozZjq1WO5Jdy8oloaV3od86PPQMMoPqeWeJZE/s320/blogger-home-page-mobile-template-custom-redirect-issues.png" width="320" /></a></div> Previously I've described the <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">options for giving your blog a "home page"</a>, and also <a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html">how and why to enable a mobile template</a> for your blog.<br /> <br /> The home page (aka landing page) issue was a challenge with no good solution for a long time - until <a href="http://blogging.nitecruzr.net/2012/06/blogger-magic-static-home-page-improved.html" target="_blank">someone cleverer than me</a> spotted the potential offered by the custom-redirect feature.   With this, you can put the content for a "home page" into a post or page, and then redirect your blog's "landing page URL" (www.yourBlog.blogspot.com) to it.<br /> <br /> <br /> <div style="clear: both;"> </div> However, I have found that <b>if you have enabled a mobile template</b> for your blog, <b>then this approach does not work for visitors using mobile devices</b>.<br /> <br /> Instead of the home page that non-mobile visitors see, mobile-using visitors are shown <b>a mobile-specific page</b> with:<br /> <ul> <li>Your header,</li> <li>The page gadget (if you've used one - it's not used in this example) as a drop-down list</li> <li>A list of tiles - one post each (more about these below)</li> <li>An older posts / home / newer posts navigation tool</li> <li>A link to view the web-version</li> <li>A mobile attribution gadget (unless you've <a href="http://blogger-hints-and-tips.blogspot.com/2012/04/remove-attribution-from-mobile-template.html">removed it</a>)</li> <li>An <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/setting-up-adsense-on-your-blog.html" target="_blank">AdSense</a> ad-unit, if you have put AdSense into your blog using the AdSense gadget(*).</li> </ul> <br /> <br /> There may be some different things too, if you have chosen the "custom" mobile template option and added other gadgets to be shown on mobile.<br /> <br /> But a key point is that <b>any home-page custom-redirect that you have set up does not work</b> - even though other custom-redirects (ie not involving your home page) do work.<br /> <br /> <br /> <br /> (*) The rules for whether this is shown or not are actually a little more complex - but that's a topic for another day!<br /> <div> <br /></div> <br /> <h2> What do mobile users see on their post-tiles.</h2> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZQGN8cE_Pk1prt6SyCjFCRwrVfu1xfDy3k6QvzjxxBTLLeEyNCc0R-4LZA0f_-uqsiLkdyFdenGwM3orO03TyPkYZnE16VJjgzMH8Et4hSJbEGrtcFI6c5d0IQJRwuRjHRwr47uvXJ4C/s460/mobile-template-tiled-home-page-content-example.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZQGN8cE_Pk1prt6SyCjFCRwrVfu1xfDy3k6QvzjxxBTLLeEyNCc0R-4LZA0f_-uqsiLkdyFdenGwM3orO03TyPkYZnE16VJjgzMH8Et4hSJbEGrtcFI6c5d0IQJRwuRjHRwr47uvXJ4C/s320/mobile-template-tiled-home-page-content-example.png" width="218" /></a>The landing page for a mobile user includes a vertical "tiled" list of posts.<br /> <br />  In this, <b>each tile</b> has:<br /> <ul> <li>The date and post title,</li> <li>The <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">post-thumbnail photo</a> and</li> <li>The first few words for the post (less than the whole snippet though) for a post.</li> </ul> <br /> They are sorted by descending-date - meaning that your <b>most recent post is at the top</b> of the list.<br /> <br /> The applies if  you are using a standard (ie designer) or custom mobile template. <br /> <br /> <div style="clear: both;"> </div> The <a href="http://buzz.blogger.com/2012/08/dynamic-mobile-reading-experience.html" target="_blank">recently-introduced dynamic mobile template</a> is different again - in it, the tiled post looks more like the "before the jump" summary shown on your regular blog - but even so, it is still a list of posts sorted in reverse-date order, not a custom home-page.<br /> <br /> <br /> <h2> What this means for bloggers who care about their home page</h2> There are main things that you need to think about:<br /> <ul> <li>Using a mobile template gives you <b>far less control</b> over your mobile landing page - although it can be set up to work well if you understand how it operates, and if <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/use-blogger-to-make-a-website.html">you don't mind your blog looking like a blog</a>, not a webpage..</li> </ul> <ul> <li>If you have a mobile template enabled, and you want mobile visitors to your blog to always see one post first, then you need to <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/making-one-post-always-come-up-first.html">make sure that this post always has the most recent post-date</a>.</li> </ul> <ul> <li>With a non-dynamic mobile template enabled, visitors won't see whole posts or before the jump post-summaries initially: instead they see even more abbreviated summary tiles.</li> </ul> <ul> <li>With a dynamic mobile template enabled, visitors will see post-tiles that are more like the post-summary from the main blog (even if it's using a non-dynamic template) - but they still won't see your custom landing page.</li> </ul> <div> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://upload.wikimedia.org/wikipedia/commons/b/b1/Gnome-emblem-important.svg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://upload.wikimedia.org/wikipedia/commons/b/b1/Gnome-emblem-important.svg" width="200" /></a></div> <div> <b><br /></b> <b>If you are not happy</b> with mobile visitors to your blog being shown a tiled-list of posts, then you should <b>not</b> enable a mobile template - and you should disable it if you've already enabled one</div> <div> <br /></div> <div> This will mean that people using a mobile device to look at your blog will see a full-featured version, that they will most likely have to scroll around to view, ie they won't see the whole screen at one glance.   Though this sounds painful, in two of my blogs, I've decided that this is actually the best approach.</div> <br /> <br /> <br /> <hr /> <h2> Related Articles:</h2> <a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html">Enabling a mobile template for Blogger</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2012/04/remove-attribution-from-mobile-template.html">Deleting "Powered by Blogger" from mobile-template blogs</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/making-one-post-always-come-up-first.html">Making one post always come up first</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">How to give your blog a fixed landing page</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">Understanding post.thumbnail and post.snippet</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/use-blogger-to-make-a-website.html">Using Blogger to build a "real" website</a></div>

Blog home-pages and mobile-templates: Do they work together?

This article discusses the issues of giving your blog a home page, and how this works for people using mobile devices. Previously ...

Read more »

How to find the URL for a picture in Google Photos

<div dir="ltr" style="text-align: left;" trbidi="on"> <b>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.</b><br /> <br /> <br /> <div style="clear: both;"> </div> <a href="https://draft.blogger.com/null" name="more"></a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNM-BHOtKTS_2ytHEH9O2GBhX855JoxgR4f4Lf043rxHkHjcrEawrVJe_BemyFcN5qmC1ZJb6q_UBkZF6zfIlG4NiuWK34LPF6cZHl10jhLLyYAwOieP7_G5YpZwXD-K0LdWSog7f7IIaE/s1600/finding-the-url-of-a-pictures-image-photograph-in-google-photos.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNM-BHOtKTS_2ytHEH9O2GBhX855JoxgR4f4Lf043rxHkHjcrEawrVJe_BemyFcN5qmC1ZJb6q_UBkZF6zfIlG4NiuWK34LPF6cZHl10jhLLyYAwOieP7_G5YpZwXD-K0LdWSog7f7IIaE/s320/finding-the-url-of-a-pictures-image-photograph-in-google-photos.png" width="280" /></a></div> 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 <a href="http://blogger-hints-and-tips.blogspot.com/2015/06/how-does-google-photos-affect-blogger-and-google-plus-photos.html">here</a>. <br /> <br /> In Google Photos, there are two different types of web-address for a photo.<br /> <ul> <li>One is the <b>URL</b>, 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 <b>traditional style of internet-address</b> for a photo.</li> </ul> <ul> <li>The other is the <b>shareable link.</b>   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:  <a href="http://blogger-hints-and-tips.blogspot.com/2015/07/how-to-make-picture-sharing-links-in-google-photos.html">How to make and manage shareable links in Google Photos</a>.)</li> </ul> <br /> Unfortunately shareable links cannot be used in many applications.  This is because they don't just show the picture.   Instead they load a display showing the <a href="http://blogger-hints-and-tips.blogspot.ie/2015/06/how-to-change-date-of-photograph-in.html" target="_blank">picture-date</a>, the name and picture of the person who is logged in to Google at the time, and any other pictures that you have included in the same shareable link.<br /> <br /> If you want to use an image from Google Photos in a tool which cannot use shareable links, you need to find it's URL, instead.   At the moment, Google Photos doesn't have a way to get this - but luckily it's easy enough to find.<br /> <br /> <br /> <h2> How to get the URL or web-address of a photo in Google Photos, using your computer</h2> Log in to <a href="https://photos.google.com/" target="_blank">Google Photos</a><br /> <br /> Navigate to the picture that you want to get the link for.   <br /> <br /> Click on the picture, so you see it in full screen mode.<br /> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vaIewJQaxIzLjB0c282qp5N2dwOtXayrH4X9dvRBqmEd58Sljk3mKc4J1nRip0DfhHM3j72JmxOVgVALqUuvnO4mtnT0-CL7b6RnIiduLxUEwQYzeyyqKKOSRyeKZw4p58wxFUn1JRIH/s743-Ic42/google-photos-full-screen-mode-viewing-picture-and-options-and-scroll-buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vaIewJQaxIzLjB0c282qp5N2dwOtXayrH4X9dvRBqmEd58Sljk3mKc4J1nRip0DfhHM3j72JmxOVgVALqUuvnO4mtnT0-CL7b6RnIiduLxUEwQYzeyyqKKOSRyeKZw4p58wxFUn1JRIH/s743-Ic42/google-photos-full-screen-mode-viewing-picture-and-options-and-scroll-buttons.png" width="80%" /></a></div> <br /> <br /> <b>Right click </b>on the body of the photo and choose the "copy link" command from the menu that pops up where you clicked.   <br /> <br /> The exact wording of this command varies between browsers on operating system.   For example in <b>Chrome / Windows 8</b>, it is simply "<b>Copy Image URL</b>"<br /> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsJNEn6yHZ03mHmkHf5s6NTrUZ_bi-0DztLa6MGILlgFPojkvlLv0W58ucBRpK5CrZcNHsCCb8pJSzWzujpF_IZ29WB1gDx_7_dyNQEjvw8mMxfz0gbQpmGW3czOzFh9gCmf1d6DKDjESc/s640-Ic42/copy-image-url-get-picture-website-address-in-google-photos.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsJNEn6yHZ03mHmkHf5s6NTrUZ_bi-0DztLa6MGILlgFPojkvlLv0W58ucBRpK5CrZcNHsCCb8pJSzWzujpF_IZ29WB1gDx_7_dyNQEjvw8mMxfz0gbQpmGW3czOzFh9gCmf1d6DKDjESc/s640-Ic42/copy-image-url-get-picture-website-address-in-google-photos.png" width="80%" /></a></div> <br /> <br /> In Internet Explorer 11 / Windows 8, you need to <b>choose Properties from the pop-up menu</b>, and then <b>copy the value from the URL-field</b> in the window that opens<br /> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvLHrv7sd0lsxXvU8HFlVqxcnl3pzXiFXfr8FMDy4r_Rwzk-BNsPhvy-4zH7atI6KzR7zScT8my_SUit-TudSzHgJvb5ryrFmxix5DN7PjE5-pTnxuyOus7uAziMdHAF8MYbJN3yejk1A/s972-Ic42/get-picture-url-website-address-google-photos-using-internet-explorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvLHrv7sd0lsxXvU8HFlVqxcnl3pzXiFXfr8FMDy4r_Rwzk-BNsPhvy-4zH7atI6KzR7zScT8my_SUit-TudSzHgJvb5ryrFmxix5DN7PjE5-pTnxuyOus7uAziMdHAF8MYbJN3yejk1A/s972-Ic42/get-picture-url-website-address-google-photos-using-internet-explorer.png" width="80%" /></a></div> <br /> <br /> <br /> <b>Job done!</b> The URL for the photo which you were looking at is now in your computer's memory, and you can paste it (with ctrl/v or Edit > Paste) into any other place that wants it - for example Blogger's photo-insert wizard, or an email message or discussion forum or chat window.<br /> <br /> <br /> <h2> The URL from your address bar doesn't work</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg3Ujgf4_dZa-T9JHJx_yzcAt-Oqd8iVBwWFmS6MLWu0SoAOTIsDxT7g60ivbhcmT7TxEFLUQQ0JlTvyEyhbJzDy-BT08pr5Cj35SHoEPIXeGZ3kKhYMCvA-8-yGDpwcjKFnbEUuSkgWno/s1600/sad-face-function-doesnt-work.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg3Ujgf4_dZa-T9JHJx_yzcAt-Oqd8iVBwWFmS6MLWu0SoAOTIsDxT7g60ivbhcmT7TxEFLUQQ0JlTvyEyhbJzDy-BT08pr5Cj35SHoEPIXeGZ3kKhYMCvA-8-yGDpwcjKFnbEUuSkgWno/s200/sad-face-function-doesnt-work.png" width="80%" /></a></div> You may be tempted to just copy and paste the URL from the address-bar in your browser. And this will work <b>for you</b>.<br /> <br /> But if someone else (or you, when you are not logged in to the same Google account) tries to use it, they will get either:<br /> <ul> <li>A 404 error (if you are logged in to a different Google account), or</li> </ul> <ul> <li>Invited to log in to your Google account - followed by a 404 error if the Google account you log in to is not the one that owns the picture.</li> </ul> <br /> <br /> <br /> <h2> How to get the URL or web-address of a photo in Google Photos, using your phone (Android or iOS)</h2> Unfortunately I have not managed to find a way to get photogrpah URL (rather than the shareable link) from my smartphone as yet.<br /> <br /> If you can suggest any ways to do this, please leave a comment below.<br /> <br /> <br /> <br /> <hr /> <h2> Where to find more information</h2> <a href="http://blogger-hints-and-tips.blogspot.com/2015/06/how-does-google-photos-affect-blogger-and-google-plus-photos.html">Introducing Google Photos:  how does it compare to Google Plus Photos and Picasa-web-albums</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.ie/2015/06/how-to-change-date-of-photograph-in.html">How to change the date of a picture in Google Photos</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.com/2015/07/how-to-make-picture-sharing-links-in-google-photos.html">How to get the shareable link for one or more pictures in Google Photos</a><br /> <br /> <a href="http://blogger-hints-and-tips.blogspot.ie/2011/01/putting-text-and-pictures-side-by-side.html">Putting pictures and text side-by-side in blog-posts</a></div>

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 sharea...

Read more »

Putting a badge for a Facebook Page into your Blog

<b>This article describes making a Facebook badge to promote your page, and putting it onto your blog.</b><br /><br /><div style="clear: both;"></div><a name="more"></a><h2>What is a Facebook page</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBqzgVx4sLRqfto65RpJ64Wnb4zOW5qEt4GJjmJWVpnQHVqeTDveS356RWlObdE6-uqoE3yUtrLEcZz0b30UyoyHmYOE0xhz32lSf3cmqxe7soHxYnyfd8vk7gxJf4W3Vd2jCQo_gnhs/s1600/show-facebook-page-inside-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBqzgVx4sLRqfto65RpJ64Wnb4zOW5qEt4GJjmJWVpnQHVqeTDveS356RWlObdE6-uqoE3yUtrLEcZz0b30UyoyHmYOE0xhz32lSf3cmqxe7soHxYnyfd8vk7gxJf4W3Vd2jCQo_gnhs/s320/show-facebook-page-inside-blogger.png" width="320" /></a></div>This article is about how to make a badge to promote a Facebook <b>Page</b>.<br /><br />This is an example of the "follow me" <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">approach to linking your blog and the social networks</a>, although for Facebook pages your reader becomes a Fan rather than a Friend.<br /><br />Many people are confused about when they should use each of the types of "thing" in Facebook, ie<br /><ul><li><b>Profiles</b> - accounts for flesh-and-blood, living, breathing, individual people</li><li><b>Pages</b> - for websites, brands, and organisations that don't want to approve all their Facebook members</li><li><b>Groups</b> -  for organisations that want to approve individual members who join (and in return, group-owners can send private messages to individual members.</li></ul>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.<br /><br /><br /><h2>How to make a badge to promote a Facebook Page</h2>View all your Pages using the arrow drop-down at the very top right of Facebook's toobar.<br /><i>(Facebook chance the place for actions like this from time to time - you may need to look around to find your pages.)</i><br /><br />Copy the URL for the Page you want to promote <br /><i>(One way is to right click on its name, and choose copy-link-location- or whatever phrase your browser uses.   Another is to to go the page, and copy the URLfrom your address bar.)</i><br /><br />Come back to this article and click  here --- <b><a href="http://developers.facebook.com/docs/plugins/" target="_blank">Facebook Social Plugins</a></b>, to reach Facebook's tools.<br /><i>(I used to have instructions to launch this from Facebook - but I cannot find any link to it from my Pages page any more.)</i><br /><br />Choose <b>Page Plugin  / Web.  </b><br /><br />Scroll down the page, and set the options for your badge.  The first one is critical - the others optional:<br /><ul><li><b>Facebook Page URL</b> - this needs to be changed to the URL of your page (which you copied earlier)<br />If you have less than 25 Fans already, then your page's URL will be something like http://www.facebook.com/pages/Blogger-Hints-and-Tips/144194435594821 and you can get it by copying the link from the list of Pages for your account.<br />Once you have more than 25 fans, you can choose a  page-url on the Edit Info > Username screen.</li></ul><ul><li><b>Tab </b>- the tab on your page that is shown</li></ul><ul><li> <b>Width</b> - choose a value that suits the space on your template where you want to put the box.</li><li>Show <b>faces</b>, show <b>header</b>:  choose options that suit your purpose and blog template</li><li>Show <b>stream</b>:  this controls whether you show posting from the Page inside your blog</li></ul>As you choose options, the preview at the bottom updates to show what the button will look like:<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/AVvXsEgshjz1Z0-deyQZwVfv3TF-u7AWzdwuW6XIcJf1PMLpLL4vLZBkJs3K9YJCF6gElbbroSTpiTa_V9OoSJAEnbfB8ndBGVaFeKtpbI5HVj34wxgE_j1phzM4rsDK65U_jBLSgQizYsCgcpM/s1600/facebook-page-plugin-options-promote-facebook-on-website-for-free.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshjz1Z0-deyQZwVfv3TF-u7AWzdwuW6XIcJf1PMLpLL4vLZBkJs3K9YJCF6gElbbroSTpiTa_V9OoSJAEnbfB8ndBGVaFeKtpbI5HVj34wxgE_j1phzM4rsDK65U_jBLSgQizYsCgcpM/s400/facebook-page-plugin-options-promote-facebook-on-website-for-free.PNG" width="400" /></a></div><br /><br />When you are happy with the selections, choose <b>Get Code</b>.<br /><ul><li>Currently, there are options for an iframe or Javascript SDK:   <b>I recommend using the iframe</b>, unless you are comfortable with the two-part installation needed for the Javascripit, and you are sure that the visitors you want to target will have Javascripti enabled. </li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRGDzpw-GYBknXk2oihcIRoarwoSm_o-URzQ_lIOgbBIzgsqdbW_sP48XtR6-w4mETG4zHaediHBJImefOmzPqBhJ8sTwJT0N6kKipVKA7roFNZ5XibnZIPkcwTSxIQWBUkYonPohyfvQ/s1600/iframe-vs-javascript-SDK-code-installation-option-tab-selection.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRGDzpw-GYBknXk2oihcIRoarwoSm_o-URzQ_lIOgbBIzgsqdbW_sP48XtR6-w4mETG4zHaediHBJImefOmzPqBhJ8sTwJT0N6kKipVKA7roFNZ5XibnZIPkcwTSxIQWBUkYonPohyfvQ/s400/iframe-vs-javascript-SDK-code-installation-option-tab-selection.PNG" width="400" /></a></div><br /><br /><br /><b>Copy</b> the code provided<br /><div><br /><b>Install</b> the code into your blog - there several options for <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">installing the HTML</a>, depending on where you want to put the badge or button.<br /><br /><br /><b>Job Done!   </b>Your blog will now display a gadget that promotes the selected Facebook page - people can view and like your Page from within your blog.<br /><br /><br /><h2>What your visitors will see</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOjWOpzXgpqX5agIbRMnLuHJdMOjWOuRIXyhApg7t8r0PrBB0ZBdotz1zNzurApcrmjHlD0n9wmN9iKdSYTUFVYzJfK_56_S2tB85BT-H1Zqh6gTnRxI5oZLwz8W2C6VcNtDZ2oipCbf3/" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOjWOpzXgpqX5agIbRMnLuHJdMOjWOuRIXyhApg7t8r0PrBB0ZBdotz1zNzurApcrmjHlD0n9wmN9iKdSYTUFVYzJfK_56_S2tB85BT-H1Zqh6gTnRxI5oZLwz8W2C6VcNtDZ2oipCbf3/" width="200" /></a></div>People who visit your blog through a web-browser will see a Facebook area, including a Like button and whatever other options you have chosen.<br /><br />This can be quite a powerful tool:  you can easily use two or three different combinations on different parts of your blog:  one that has no border, no faces and no header but does show a Stream can effectively look like a "live" feed from your Facebook page to your blog, while another one with different options can show off the size of your fan-base.<br /><br />Be aware that the Like button shown in this button gives people the option to Like your Page in facebook  - not your blog directly, and not the current post that they are reading.   If you want them to be able to Like your blog or blog-posts, you need to provide this option separately (and many of your visitors are likely to be confused by the different).<br /><br />As always, people who <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">read your blog via a feed reader</a> (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.<br /><br /><br /><h2>Customizing the code</h2>You can change the characteristics of the box without having to generate the code from Facebook again.   For example you can later the width and/or height - just remember to do it in both of the places required if you are using the iframe option:<br /><blockquote><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Hints-and-Tips%2F144194435594821&amp;<b>width=160</b>&amp;colorscheme=light&amp;show_faces=false&amp;border_color=purple&amp;stream=true&amp;header=false&amp;<b>height=395</b>" scrolling="no" frameborder="0" style="border:none; overflow:hidden; <b>width:160px; height:395px;</b>" allowTransparency="true"></iframe> </blockquote><br />fyi, I could have just quoted this code, and said to use it on your blog.  But I don't usually do this when I'm describing how to link Blogger and any third party product, because it's likely that Facebook (or whoever) will change their code in the future:  <i><b>it's always safest to get the most up-to-date copy of the code from the source-site</b></i> when you need it. <br /><br />The facebook page where you get the code from also has more information about controls you can set in the code, too.   Check it out for more information.<br /><br /><br /><h2>Do you need to own the page you want to promote?</h2>No - not any more.<br /><br />At one stage, the first step in these instructions was to<br /><blockquote class="tr_bq">"Log into Facebook with a profile (ie personal account) that has <b>administrator rights for the page</b> you want to promote."</blockquote><br />But that's no longer necessary.   You can promote any Facebook page that you want to, on your blog.<br /><br />But be aware that if you show the page-feed on your blog, and you don't own the page, then you have no control over what is shown.   It's possible that a feed from someone else's Page will show material which breaks Blogger's terms and conditions - or which you simply don't want on your blog.    For this reason along, I'd recommend only promoting your own, or closely trusted, pages on your blog.<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 from a third-party into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/how-data-in-blogger-blogs-is-organised.html">How the data in Blogger blogs is organised</a> <br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/02/linking-blogs-and-websites.html">Linking Blogs and Websites</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/tools-for-linking-blogger-and-social.html">Tools for linking Blogger and the Social Networking sites</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/putting-facebook-share-this-badge-on.html">Putting a Facebook "share this" button on your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">Copyright, Blogs and Bloggers</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 bloggers</a></div>

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 ...

Read more »

mail2Post: How to update your blog by email, instead of using Blogger

<b>Blogger's mail2Post tool lets authors make blog-posts, without using the Blogger software.   All you need to do is set it up, and write posts using your regular email tools.</b><br /><br /><div style="clear: both;"></div><a name="more"></a><h2>Mail2Post and Blogger</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7LJCdlcnVL1fLP7BsKfeJc5brPkE5ikZrj4uvGk3keOHcFYMf1en22xwsgQHjLfSVGrNII9TtKpZSKkBkxYz-0Gh1yEp25SQlWTLK3wvu4dR9vhJK9MC2n8kilC67so3SdBFLoTgzcJgh/s128/Nuvola-like_email_internet.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7LJCdlcnVL1fLP7BsKfeJc5brPkE5ikZrj4uvGk3keOHcFYMf1en22xwsgQHjLfSVGrNII9TtKpZSKkBkxYz-0Gh1yEp25SQlWTLK3wvu4dR9vhJK9MC2n8kilC67so3SdBFLoTgzcJgh/s1600/Nuvola-like_email_internet.PNG" /></a></div>The mail2Post feature, sometimes known as Post-to-profile, is a way of putting content on your blog without using the full Blogger software for writing the post. <br /><br />It's not quite as good as using Blogger itself - there are a few features missing - but it is good enough in many situations.<br /><br /><br /><div style="clear: both;"></div><br /><h2>How to set up mail2Post</h2>Log in to Blogger with the <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html" target="">Google account</a> that you want to have mail2Post rights to your blog:  this account needs to already be <a href="http://blogger-hints-and-tips.blogspot.com/2011/12/making-someone-author-on-your-blog.html">set up as an author</a> for the the blog.<br /><br />Go to<br /><ul><li>The <b>Settings </b>tab - if you are logged on with an author account, or</li><li>The <b>Settings > </b><b>Email </b>tab if you are using an administrator account   </li></ul><br />Beside <b>Posting using email</b>, there is a place where you can enter some "secretWords", to make up an email address that you can use to post to your blog.<br /><br /><b>Enter</b> some suitable words:  make sure it's <b>not too easy to guess</b> (your surname would not be a good choice!), so that spammers cannot get into it:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpLIdT50D-ShbwEYk0FGXxvg1BOrIt1cql-BmeNIYzzMpscK8Qp9e75jaMa-YLRpxBXTqb3hqNyNg0AybmyA1OTBiRT9NJQqFinbteVV50rbVRx4dPQnB_gyIrknhGZMeL6JIWyh6NwHtP/s1600-h/Email-posting.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpLIdT50D-ShbwEYk0FGXxvg1BOrIt1cql-BmeNIYzzMpscK8Qp9e75jaMa-YLRpxBXTqb3hqNyNg0AybmyA1OTBiRT9NJQqFinbteVV50rbVRx4dPQnB_gyIrknhGZMeL6JIWyh6NwHtP/s640/Email-posting.bmp" width="90%" /></a></div><br />Choose either to<b> publish emailed updates</b> as soon as they arrive, or to <b>save email as drafts</b> so that you,  or <a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html">another administrator</a>, can review them before posting. <br /><br /><b>Note down </b>the full email address, ie   NAME.your-secret-words@blogger.com   (you will need this later - and unfortunately because of the way it's displayed, it is not easy to copy-and-paste the value).<br /><div><br /><div>Click <b>Save Settings</b>.<br /><br /><br />Job Done!   Your blog is now set up so that posts can be created by being emailed to it, instead of requiring someone to use the Blogger software to write each post.<br /><br /><br /><h2>Using the mail2Post address</h2>Once mail2Post is set up, anyone who <b>sends an email message to the email address you copied</b> can post to your blog, with what ever restrictions you set.<br /><br />You <b><i>might</i></b> put message on your blog saying<br /><blockquote class="tr_bq"> "send contributions to YOURNAME.YOURSECRETWORDS@blogger.com"</blockquote>But be aware that this could generate a lot of spam.   And in the worse case, the spam could get your blog deleted for breaking Blogger's terms and conditions.<br /><br />Alternatively, you might just <b>tell the address to selected people</b> - or perhaps even just use it yourself.<br /><br /><br /><h2>How is a Blogger Post made from an email message</h2>When a message is sent to your mail2Post address:<br /><ul><li>The <b>subject-line</b> of your email message becomes the <b>Post-title</b></li><li>The body of the <b>email message</b> becomes the <b>body</b> of the post</li><li><i>I think:</i>  If you automatically publish emailed posts, then the <b>post date-and-time</b> is the moment at which Blogger's servers received the incoming email message - expressed in Blogger's default time zone (PST OR PDT, I think).</li><li><b>No labels</b> are applied to the post</li><li>The <b>post-author</b> is the <b>profile name of the blog-author</b> who set up the mail2Post address.</li></ul><br /><b><span style="font-size: large;">Pictures and Videos</span></b><br />People have reported various results when they include images and videos inside messages sent via mail2Post.   Personally, I have tested:<br /><ul><li>An<b> attached picture</b> - posted ok, the image is show before all the text from the body of the email message</li><li>An <b>attached video</b> file (4meg) - posted ok with the video appearing to be above the text from the email message</li><li>An <b>in-line photo</b> - worked perfectly, the picture is placed in the post in the same position (relative to the text) that it was in the original email.</li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF7svTk3VtFfQ30_6dJrgcvF_DUml7M99OdPWDsDMJe0J4z97EE-zlNHG-oPZeYlaNHkbzAARU_qw2B_AnhgeLwH0HxE3nvNck0tL4Mze6R58VW_TULDel9y8f15pUBXhmx3ZQhFfcl39B/s373/photo-attached-blogger-mail2post-result.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="369" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF7svTk3VtFfQ30_6dJrgcvF_DUml7M99OdPWDsDMJe0J4z97EE-zlNHG-oPZeYlaNHkbzAARU_qw2B_AnhgeLwH0HxE3nvNck0tL4Mze6R58VW_TULDel9y8f15pUBXhmx3ZQhFfcl39B/s640/photo-attached-blogger-mail2post-result.png" width="640" /></a></div><br />I suspect that the results  depend on they type of picture, the email client you are using, and the message format settings.   My testing was with Mozilla Thunderbird, which has a particular way of thinking about "attachments", slightly different from other email systems that I have used (eg Microsoft Outlook).<br /><br />Probably the only way to discover how photos are handled when you use your email to send them is to<a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html"> set up a test-blog</a> and<b> experiment with different options</b>.<br /><br /><br /><h2>What your readers see</h2>People who read your blog in a web-browser see mail2Post entries just like any other posts.   If your blog displays the poster's name, then mail2Post entries have the name of the blog-author who set up the mail2Post address.<br /><br />As mentioned before, the positioning of pictures and videos may not always be as good:  attached pictures, in particular, may be shown as the very stop of the post.<br /><br />Apart from that, there is nothing to show visitors that the post was created using email - in either the post or in the <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">blog's RSS feed</a>.<br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2011/12/making-someone-author-on-your-blog.html">Giving someone write access (ie author permissions) to your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html">Setting up a blog administrator</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Understanding Google accounts</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html">Setting up a test-blog to try things out in private</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">RSS, and why it matters for your blog</a></div></div>

mail2Post: How to update your blog by email, instead of using Blogger

Blogger's mail2Post tool lets authors make blog-posts, without using the Blogger software.   All you need to do is set it up, and write ...

Read more »

Taking action when someone has copied your blog without permission

<b>This article is about the steps you can take when someone has made an unauthorized copy of something that is published on your blog.</b> <br /><br /><br /><div style="clear: both;"></div><a name="more"></a><h2>Finding out that your blog has been copied</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgksQzb2uj9PatKoKY5uSgF4FAwdxPa47HGVWeqbtybUbrisXjzQLTVysW2o1h2deW-bsxcmf8lqZlpKNkFJ0ppWtaT01gGeFj3CCJOmmNy7Kml-DWGduw6BVwSlV3lE96IQh7qmpgXAc/s562/what-to-do-when-someone-steals-your-blog-content-and-images.png.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgksQzb2uj9PatKoKY5uSgF4FAwdxPa47HGVWeqbtybUbrisXjzQLTVysW2o1h2deW-bsxcmf8lqZlpKNkFJ0ppWtaT01gGeFj3CCJOmmNy7Kml-DWGduw6BVwSlV3lE96IQh7qmpgXAc/s320/what-to-do-when-someone-steals-your-blog-content-and-images.png.png" width="320" /></a></div><span style="background-color: white;">Previously, I've described </span><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html" style="background-color: white;">how copyright applies to blogs</a><span style="background-color: white;"> in very general terms, and the </span><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/tools-for-applying-copyright-protection.html" style="background-color: white;">steps you can take to apply copyright protection to your blog</a><span style="background-color: white;">.</span><br /><br />Even if you follow these these steps, if you put material onto the internet it is quite likely that someone will copy it.<br /><br />This maybe done out of naivety, or as a deliberate attempt to rip you off, or as part of an organised spam-blogging ("splogging") operation.<br /><br /><div style="clear: both;"></div><br />There are several way you might find out that someone has copied your work:<br /><ul><li><b>You, or your friends, notice it</b><br />Maybe you or one of you readers searched for a certain phrase and you found your content elsewhere.  Or maybe you found a link to an identical post on a help-forum or discussion board.  If you use a lot of in-post linking (ie you <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/blogger-hints-and-tips-lite-quick-and.html">link to another article</a> in your content), and notice you are getting a lot of visits from somewhere unusual, then you might visit that site and find your post copied word-for-word, including the unchanged links.</li></ul><ul><li><b>Google's spam bots notice it:   </b><br />If you get an email or a notice saying that your blog has been identified as potential spam, then one of the possibilities is that a real spammer has chosen your content.</li></ul><br />If you found out that someone has copied you work because Google's spam-bots detected the problem, then you simply need to follow the instructions in the email that Google sent you, or consult the <a href="http://help.blogger.com/" target="_blank">Blogger Help Forums</a>.  In short, you will be advised about a four step process that you need to follow.   This is tedious, but the nice part is that Google is dealing with the copy-cat for you, and (if you're not a spammer) you'll get your blog back.<br /><br />If you find out some other way, then you need to decide what do to about the problem (if indeed you believe is is a problem).   This is closely linked to <i><b>what you want to achieve</b></i> - this could be any of:<br /><ul><li>Do nothing - if you don't mind being copied, and you're willing to risk being incorrectly identified as a spammer</li><li>Getting the copied work taken down</li><li>Leaving the copy in place, with your name or URL  added beside it </li><li>Being paid compensation</li><li>Receiving a public apology </li></ul>and I'm sure there are other possible remedies, too. <br /><br />Once you know what you want to achieve, you can <i><b>plan what steps</b></i> you need to take, based on the notes in the next section.<br /><br /><b>Reality check:</b>  There is nothing wrong with being ambitious and wanting to receive $10M compensation.  But  unless you can afford really good lawyers, it might be a good idea to have a backup plan which involves a <i><b>realistic goal</b></i> too, eg having your name added to the copyright materials, or having them taken down.<br /><br /><br /><h2>Steps for resolving copyright problems</h2><h3>Start the easy way</h3>Unless you're certain that the copying was deliberate and malicious, the first step is most cases is to <b>send a nice email to the person who made the copy</b>, telling them that it's yours and what you want done about it.  (You might need to just leave a comment on their blog, if no email address is provided.)<br /><br /><ul></ul><h3>Report them to their internet service provider</h3>The obvious first step if politeness doesn't work is to <b>complain to their web-host</b>:<br /><ul><li><i><b>If they use Blogger</b></i> (ie their URL is WHATEVER.blogspot.com, or they have a custom domain but the source-code on their site looks like Blogger code), <br />then you should contact Google through this page:   <a href="http://www.google.com/blogger_dmca.html" rel="nofollow" target="_blank">http://www.google.com/blogger_dmca.html</a>  <br />Google have a very thorough process for dealing with claims of content stealing - and if the other site that you say has stolen your work is also published in Blogger, they can look at the dates in their database to see who actually published it first.<br />Make sure that you read all the details of Blogger's policies before you submit a complaint:  they don't like malicious complaints, and you could be fined quite heavily if you claim that you own something which you don't really own. </li></ul><ul><li>If the person who has copied your work <i><b>isn't using Blogger</b></i>, you may need to do some detective work with whois (use Google-search it to find a whois service for the domain you're looking for) to see   who the host is, and what process this host uses to resolve copy-right complaints.  <br />This could be particularly difficult to do if they're not located in the same country that you are (so their laws will be different), or if they use a different language.</li></ul><ul><li>If the person who has copied your work has put it into <i><b>YouTube</b></i>, you can use information and tools on  <a href="http://www.youtube.com/t/copyright_notice">YouTube's opyright page</a>. </li></ul><b><br /></b><br /><h3>Complain to other services</h3>If the other party's web-service-provider can't or won't help, then you could try <b>reporting them to other services</b> that the use. <br /><br />For instance many websites are also on Facebook:  if the contents includes your material, or links to a website that's distributing your copyright material, you may be able to use <a href="https://www.facebook.com/help/intellectual_property" target="_blank">Facebook's intellectual property violation reporting process</a>.  (I haven't tried it myself, but have been told that this can be particularly effective.)<br /><br />If they show advertising on their site, then complaining to either the advertisers, or to the company that organises the advertising programme, may be effective.  AdSense is <a href="http://adsense.blogspot.ie/2012/08/policy-tips-avoiding-copyright.html" target="_blank">quite sensitive to not having it's ads shown along with copyright violations</a>, and provides a <a href="https://support.google.com/adsense/bin/request.py?contact_type=violation_report" target="_blank">policy violation reporting form</a> that you can let them know about the problem.<br /><br /><h3>Charge them</h3><a href="http://commons.wikimedia.org/wiki/File%3ALogodollar2.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="By Migdejong at nl.wikipedia [Public domain], from Wikimedia Commons"><img alt="Logodollar2" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Logodollar2.jpg" width="128" /></a>Some people have had success from <b>sending the offender a bill</b> for use of your work.  This takes a bit of thought:  if they pay the invoice, then legally you may have licensed them to use your work for far less than it is worth.   On the other hand, if the amount that you ask them for is ridiculously high, they will probably just laugh and ignore you.<br /><br /><h3>Threaten legal action</h3>This can be fun:  write a very formal-sounding letter demanding that they cease-and-desist from using your work (name it very specifically) by a certain date, and advising that failure to do so may incur penalties including but not limited to commencement of legal proceedings for in which you will be looking for legal expenses as well as damaged incurred.   <br /><br />If you would actually be willing to sue the person (see the section below), then consult a lawyer, and get them to send the letter.   But if there's no chance that you actually will sue  (and most bloggers simply don't have the time, resources or levels of proof to do so), just <b>make the letter sound good</b>.   If necessary, get a friend who can write pompous-sounding letters to draft it for you.    Send it by regular mail - emails are too easily ignored - and make it look official.<br /><br />Finding the address to send a letter to can be a challenge - one option is to scour your copy-cat's work, and see if you can find their company or personal details on <a href="http://www.linkedin.com/" target="_blank">LinkedIn</a> (most are smart enough to hide themselves on Facebook).    And if you can, then complaining to their boss may be an option, too, depending on your niche and whether their action might be harming their company's reputation.<br /><br /><h3>Legal action</h3>If all else fails, another option is to <b>sue the person or organisation that copied your work</b>.  If you or the copy-cat are in the USA, then the Digital Millennium Copyright Act (DMCA) provides an approach for this.   But if you and they are in different countries, then different laws and processes may apply.  But no matter where you are, two things are likely:<br /><ul><li>You will need to hire a lawyer - so it may be expensive and take a lot of time, and </li></ul><ul><li>You may need to prove that you really did create the work, and when it was made.   </li></ul>The second point is where copyright registration services come in to play:  they provide evidence that you really had created the work as at a certain date.  Unfortunately this is one of the ironies of copyright:  <b>listing your material with a copyright service does nothing to stop anyone using it</b>.  But if you don't list it shortly after it's created, you probably won't have any evidence if you ever get to the point of wanting to sue (or even formally complain about) someone who has copied your work.<br /><br />There are some other issues with copyright services too:<br /><ul><li>It can be difficult to list a blog, which by its nature has different material being loaded very frequently.</li><li>You won't necessarily know which services(s) to register with - because you don't know where someone who copies your work is located, so you won't know what services a court in your country will accept evidence from.</li></ul>So, while I'm not advising you to avoid the registration services altogether, it's important carefully to choose when and how to use them.<br /><br /><h3>Peer pressure / Name-and-shame</h3>If the legal approach doesn't work, or would be too expensive, then another option is to <b>use social pressure</b> to convince your copy-cat that they need to stop copying your work etc.  This can take a range of formats - eg, if a local small business has copied your photograph and isn't willing to compensate you, you might get all your friends to contact the business and threaten not to buy there again.   Or you might start a Facebook campaign, or put a video on YouTube telling your side of a story.   Whatever you do, make sure you that you:<br /><ul><li>Really know what you want to achieve:  fame, a pay-off to stop the campaign etc</li><li>Consider the risks (ie what could go wrong) and whether they're worth it</li><li>Don't break the law yourself (it's not worth it, especially if you're the small guy), and</li><li>Think strategically about what you might do, and how this could affect the relationships in your area or niche:  some people are just too much trouble to have an enemies.</li></ul><br /><blockquote><div style="text-align: center;"><hr /><i>DISCLAIMER</i></div><br /><div style="text-align: center;"><i>This article contains general advice about the copyright issues faced by people who use Blogger.   It cannot cover every possible case or specific legal systems.  </i></div><br /><div style="text-align: center;"><i>If you need <b>legal advice about a particular situation, consult a lawyer</b>, ideally one who is familiar with copyright law in your country.<br /><br />I do not, <b>under any circumstances</b>, suggest using illegal approaches - threats of violence, sabotage, etc.</i></div></blockquote><br /><hr /><br /><h2>Related Articles </h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">Copyright, Blogs and Bloggers, an Introduction</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/10/putting-html-code-from-third-party-into.html">Putting 3rd party HTML (eg a Creative Commons licence) into your Blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/removing-attribution-gadget-from.html">Removing the Attribution Gadget from your Blog</a>

Taking action when someone has copied your blog without permission

This article is about the steps you can take when someone has made an unauthorized copy of something that is published on your blog. Findin...

Read more »

Displaying a gadget only on the home page - or only on a specific page

<b>This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they visit your blog (often called the "home page").  </b><b>It is one of a series of articles about <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">controlling what goes on the homepage</a> of your blogspot blog.</b><br /><div style="clear: both;"></div><br /><a name="more"></a><br /><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-0VYwgk2eoTIPCjUTlUJtqtZCNwJuXKDGCnMVUHBfKICLUJFtkAkiSDxJA_9Mo7Dq-gdFdULUP7SRCFLawNnFtWevRG0T_SkASwVnyryBetUC3aszPkE7aPLq9OqUva4UkxjW6Zu-oh6_/s286/front-page-bob.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-0VYwgk2eoTIPCjUTlUJtqtZCNwJuXKDGCnMVUHBfKICLUJFtkAkiSDxJA_9Mo7Dq-gdFdULUP7SRCFLawNnFtWevRG0T_SkASwVnyryBetUC3aszPkE7aPLq9OqUva4UkxjW6Zu-oh6_/s286/front-page-bob.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Front Page Bob<br />By Paginator (Own work)<br /> [<a href="http://creativecommons.org/licenses/by/3.0">CC-BY-3.0</a>], <a href="http://commons.wikimedia.org/wiki/File%3AFront_page_bob.jpg">via Wikimedia Commons</a></td></tr></tbody></table><div>There are a number of reasons why you might want to put a gadget only the screen that shows when a visitor first navigates to your blog's home page.<br /><br />You may want to show a welcome message, or a topic-index page, or to give a view of your recent tweets or some other RSS feed.    </div><div><br /></div><div>No matter what the reason, the process is very similar:<br /><div style="clear: both;"></div><br /><h2>How to make a gadget only appear on the first page</h2><i>Note:  in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing.  I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.</i><br /><br /><h3>1   Add the gadget</h3></div><div>Do this in <a href="http://blogger-hints-and-tips.blogspot.com/2012/03/adding-gadget-to-your-blog-using.html">the usual way</a>.<br /><br /><br /><h3>2  Place the gadget</h3>Drag-and-drop the gadget to the place where you want it.   It may be over or under your blog-posts gadget, or in a totally different place.<br /><br />A popular place for a gadget that is going to look like a "home page" would be in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmeL14j7kjM71Fnwxx1NMvUYg_VSZGmZcpDJd8jFkradpPRJSDVbSOFYJikOZcd4Hg4zLfxDvJGB52AqzZ7zkNgKPckogEKq1ErkhHmU6z2qFSoWnQ21b1wqQ4tnoPuLpgxjBEp3A3-GQ/s1600-h/Layout+-+Page+Elements+screen.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmeL14j7kjM71Fnwxx1NMvUYg_VSZGmZcpDJd8jFkradpPRJSDVbSOFYJikOZcd4Hg4zLfxDvJGB52AqzZ7zkNgKPckogEKq1ErkhHmU6z2qFSoWnQ21b1wqQ4tnoPuLpgxjBEp3A3-GQ/s640/Layout+-+Page+Elements+screen.PNG" width="640" /></a></div><br /><br /><h3><b>3  <a href="http://blogger-hints-and-tips.blogspot.com/2012/04/finding-gadget-id-value-for-widget-in.html"> Find the Gadget-ID</a>  </b>in the usual way.<br /><br /><br /><b>4  Find the code for your gadget:</b></h3><a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">Edit your template</a>.<br /><br />Click in the search box inside the template editor, and look for the widget name that you noted in step 3.   Once you've found it, notice what comes after it.   In this example, it's the line for Blog1:<br /><blockquote>          <b:section class='main' id='main' showaddelement='no'><br /><b><b:widget id='Text1' locked='false' title='Test gadget' type='Text'/></b><br /><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></blockquote><br />Use the <b>expansion triangle at the left side of the template editor</b> to expand this section of the code.  After you do, it will look like:<br /><blockquote> <b><b:section class='main' id='main' showaddelement='no'></b><br /><b><b:widget id='Text1' locked='false' title='Test gadget' type='Text'></b><br /><b><b:includable id='main'></b><br /><b><span style="color: red;">  <!-- only display title if it's non-empty --></span></b><br /><b><span style="color: red;">  <b:if cond='data:title != &quot;&quot;'></span></b><br /><b><span style="color: red;">    <h2 class='title'><data:title/></h2></span></b><br /><b><span style="color: red;">  </b:if></span></b><br /><b><span style="color: red;">  <div class='widget-content'></span></b><br /><b><span style="color: red;">    <data:content/></span></b><br /><b><span style="color: red;">  </div></span></b><br /><b><span style="color: red;">  <b:include name='quickedit'/></span></b><br /><b></b:includable></b><br /><b></b:widget></b><br /><b><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></b></blockquote><br /><h3><b>5   Add conditional formatting</b></h3>You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else!  (which is why you noted what comes afterwards in step 4)<br /><br />And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.<br /><br />The code to use is this - except put the gadget-id instead of the XXX.<br /><br /><blockquote><b><i><b:if cond='data:blog.canonicalUrl </i></b><b><i>== data:blog.homepageUrl'></i></b><br /><br />THE <b><span style="color: red;">red </span></b>CODE FOR YOUR GADGET GOES IN HERE </blockquote><blockquote><i><b><b:else/></b></i><br /><i><b><br /></b></i> <i><b><style type='text/css'></b></i><br /><i><b>#XXXX {display:none;}/*remove blank space that the gadget leaves*/</b></i><br /><i><b></style></b></i><br /><b><i></b:if></i></b></blockquote><br />The example above looks like this, when the code has been added:<br /><blockquote><b:section class='main' id='main' showaddelement='no'><br /><b:widget id='Text1' locked='false' title='Test gadget' type='Text'><br /><b:includable id='main'><br /><b>  <b:if cond='</b><b>data:blog.canonicalUrl</b><b> == data:blog.homepageUrl'></b>  <!-- only display title if it's non-empty --><br />  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div class='widget-content'><br />    <data:content/><br />  </div><br /><br />  <b:include name='quickedit'/><br /><br /><b><b:else/></b><br /><br /><b><style type='text/css'></b><br /><b>#Text1 {display:none;}/*remove blank space that the gadget leaves*/</b><br /><b></style></b><br /><br /><b></b:if></b></blockquote><blockquote></b:includable><br /></b:widget><br /><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></blockquote><br /><br /><h3><b>6  Check that it's worked</b></h3>Preview your blog before you save the changes:  check that the the widget is visible.<br /><br />Save the template changes, and look at your blog.  Check that<br /><ul><li>The widget is on the first page</li><li>The widget is not seen when you look at an older page (eg one from your archive)</li><li>The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.</li></ul><br />If anything is wrong with how your blog is working, go back to the template editor (Layout > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1.   This will let you blog work properly, while you figure out what went wrong.<br /><br /><br /><h2>How to display a gadget only on a specific post or page</h2><br />Follow exactly the same approach as above.<br /><br />But instead of   <br /><blockquote class="tr_bq"><b><i><b:if cond='</i></b><b><i>data:blog.canonicalUrl</i></b><b><i> == data:blog.homepageUrl'></i></b></blockquote><br />Make the conditional statement based on something else.<br /><br />This can be a different condition, or a specific page URL.    For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:<br /><blockquote class="tr_bq"><b><i><b:if cond='</i></b><b><i>data:blog.canonicalUrl</i></b><b><i> == "POST-URL"'>></i></b></blockquote><br />Note:   for the address of the page, if your blog does not have a custom domain, then be careful to use the "blogspot.com" version of the address, not one with a country-level name  (eg the blogspot.in or blogspot.co.uk version)<br /><br /><br />To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=).   For example:<br /><blockquote class="tr_bq"><b><i><b:if cond='</i></b><b><i>data:blog.canonicalUrl</i></b><b><i> != data:blog.homepageUrl'></i></b></blockquote><br />Blogger have now provided an expanded list of conditional statements - you can find information about it:<br /><br /><ul><li>The support forum articles about tags <a href="https://support.google.com/blogger/answer/46995?hl=en" target="_blank">https://support.google.com/blogger/answer/46995?hl=en</a></li><li>and about expressions:   <a href="https://support.google.com/blogger/answer/6214580?hl=en" target="_blank">https://support.google.com/blogger/answer/6214580?hl=en</a></li><li>Blogger Buzz about some more extensions:   <a href="http://buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html" target="_blank">http://buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html</a></li><li>Another Blogger Buzz post - even more extensions:  <a href="http://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html" target="_blank">http://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html</a></li></ul><br /><br /><br /><hr /><h2>Where to get more information</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">Controlling what goes on the homepage</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/03/adding-gadget-to-your-blog-using.html">Adding a gadget / widget / page-element to your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">Editing your blogger template</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/picasa-blogger-part-4-putting-slideshow.html">Putting a slideshow from Picasa onto your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/getting-html-code-to-put-picture-into.html">Getting the HTML code to put a picture into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/making-gadget-that-looks-like-post.html">Making a gadget that looks like a posthttp://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html</a></div>

Displaying a gadget only on the home page - or only on a specific page

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they ...

Read more »

Making someone an author on your blog

<b>This article shows you how to set up another person (ie another Google account) as an author for your blog.</b> <br /><br /><div style="clear: both;"></div><a name="more"></a><h2>Google, Blog-Authors and Blogger</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIDyQKcgMwqJVT9yRLQrD71EXio9qNL9dyd-TJWq4v8fRND4lMkAQboGNQt2DGBZ-0E8rb07Gbi3w1uRIC44sBhxVEP3t0MtSS_5MSID5UAx_2yaclb9xPfAgCFY-0XSNeJlUVOFMS-pW/s255/team-authors.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGIDyQKcgMwqJVT9yRLQrD71EXio9qNL9dyd-TJWq4v8fRND4lMkAQboGNQt2DGBZ-0E8rb07Gbi3w1uRIC44sBhxVEP3t0MtSS_5MSID5UAx_2yaclb9xPfAgCFY-0XSNeJlUVOFMS-pW/s200/team-authors.png" width="198" /></a></div>Setting someone up as an "author" in Blogger is <b>one</b> way that you can let other people post to your blog.<br /><br />It's easy to do: you tell blogger to create an invitation, which sends the person an email saying you would like to be an author, they click a link in the email and then sign in with a Google account to accept the invitation. And once it is done, the person can write and edit their own posts.<br /><div style="clear: both;"></div>All you need to know is the person's email address: it doesn't matter if it's a gmail address or not.  You can send invitations to people with hotmail, yahoo, and indeed any email address where your invitee can read their email.<br /><br /> However the other person will need to use a <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Google account</a> (which doesn't necessarily include Gmail) to accept the invitation: don't waste time inviting people who are allergic to Google and not willing to sign up for an account.<br /><br /><br /><h2>How to make someone an author on your blog</h2><b>Send</b> them an invitation:<br /><blockquote class="tr_bq"><ul><li>Go to Settings > Basic > Permissions</li></ul><ul><li>Beside Blog Authors, click <b>+ Add Authors</b></li></ul><ul><li>Enter the email address of the person you want to invite</li></ul><ul><li>Click Ok</li></ul></blockquote><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ptVaqNPInKX0IBBMg-a4cLTZ1zcwSA-J-BhgG5sI7mhuD6QECUwZgtwc0khQeGf_Naoy_UbikFjDUCkhaMGi1ONZ4zwot7Cf8rHs1fokPOMOMudxIb4ht7xNxixUXT5CnZ8Di9LFtxMc/s500/Add-authors-blogger-send-invitation-updated-interface.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ptVaqNPInKX0IBBMg-a4cLTZ1zcwSA-J-BhgG5sI7mhuD6QECUwZgtwc0khQeGf_Naoy_UbikFjDUCkhaMGi1ONZ4zwot7Cf8rHs1fokPOMOMudxIb4ht7xNxixUXT5CnZ8Di9LFtxMc/s500/Add-authors-blogger-send-invitation-updated-interface.png" width="400" /></a></div><br /><br />A few minutes later, the email address that you sent to <b>receives an email invitation</b>, like this, from<u> no-reply@google.com:</u><br /><blockquote class="tr_bq"><i>-------- Original Message --------</i><br /><i>Subject: You have been invited to contribute to AnotherTestBlog</i><br /><i>Date: Tue, 06 Dec 2011 20:47:45 +0000</i><br /><i>From:   THE NAME OF FROM YOUR BLOGGER PROFILE </i><no-reply google.com=""><i><br />To: maryc@act.nz<br /><br />The Blogger user Mary has invited you to contribute to the blog: AnotherTestBlog.<br /><br />To contribute to this blog, visit:<br />http://www.blogger.com/i.g?inviteID=468-GEEKY-LOOKING-CODE-973&blogID=31-GEEKY-LOOKING-CODE-83<br /><br />You'll need to sign in with a Google Account to confirm the invitation and start posting to this blog. If you don't have a Google Account yet, we'll show you how to get one in minutes.<br /><br />To learn more about Blogger and starting your own free blog visit http://www.blogger.com.</i><br /></no-reply></blockquote><br />When the person who gets the email <b>clicks on the link</b>, they are taken to Blogger, and asked to <b>sign in</b> <br /><br />Once they have clicked the link and sign in, the <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Google account</a> that they log in with has "author rights" to your blog (just the one you invited them to, not any others you've made).<br /><br />The person does not need to have a gmail or Google account for you to invite them to be an author - but they will need to sign in using a Google account (new or existing) to accept the invitation.<br /><br /><br /><br /><h2>What you will see</h2>Once the person has accepted the invitation, the Google account name (which looks like an email address) that they use to accept it is shown as an author on the permissions tab (the one that you went to to invite them to be an author):<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lKiONYbLosX3x7Bt_Zx75gZaKG21N_MwwveGiUpVgEgSuV9sTGVn6Mj2EEnwFMWmZYaQjTNOvST23c25dVaKyV3gwgxMzCM6UkAb1CrycB6A0lrBj8JX_U4ypImNXeHonxqf71VAM4mt/s529/blog-with-multiple-contributors.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lKiONYbLosX3x7Bt_Zx75gZaKG21N_MwwveGiUpVgEgSuV9sTGVn6Mj2EEnwFMWmZYaQjTNOvST23c25dVaKyV3gwgxMzCM6UkAb1CrycB6A0lrBj8JX_U4ypImNXeHonxqf71VAM4mt/s400/blog-with-multiple-contributors.png" width="400" /></a></div><br /><br />If they accept the invitation by signing to Google in with a different email address than the one you invited, you will get a message telling you about this. It says<br /><blockquote class="tr_bq"><i>-------- Original Message --------</i><br /><i>Subject: Your invitation was accepted using a different email address</i><br /><i>Date: Tue, 06 Dec 2011 22:51:33 +0000</i><br /><i>From: Blogger <no-reply blogger.com=""><br />To: YOUR-EMAIL-ADDRESS<br /><br />Your invitation for THE-EMAIL-ADDRESS-YOU-INVITED for your private blog "AnotherTestBlog" has been accepted, but using a different email address. It has been accepted by THE-ACCEPTING-EMAIL ADDRESS.<br /><br />If your invitation has been accepted by someone you do not know or did not intend to invite, please visit the Permissions tab of your blog where you can choose to revoke access.<br /><br />Thanks,<br /> The Blogger Team</no-reply></i></blockquote><br /><br /><h2><br /><br />What your new author will see</h2>When your new author logs in to <a href="http://blogger.com/" target="_blank">Blogger.com</a> - using the <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Google account</a> they accepted your invitation with - they see a regular Blogger dashboard, except that they only have access to a limited range of functions:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjCa3hZuAATWy0tlwnBCEE_OKaRP4u-wNXPFjHKVZT_Vu8PbBs84z5Brt0ppVklqjWH9WKrLpadQRxEMsSFaYMTrNKazyCGBsjK6gkdpBHuW0QIlRMtb_QQlwovP00Wv403uZpjLk0zNN/s624/Blogger-author-only-rights-on-blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjCa3hZuAATWy0tlwnBCEE_OKaRP4u-wNXPFjHKVZT_Vu8PbBs84z5Brt0ppVklqjWH9WKrLpadQRxEMsSFaYMTrNKazyCGBsjK6gkdpBHuW0QIlRMtb_QQlwovP00Wv403uZpjLk0zNN/s400/Blogger-author-only-rights-on-blog.png" width="400" /></a></div><h3><br />An author can:</h3><ul><li>Create a post,</li><li>Edit the date for posts they have made</li><li>Turn comments of for posts they can edit (provided the default setting is On)</li><li>Edit a post that they made</li><li>Add a mobile device so they can post using SMS/MMS - (this may only work in certain countries)</li><li>Set themselves up to post using email (the mail2Post feature) - note that their "secret words" address is different to yours - and that an author could use this feature to let anyone else post from their account.</li><li>Remove themselves as an author</li></ul><h3><br />An author cannot:</h3><ul><li>Edit posts made by other authors or administrators</li><li>Change the template, layout or gadgets</li><li>Change the blog's URL, title or description</li><li>Set up for any email address to receive comment-moderation alert messages</li><li>Moderate comments (even about their own posts), or change the global comments settings</li><li>Edit any of the blog's Pages</li><li>See the blog's statistics</li><li>Install AdSense into the blog (although they can <a href="http://blogger-hints-and-tips.blogspot.com/2009/12/putting-google-adsense-advertisements.html">put ad-units of their own inside their own posts</a>)</li><li>Give other people permission to write on the blog - except by sharing their own mail2Post "secret words" address.</li><li>Change the default language and date/time settings for the blog</li><li>Alter the RSS feed settings in any way</li><li>Set up Google Analytics for the blog</li><li>Edit the Adult-content warning setting, or the blog's Open-ID URL.</li></ul><br /><br /><h2>Troubleshooting</h2><h3>Be sure your transfer works</h3>If you are accepting the invitation yourself (eg you are transferring the blog to another<a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html"> Google account</a> that you control), then make sure that you either<br /><ul><li><b>[Recommended]:</b> use a different browser for each Google account, or</li><li>Each time you need to change Google accounts, log out of the present account, clear your cache and re-start your browser.</li></ul><br /><h3>Make sure the emails arrive</h3>We sometimes see questions in Blogger Help Forum from people who say that they sent invitations, but the email message was never received. <br /><br />The most common solution is that the author-to-be needs to<b> check their spam folder</b> - very often that's where the messages have gone.  If that doesn't work:<br /><ul><li>Try sending the person an email address from your regular email account - so you know if there's a  problem with their email.</li><li>Cancel the invitation (there's a link in the Invitation screen), wait a few minutes and try again.</li><li>Try sending an invitation to a different email address that you control, and forwarding that message (without clicking the accept link) to the person.yourself.</li></ul><br />If none of this helps, post a question in <a href="http://www.google.com/support/forum/p/blogger" target="_blank">Blogger Help Forum</a>: tell us your blog's URL, and exactly what options you have tried.<br /><br /><br /><h2>More things to think about</h2>As well as giving the person rights, you may also need to work with them to make sure they understand how you use certain features in Blogger:<br /><ul><li>What's your editing and quality-assurance approach - how you do<a href="http://blogger-hints-and-tips.blogspot.com/2010/12/get-your-posts-right-before-you-publish.html"> make sure you've got posts right before you publish them</a>?  Do you allow adult content?   What about content that might not suit <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-blogger-things-to-consider.html">advertising</a> that your blog is showing.</li></ul><ul><li>Do you use <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/categorising-your-posts.html">labels</a>?  How do you decide what labels to apply? This is especially important if you<a href="http://blogger-hints-and-tips.blogspot.com/2010/12/how-to-put-put-posts-into-your-pages-in.html"> put your posts into pages</a>. </li></ul><ul><li>What time of day do you post (to get maximum benefit from your <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">RSS non-email subscribers</a>)</li></ul><ul><li>How are posts <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">promoted on social media</a> - do they need access to your blog's <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/adding-tweet-button-to-your-blog.html">Twitter</a> account or <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-badge-for-facebook-page-into.html">Facebook page</a> too?</li></ul><ul><li>What policies do you have for responding to comments - Who is notified about comments left about their posts?  What guidelines are followed about complaints?  How do you deal with spam and abuse - and what do you regard as abuse?</li></ul><ul><li>How do you organise pictures, and other external files that your blog uses? <br />I always<a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html"> upload picture</a>s to Picasa-web-albums outside of Blogger, LINK so I can control the picture size/resolution. If you do this, you need to make sure that your new author knows where to file their pictures.</li></ul><ul><li>Have you got a place where you keep policies, documetation, ideas for new posts, etc (eg I use <a href="http://blogger-hints-and-tips.blogspot.com/2010/12/get-your-posts-right-before-you-publish.html" target="_blank">a separate documentation blog</a> for this) - does your new author need access to this?</li></ul><br /><br /><h2>What next?</h2><a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html">Giving someone administrator access to your blog.</a><br /><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Understanding Google accounts</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2009/12/putting-google-adsense-advertisements.html">Putting AdSense ads into your posts</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/12/how-to-put-put-posts-into-your-pages-in.html">How to put posts into your blog's pages</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 matters for your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">Your blog and the so-called-social networks:  Facebook, Twitter, eg al</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">Putting pictures onto your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-blogger-things-to-consider.html">Advertising and your blog, some things to consider</a></div>

Making someone an author on your blog

This article shows you how to set up another person (ie another Google account) as an author for your blog. Google, Blog-Authors and Blogge...

Read more »

How to put pictures into unusual shapes, using PowerPoint

<b>This article explains how to put a picture that is one shape (a "square peg") inside an image of another shape (a "round hole" - or star, elipse, octagon, etc) - using Microsoft PowerPoint.</b><br /><div style="clear: both;"></div><br /><i>Original title:   How to put a square peg into a round hole - in pictures</i><br /><br /><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAczI0wBJDvvi1tn7KXMV6ARBd-vRtyNzMvK-MAyc8-dapV5vNdCoVzvkLEWJ-CbfJnfPOhcIEmbnTKYuoG9qLjQEWMr0blq30rp81_1kW4-iTs0hIDS9WpS1zqVB9D44dgQ5Bo6GLTpE/s433/square-wooden-clothes-peg-photo-rectangle-two-rounded-corners.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Wooden clothes peg in a customized rectangle with rounded corners." border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAczI0wBJDvvi1tn7KXMV6ARBd-vRtyNzMvK-MAyc8-dapV5vNdCoVzvkLEWJ-CbfJnfPOhcIEmbnTKYuoG9qLjQEWMr0blq30rp81_1kW4-iTs0hIDS9WpS1zqVB9D44dgQ5Bo6GLTpE/s200/square-wooden-clothes-peg-photo-rectangle-two-rounded-corners.png" title="Based on a work by Loadmaster (David R. Tribble) This image was made by Loadmaster (David R. Tribble) Email the author: David R. Tribble Also see my personal gallery at Google Picasa (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons" width="200" /></a></div>Recently, I've been using PowerPoint to make the <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">thumbnail image</a> for my posts. This means that I own the copyright of the pictures, so can share them without worrying about <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">copyright issues</a>.<br /><br />One approach I've used is to find an interesting copyright-free picture that is related to the theme of the post, and then put it inside a shape that adds some visual interest or has some words along side it.  Another thing that I'm going to try is using multiple pictures in this way to make a more-interesting-than-usual collage.<br /><br /><br /><br /><h2>How to put a picture inside a shape</h2><i>NB PowerPoint commands are based on Office 2007 and 2010 - but the same principles most-likely apply in other versions where the commands may be slightly different.</i><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvIIcSmZFOYcdNySlomF2FLCHtxnRd_MzP8_am3UyI-wD0rmWVGwIPB8dIxFD_LjllAQRLfn-R9uLn8ZrGYUuDTXd3E4dMpTHaezGTDSv25zeW4v46qf7PDPmvYU_O18XWxnx1oSpG_Vg/s286/image-file-types-supported-by-PowerPoint-2007.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvIIcSmZFOYcdNySlomF2FLCHtxnRd_MzP8_am3UyI-wD0rmWVGwIPB8dIxFD_LjllAQRLfn-R9uLn8ZrGYUuDTXd3E4dMpTHaezGTDSv25zeW4v46qf7PDPmvYU_O18XWxnx1oSpG_Vg/s286/image-file-types-supported-by-PowerPoint-2007.png" /></a></div>1   Get your <b>image file</b>, and save it somewhere on your computer.<br /><br />A wide range of picture-file formats are supported by PowerPoint:  in the 2007 version this includes as shown in this list: <br /><div style="clear: both;"></div><br />2     In PowerPoint, <b>make a blank side</b> (Home > Layout > Blank)<br /><br />3     Then <b>add a shape</b> (Insert > Shapes, click on the shape you want)<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7hpq2QJeAw1OaCE0xZlrLGGygasRAf5yfwJDl17qeuwxGvM9Eb17VgoW5eAbSJ_fM7b92EG4DYvy4bwjANtaIBsWztLTDT9toh4H-m6zNehq_HDOyJ8j_UAl6bgvbHpI5YJHakg8mG7AB/s424/Powerpoint-insert-shape-default-format.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7hpq2QJeAw1OaCE0xZlrLGGygasRAf5yfwJDl17qeuwxGvM9Eb17VgoW5eAbSJ_fM7b92EG4DYvy4bwjANtaIBsWztLTDT9toh4H-m6zNehq_HDOyJ8j_UAl6bgvbHpI5YJHakg8mG7AB/s400/Powerpoint-insert-shape-default-format.png" width="400" /></a></div><br /><br />Intially, the shape with have the fill-colour and border that are the current default values. But you can change this, which is what we are going to do.<br /><br /><br />4    Right-click on the shape, and choose <b>Format Shape</b> from the pop-up menu<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSKA-ELgOZp_ACUXxgRLpBPQjMQs5BQTkaNC46l_YLH450zGBKXdMGJNLe1Ou9BUAffIEaeApdtgCUGweVBe9eNMJbYovAQJ9KWV86i8XtQIhY3u9zRqZxRrWoTqVvE3VSibK-xvU6E8K/s640/Shape-format-right-click-menu-PowerPoint.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSKA-ELgOZp_ACUXxgRLpBPQjMQs5BQTkaNC46l_YLH450zGBKXdMGJNLe1Ou9BUAffIEaeApdtgCUGweVBe9eNMJbYovAQJ9KWV86i8XtQIhY3u9zRqZxRrWoTqVvE3VSibK-xvU6E8K/s640/Shape-format-right-click-menu-PowerPoint.png" width="640" /></a></div><br /><br /><br />5    In the Fill tab, choose <b>Picture or Texture Fill</b>, then click the <b>File button</b> and navigate to the image file you got in step 1, and click OK.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippWsGdhYIBWoSBXljWcnwGvL5hF0Z_OhF1HGxYjMq_UhZQ3ye1bvcNxyfbtSd_i4x6nAsbe4M5lPofBVy_Bm6zKyVkZ5y3-DBSw6GYFr_wmwlLF559UZVnSHWbq4aboXEWL-2xTGA6BEG/s720/drag-format-menu-away-from-edited-image-to-see-progress.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippWsGdhYIBWoSBXljWcnwGvL5hF0Z_OhF1HGxYjMq_UhZQ3ye1bvcNxyfbtSd_i4x6nAsbe4M5lPofBVy_Bm6zKyVkZ5y3-DBSw6GYFr_wmwlLF559UZVnSHWbq4aboXEWL-2xTGA6BEG/s640/drag-format-menu-away-from-edited-image-to-see-progress.png" width="640" /></a></div><br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRhegBBBQ-rpgeLF-iYv0mDuUJ79ojVu8Gb9TZ5RfY6A6MIjDE8Q9owZ70Q6fNH6dBZBnGH7zLysl0mfp7wiDmawxONRAcb6bbE7RZ1NkBXSk0KY3-_ieVcnq7BJdJM6EQ9EKOyP7bTAIM/s291/control-position-of-image-in-PowerPoint-shape-offset-buttons.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRhegBBBQ-rpgeLF-iYv0mDuUJ79ojVu8Gb9TZ5RfY6A6MIjDE8Q9owZ70Q6fNH6dBZBnGH7zLysl0mfp7wiDmawxONRAcb6bbE7RZ1NkBXSk0KY3-_ieVcnq7BJdJM6EQ9EKOyP7bTAIM/s291/control-position-of-image-in-PowerPoint-shape-offset-buttons.png" /></a></div>6   Make sure that the portion of the picture that you want to show is in the picture:  to start with the shape is centered on the middle of the picture. <br /><br />Change this <b>using the Offsets to move the shape</b> to the left or right over the image.   You can make the offsets positive or negative as shown.<br /><div style="clear: both;"></div><br />You can monitor the results of different settings in PowerPoints slide thumbnails (on the left hand side, if you have it showing), or by dragging the pop-up menu to a different place in the screen so that you can see the shape itself.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippWsGdhYIBWoSBXljWcnwGvL5hF0Z_OhF1HGxYjMq_UhZQ3ye1bvcNxyfbtSd_i4x6nAsbe4M5lPofBVy_Bm6zKyVkZ5y3-DBSw6GYFr_wmwlLF559UZVnSHWbq4aboXEWL-2xTGA6BEG/s720/drag-format-menu-away-from-edited-image-to-see-progress.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippWsGdhYIBWoSBXljWcnwGvL5hF0Z_OhF1HGxYjMq_UhZQ3ye1bvcNxyfbtSd_i4x6nAsbe4M5lPofBVy_Bm6zKyVkZ5y3-DBSw6GYFr_wmwlLF559UZVnSHWbq4aboXEWL-2xTGA6BEG/s640/drag-format-menu-away-from-edited-image-to-see-progress.png" width="640" /></a></div><br /><br /><br /><b>Job Done</b> - at this point, you have an image that is cropped to the shape that you chose - now you just have to <b>put it into your blog</b>.<br /><br /><br /><br /><h2>Using the picture</h2><br />There are (at least) three ways to get the shape-cropped-picture from PowerPoint into your blog.<br /><br />I usually <b>copy the item from PowerPoint, and then paste it into a picture edito</b>r (Paintbrush etc), manually.   This is an old-fashioned approacb - but it lets me adjust the size and position of the image, and save it (usually a .png) with a file-name that describes the image really well which is good for mating the blog come up in search results (SEO).   The this picture can be <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">inserted into a post just like any other picture</a>.<br /><br />Another option is to choose <b>File > Save As from Powerpoint</b>, and choose to <b>save the slides in an image format</b>, eg JPEG which can also be <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">inserted into a post in the usual way.</a>  You are likely to be asked whether to put all the slides in one image, or to make one image per slide. Usually, it would be best to make one image per slide - but I don't use this method because the image that is created is the size of the whole slide, rather than just the pictures on it.<br /><br />A third option is to <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/showing-powerpoint-presentation-in-your.html">display the PowerPoint file as a slideshow</a>. This isn't something that I'd do for only one shaped image, but may be relevant in some situations.<br /><br /><br /><h2>Adjusting the size and quality of the picture</h2><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQa6GWJycerNGkypZGKkLslLP_PoUswD0RPoAttSWSnSKpOFt53E5W04nHwZOzxHORWazDeVszlIh-woIpCu3jkUhnD3mp99kiTFGlaw52sU4ZxHanTM1wSnoOYfnjp6V9CdcZp5IR-UxW/s432/small-and-large-size-shapes-showing-same-proportiong-of-background-picure-displayed.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQa6GWJycerNGkypZGKkLslLP_PoUswD0RPoAttSWSnSKpOFt53E5W04nHwZOzxHORWazDeVszlIh-woIpCu3jkUhnD3mp99kiTFGlaw52sU4ZxHanTM1wSnoOYfnjp6V9CdcZp5IR-UxW/s320/small-and-large-size-shapes-showing-same-proportiong-of-background-picure-displayed.png" width="205" /></a></div>One thing that you don't have any control of inside PowerPoint is the zoom level of the inserted picture.<br /><br />If you make the shape larger, it doesn't show a larger proportion of the picture. Instead, it just shows the existing picture in a larger size, as you can see in the slides shown here.<br /><br />I suspect that if you want to zoom in to a particular area of the image file, the only approach is to <b>edit the picture in another tool, crop out the bit that you do not want to show, </b>and only keep the part that you want to include inside your shape.<br /><br />However PowerPoint does have some limited control over the contrast and brightness of the picture, from the Picture tab of the Format Shape window.<br /><br /><div style="clear: both;"></div><br /><h2>Can you do this in other tools?  Why PowerPoint?</h2><br />Yes, you can.<br /><br />Photoshop, and similar commercial tools almost certainly have features like this, and I'm certain that GIMP (like a public-domain, less powerful version of Photoshop) and Inkscape (another public-domain image program which is more focussed on scalable-vector-graphics and objects than on pixels) also have these features.<br /><br />So why use PowerPoint?   In short, its (relatively) <b>cheap</b> and <b>many people have access</b> to it already.   It's also <b>very easy to learn</b>, compared to the other packages, and what you learn is likely to apply to lots of tasks and not just in making pictures for your blog.<br /><br /><br /><br /><hr /><h2>Related Articles:</h2><script type="text/javascript"><!-- google_ad_client = "pub-4862549906412680"; /* BHAT - shortLinkUnit for postFooter */ google_ad_slot = "7179465952"; google_ad_width = 468; google_ad_height = 15; //</script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script> <br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">Putting a picture into a blog-post</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">Post.thumbnail and post.summary - ways of describing blog posts</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/showing-powerpoint-presentation-in-your.html">Showing a PowerPoint slideshow in Blogger</a><br /><br class="Apple-interchange-newline" /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">Copyright, blogs and Blogger/Google</a>

How to put pictures into unusual shapes, using PowerPoint

This article explains how to put a picture that is one shape (a "square peg") inside an image of another shape (a "round hole...

Read more »