How to center gadgets in Blogger

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

How to center gadgets in Blogger

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

Read more »

Lining up the first post and the sidebar

<b>In some Blogger themes, there is a big gap between the bottom of the header and the start of the first post, which means that the posts and the sidebar are not aligned.  This article explains how to adjust the gap, and so remove the problem</b><b>.</b><br /><b><br /></b> <b><br /></b> <b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-URJV_8Kkdj62s3msX_lI61FTSKfPcW_cNVB7uqDayYGk3nAoKB8B6iqFYOp6PoI4_5nJcs3X7ZPOYIjObmyeySgcxyhtsfZpUAEgUwNITjMRSn_LD002c3AQUJX3MHYRbkK0MyC15yw/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/AVvXsEg-URJV_8Kkdj62s3msX_lI61FTSKfPcW_cNVB7uqDayYGk3nAoKB8B6iqFYOp6PoI4_5nJcs3X7ZPOYIjObmyeySgcxyhtsfZpUAEgUwNITjMRSn_LD002c3AQUJX3MHYRbkK0MyC15yw/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">themes that Blogger provides</a>, as well as all third-party themes, 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 />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 theme</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 in many Designer themes, which looks strange unless you put something else in to the space.  In the example below, there is 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 space:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3r91rg9aMbdEW3qBYr9zctIDHi-A3qZv7LX0snwvAESaW7DxwbeMf5uORNtSiLq26gVN9v3oJ2aLn-XLvshYDe5Kg-fY5xZslCrABFDD27Lirf7R3JWEJhSgVJ-HlCoc5YGOF_42KP9J/" 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/AVvXsEgc3r91rg9aMbdEW3qBYr9zctIDHi-A3qZv7LX0snwvAESaW7DxwbeMf5uORNtSiLq26gVN9v3oJ2aLn-XLvshYDe5Kg-fY5xZslCrABFDD27Lirf7R3JWEJhSgVJ-HlCoc5YGOF_42KP9J/" 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 in Designer themes</h2>1  <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html"><b>Edit</b> your theme</a>  in the usual way.<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 to get the result you want</b><br />How much to change it by depends on your template, but in some cases I've used 0 successfully.<br /><br /><b>What the numbers mean</b><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 Theme</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 theme, it's a good idea to check out out in at least one version of the other browsers that your readers use - usually means current versions of Internet Explorer, 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 theme, 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 theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Advantages and disadvantages of editing your theme</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 theme</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 theme 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>

Lining up the first post and the sidebar

In some Blogger themes, there is a big gap between the bottom of the header and the start of the first post, which means that the posts and ...

Read more »

How to put a gadget above your blog's header

<b>This article is about how to put an item (any type of gadget) above the Title section in a blog made with Google Blogger.</b> <br /><br /><br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDam1EVA5OqTrOJwCWR5qhqsZQ3JsbA_RdYMstuKGjHCzBIYXhB5AjETUnVSeMsfBXfQFrsO6RrvSx9MeYRgF7emYaxHOpom0QplcBt4oFtdaoRIbxCNkDP_cMj-XoKuOdyb6-NJIPbVGz/s1600/gadget-above-header-in-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="899" data-original-width="1600" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDam1EVA5OqTrOJwCWR5qhqsZQ3JsbA_RdYMstuKGjHCzBIYXhB5AjETUnVSeMsfBXfQFrsO6RrvSx9MeYRgF7emYaxHOpom0QplcBt4oFtdaoRIbxCNkDP_cMj-XoKuOdyb6-NJIPbVGz/s320/gadget-above-header-in-blogger.png" width="320" /></a></div>If your blog has a <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">layout or designer theme / template</a>, then it most probably has a nav-bar at the top of the screen, followed by a Header section showing your blogs title & description, or a custom header image if you've uploaded one.<br /><br />And even if you go into the place in the layout-designer where you can re-arrange the layout by drag-and-dropping items, you <b>cannot drag any gadgets to above the header</b>.<br /><br /><div style="clear: both;"></div>But this is easy to change, provided you are willing to accept <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">the disadvantages of editing your blog's theme</a>. <br /><br /><br /><h2>How to allow changes above your blog's header</h2>Follow these steps to make it possible for you (or <a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html">any blog administrator</a>) to add gadgets to the area about your blog's heading section:<br /><br />1  <b>Edit</b> your blog's theme <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">in the usual way</a><br /><br />2  <b>Find</b> this code in your theme:<br /><blockquote><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /><b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/></blockquote>Hint:  use the theme-editor search tool, to look for a key phrase like "id='Header1'<br /><br />4  <b>Change</b> it to <br /><blockquote><b:section class='header' id='header' maxwidgets='<b>4</b>' showaddelement='<b>yes</b>'><br /><b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/></blockquote>Notice that there are two changes made:<br /><ul><li>Setting <b>maxwidgets to greater than 1</b>, and</li><li>Setting <b>showaddelement to Yes,</b> instead of No</li></ul><br /><br /><b>Job Done:   </b>after you have successfully saved this change, then the next time you <b>edit your blog layout</b>  (Dashboard > Layout  ), then you will find that you can <b>add or drag-and-drop</b> up to three gadgets to the Heading section of the blog, making a total of four.<br /><br />You can add even more gadgets by changing the number for maxwidgets to something else.<br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Disadvantages of editing your blog's layout theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html">How to set up an extra administrator for your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">Types of Blogger theme</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><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/2012/02/how-to-edit-your-blogger-template.html">How to edit your Blogger theme</a>

How to put a gadget above your blog's header

This article is about how to put an item (any type of gadget) above the Title section in a blog made with Google Blogger. If your blog has ...

Read more »

How to add a badge to a blog made with Blogger

<b>This article is about how to add a badge that someone else gives you to a blog made with Blogger.</b><br /><br /><br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbXkm0n9s9Aq6d_PpyATJnjUa8CH6n8-VPNidyqWx82PY9dWX0SAGXxkAHgsUeyVWBLVJC9cTUsbL6aQKh2VCUJ9MJRy1FQihn1H1xKHVCse33jQZx3wF7WMKZpSDGtp9dWizDwyQq1jL/s720/install-badge-to-blogger-blog-hosted-blogspot.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/AVvXsEiGbXkm0n9s9Aq6d_PpyATJnjUa8CH6n8-VPNidyqWx82PY9dWX0SAGXxkAHgsUeyVWBLVJC9cTUsbL6aQKh2VCUJ9MJRy1FQihn1H1xKHVCse33jQZx3wF7WMKZpSDGtp9dWizDwyQq1jL/s720/install-badge-to-blogger-blog-hosted-blogspot.png" width="280" /></a></div>Sometimes, blog-owners run a blog-a-thon or a similar circle-of-blogs event.<br /><br />One aspect of taking part is by <b>showing a badge for the event on your own blog</b>, so that your visitors are invited to take part and to view other participants' blogs too.<br /><br />Usually who-ever is hosting the event gives you the code for the badge, and tells you to install it into your own blog.   Sometimes they even tell you how to install it to your Wordpress blog - <a href="http://michellerafter.com/2014/05/30/grab-2014-flxwordcount-blogathon-logo/" target="_blank">like this</a>. <br /><br />Fortunately, installing a badge to a blog made with Blogger is equally easy. <br /><br /><br /><h2>Installing a badge to Blogger</h2><b><br /></b> <b>Decide where</b> you want to put the badge.   Traditionally badges go into the sidebar, but you could choose to put it into the header or footer, into the space above or below your posts, or even into an individual post.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDG2wY5Nt4McgXHfQjsBxUgLTyQ1h7wqzm34_Lox1t9YsnQfQIUqNmBpvqMJemf35e4apLi4Nx2eku5WJ9wRzgOUdaajEp3MWnNqsCLMooM5VIPCfTrTbM6Jjt_7CK-Oe_lNtlB0T9FibK/s640/areas-to-install-gadget-to-blog-header-footer-sidebar-above-below-post-body-of-post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDG2wY5Nt4McgXHfQjsBxUgLTyQ1h7wqzm34_Lox1t9YsnQfQIUqNmBpvqMJemf35e4apLi4Nx2eku5WJ9wRzgOUdaajEp3MWnNqsCLMooM5VIPCfTrTbM6Jjt_7CK-Oe_lNtlB0T9FibK/s640/areas-to-install-gadget-to-blog-header-footer-sidebar-above-below-post-body-of-post.png" width="90%" /></a></div><br /><br /><b>Get the HTML code</b> for the badge.<br /><i>NB   If the other party doesn't give you the code, or if their code is neither HTML or Javascript, then you may need to make it yourself using the approach described in <a href="http://blogger-hints-and-tips.blogspot.ie/2010/10/creating-button-that-links-to-your-blog.html">How to make a Button for your Own Blog</a>.   But 99.99% of the time, they provide it.</i><br /><br /><br /><b>Install the code</b> into your blog <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">the same way you would put any other 3rd party HTML or Javascript into it</a>.  <br /><br />In most cases, this involves adding a HTML/Javascript gadget, pasting the code in, and then positioning it where you want it.   But There are some cases when you will need to edit your template.<br /><br /><br /><b>Job Done!</b><br />Yes, it really is that simple.    A badge is simply a picture, and a piece of code which says "when this picture is clicked, go there"   The hard work is in making the picture for the badge - installing it is usually very simple  (unless you do something complicated and try to put the button in the middle of your post headers and footers.<br /><br /><br /><h2>A thought about copyright</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJdCcge3Gb2Grp8ykHA8OqVPVvfEeIVXXqGci4AECnOAZEEKyiyXfg9gvnxOVPpPe39YgCmDvlYwb-_-JA-8RdaS570DDh88ElkVMc0sxiOorfu6XRqR0duCKuilrSTBU8tdZaC8HGIPd/s276/196px-Copyright_click.svg.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/AVvXsEiwJdCcge3Gb2Grp8ykHA8OqVPVvfEeIVXXqGci4AECnOAZEEKyiyXfg9gvnxOVPpPe39YgCmDvlYwb-_-JA-8RdaS570DDh88ElkVMc0sxiOorfu6XRqR0duCKuilrSTBU8tdZaC8HGIPd/s200/196px-Copyright_click.svg.png" width="141" /></a></div>As I've said before, <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/copyright-blogs-and-bloggers.html">copyright law applies to blogs</a>, just like it applies to all created things.  So of course it applies to badges, and the images used on badges.<br /><br />However, because you are installing a badge which someone else has provided the code for and told you to use, it's safe to <b>assume that you have their permission </b>to use the image that they have provided on your blog.<br /><br />But it's probably not a good idea to modify the badge code too heavily - for example to change the size of the image drastically, or to use a different picture.<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 3rd party HTML into 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.ie/2010/10/creating-button-that-links-to-your-blog.html">How to make a Button for your Own Blog</a>

How to add a badge to a blog made with Blogger

This article is about how to add a badge that someone else gives you to a blog made with Blogger. Sometimes, blog-owners run a blog-a-thon o...

Read more »

Delete, change or re-format the "Showing posts with label" message.

<b>This article explains options for deleting, or changing the content or formatting of Blogger's "Showing posts with  LABEL.  Show all posts" message and it's ugly grey box.</b> <br /><br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilwyIStfS8HtTV8ZnCkoi7n9tBqSBFcYAMwcb2LcampdkkNdAwQ0ISpB15fuktZEJ8FPUq03dSvtlmr9QiavXK4lJoYyTgk486WlUbaDBgPADGR3Wu5z4Vf2KpMArF9zFZk3xsIKPWjB_/s640/dont-show-or-reformat-status-message-posts-with-labels-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilwyIStfS8HtTV8ZnCkoi7n9tBqSBFcYAMwcb2LcampdkkNdAwQ0ISpB15fuktZEJ8FPUq03dSvtlmr9QiavXK4lJoYyTgk486WlUbaDBgPADGR3Wu5z4Vf2KpMArF9zFZk3xsIKPWjB_/s200/dont-show-or-reformat-status-message-posts-with-labels-blogger.png" width="200" /></a></div>If your blog has a <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">Layout or Designer template</a>, then when a person who is reading it chooses a label value, Blogger displays a page with (a summary of) your most recent posts with that label.<br /><br />If there are more posts that Blogger is willing to show on one page, then there will also be "older posts" and "newer posts" links at the bottom of the page. <br /><br />And - unless you have removed it - there will also be a message at the top of the page saying "Showing posts with label yourLabel. <a href="http://blogger-hints-and-tips.blogspot.com/">Show all posts</a>"<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSKBD3kpXQKlS15CqXcR7QqqgtwkUqYWhzwK36M7rqBEKsQsEi21Vys99PY9t4tFVk9abbg0gxJcmN6tUr_XJakEu2Uph5qSud0WPRVYgo4id0Svv9xvJFTnPNR-Fm5_UoUx3JPrNbxlAq/s639/sentence%2520on%2520a%2520grey%2520background%2520about%2520showing%2520posts%2520with%2520specific%2520labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSKBD3kpXQKlS15CqXcR7QqqgtwkUqYWhzwK36M7rqBEKsQsEi21Vys99PY9t4tFVk9abbg0gxJcmN6tUr_XJakEu2Uph5qSud0WPRVYgo4id0Svv9xvJFTnPNR-Fm5_UoUx3JPrNbxlAq/s640/sentence%2520on%2520a%2520grey%2520background%2520about%2520showing%2520posts%2520with%2520specific%2520labels.png" width="640" /></a></div><br /><br /><br />Reader actions that cause a visitor to see this message include:<br /><ul><li>Clicking a value in your <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/categorising-your-posts.html">Label gadget</a></li></ul><ul><li>Clicking a label value that is displayed in your post header or footer <br />(unless you have turned them off in the Layout > Blog Posts edit option).</li></ul><ul><li>Clicking a link that you have manually set up to show posts with a specific label (eg if you have <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/page-gadget-menu-bar-for-your-blog-with.html">used a Pages gadget to make a menu bar</a>, and one of the options in it has a value like http://www.yourBlog.com/search/label/yourLabel?max-results=999</li></ul><br />Unfortunately <b>Blogger does not provide any way to customize or configure this message</b>.<br />.<br />But it is easy enough to totally delete it, or to change the formatting, or to change the text..<br /><br /><br /><h2>How to delete the "Showing posts with LABEL" message</h2>There are two ways that you can remove the <i>"Showing posts with Label.   Show all posts"</i> message.<br /><br /><h3>Option 1:   Remove the code totally.   </h3>To do this,<br /><br />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> in the usual way<br /><br />2  <b>Find</b> the following text<br /><blockquote class="tr_bq"><b:includable id='status-message'><br /><b:if cond='data:navMessage'><br /><div class='status-msg-wrap'><br /><div class='status-msg-body'><br /><data:navMessage/><br /></div><br /><div class='status-msg-border'><br /><div class='status-msg-bg'><br /><div class='status-msg-hidden'><data:navMessage/></div><br /></div><br /></div><br /></div><br /><div style='clear: both;'/><br /></b:if><br /></b:includable></blockquote><div><br /></div>3   <b>Delete</b> that text and <b>replace</b> it with<br /><div><blockquote class="tr_bq"><b:includable id='status-message'><br /><b:if cond='data:navMessage'><br /><div><br /></div><br /><div style='clear: both;'/><br /></b:if><br /></b:includable></blockquote><br />(If you just delete the text and do not put the replacement in, then it is possible that Blogger will add that section back in again later.)<br /><br /><br /><h3>Option 2:  Hiding the message using CSS</h3>To do this, <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">add  this CSS rule</a> to your template in the usual way:<br /><blockquote class="tr_bq"><blockquote class="tr_bq">.status-msg-wrap,<br />.status-msg-body {<br />display: none;<br />}</blockquote></blockquote>(This approach is less risky because you do not need to edit your template, and because it's easier to change later.   But some people have reported that on their template, it has not worked.)<br /><br /><br /><h2>How to change the format of the "Showing posts with LABEL" message</h2>Some people don't mind the actual  <i>"Showing posts with Label.   Show all posts" </i>message.   But they want to format it in a way that suits their blog's layout and colour scheme.<br /><br />This is easily done, by adding some extra CSS rules to your template <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">in the usual way</a>.<br /><br />To change the format of the message text, use rules like this:<br /><div><blockquote class="tr_bq"><div style="background-color: white; box-sizing: border-box;"><span style="color: #222222;"><span style="font-family: Courier New, Courier, monospace;">.status-msg-body {</span></span></div><div style="background-color: white; box-sizing: border-box;"><span style="color: #222222;"><span style="font-family: Courier New, Courier, monospace;">text-align: left;</span></span></div><div style="background-color: white; box-sizing: border-box;"><span style="color: #222222;"><span style="font-family: Courier New, Courier, monospace;">line-height: 1.4;   </span></span></div><div style="background-color: white; box-sizing: border-box;"><span style="color: #222222; font-family: Courier New, Courier, monospace;">font-weight: bold;</span></div><div style="background-color: white; box-sizing: border-box;"><span style="color: #222222;"><span style="font-family: Courier New, Courier, monospace;">color: red;</span></span></div><div style="background-color: white; box-sizing: border-box;"><span style="color: #222222;"><span style="font-family: Courier New, Courier, monospace;">padding: 0.5em 0.3em;</span></span></div><div style="background-color: white; box-sizing: border-box;"><span style="color: #222222;"><span style="font-family: Courier New, Courier, monospace;">width: 100%;</span></span></div><div style="background-color: white; box-sizing: border-box; color: #222222; white-space: nowrap;"><span style="font-family: Courier New, Courier, monospace;">}</span></div><div></div></blockquote></div><div><br /><div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">To change the grey-shaded background or the box:</div></div><div><blockquote class="tr_bq"><span style="font-family: Courier New, Courier, monospace;">.status-msg-wrap {<br />width: 100%;<br />margin: 0 auto;   /*  keep the auto statement if the width is less than 100%, so the box is centered */<br />position: relative;<br />}</span></blockquote></div></div><div><br />There are a wide range of options - check with CSS reference guides for the options.   You may need to carry out some experiments with your template and how it looks with various options to decide on the best combination for your blog.<br /><br /><div style="background-color: white; box-sizing: border-box; color: #222222; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; white-space: nowrap;"><br /><br /></div><h2>How to change the "Showing posts with LABEL" message</h2><h2><div style="font-size: medium; font-weight: normal;">There are several ways that you can change the text in the "Showing posts with Label.   Show all posts" message.</div><div style="font-size: medium; font-weight: normal;"><br /></div><div style="font-size: medium; font-weight: normal;"><h3>Option 1:   Just replace it with some text</h3></div><div style="font-size: medium; font-weight: normal;">To show a sentence of your own instead of Blogger's standard message, </div></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> in the usual way<br /><br />2  <b>Find</b> the following text<br /><blockquote class="tr_bq"><b:includable id='status-message'><br /><b:if cond='data:navMessage'><br /><div class='status-msg-wrap'><br /><div class='status-msg-body'><br /><b><data:navMessage/></b><br /></div><br /><div class='status-msg-border'><br /><div class='status-msg-bg'><br /><div class='status-msg-hidden'><data:navMessage/></div><br /></div><br /></div><br /></div><br /><div style='clear: both;'/><br /></b:if><br /></b:includable></blockquote><div><br />3   Replace the <b>line in bold (</b>ie <data:navMessage/> <b>) with your own words</b>. <br /><br />For example, you might say<br /><blockquote class="tr_bq" style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><div style="margin: 0px;"><b:includable id='status-message'></div><div style="margin: 0px;"><b:if cond='data:navMessage'></div><div style="margin: 0px;"><div class='status-msg-wrap'></div><div style="margin: 0px;"><div class='status-msg-body'></div><div style="margin: 0px;"><b>Posts in this category include (use the Older Posts link to see previous posts):</b></div><div style="margin: 0px;"></div></div><div style="margin: 0px;"><div class='status-msg-border'></div><div style="margin: 0px;"><div class='status-msg-bg'></div><div style="margin: 0px;"><div class='status-msg-hidden'><data:navMessage/></div></div><div style="margin: 0px;"></div></div><div style="margin: 0px;"></div></div><div style="margin: 0px;"></div></div><div style="margin: 0px;"><div style='clear: both;'/></div><div style="margin: 0px;"></b:if></div><div style="margin: 0px;"></b:includable></div></blockquote><br />To show the searched-for label value in your message, you need to use the   <b><data:blog.searchLabel/>  </b> tag. For example, you might say<br /><blockquote class="tr_bq"><b:includable id='status-message'><br /><b:if cond='data:navMessage'><br /><div class='status-msg-wrap'><br /><div class='status-msg-body'><br /><b>Posts about </b><b><data:blog.searchLabel/> </b><b> include (use the Older Posts link to see previous posts):</b><br /></div><br /><div class='status-msg-border'><br /><div class='status-msg-bg'><br /><div class='status-msg-hidden'><data:navMessage/></div><br /></div><br /></div><br /></div><br /><div style='clear: both;'/><br /></b:if><br /></b:includable><br /><div><br /></div></blockquote>Note:  if you are going to use this tag, then you need to choose your label values very carefully, so that they all make sense.   For example, in one blog I have some posts labelled "For quiz organizers" and others labelled "Finance", "Organisation" etc.    There is no way that I can write a sentence including the labels that makes sense for both of these.<br /><br /><br /></div></div><br /><hr /><h2>Related Articles:</h2><div><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">Types of Blogger template</a></div><div><br /></div><div><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/categorising-your-posts.html">Using Labels to categorize your posts</a></div><div><br /></div><div><a href="http://blogger-hints-and-tips.blogspot.com/2012/01/page-gadget-menu-bar-for-your-blog-with.html">The Pages gadget is a menu bar for Blogger</a></div><div><br /></div><div><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></div><div><br /></div><div><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">How to add a new CSS rule to your blog template</a></div>

Delete, change or re-format the "Showing posts with label" message.

This article explains options for deleting, or changing the content or formatting of Blogger's "Showing posts with  LABEL.  Show al...

Read more »