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 or a similar circle-of-blogs event.

One aspect of taking part is by showing a badge for the event on your own blog, so that your visitors are invited to take part and to view other participants' blogs too.

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

Fortunately, installing a badge to a blog made with Blogger is equally easy.

Installing a badge to Blogger

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

Get the HTML code for the badge.
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 How to make a Button for your Own Blog.   But 99.99% of the time, they provide it.


Install the code into your blog the same way you would put any other 3rd party HTML or Javascript into it.  

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.


Job Done!
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.

A thought about copyright

As I've said before, copyright law applies to blogs, just like it applies to all created things.  So of course it applies to badges, and the images used on badges.

However, because you are installing a badge which someone else has provided the code for and told you to use, it's safe to assume that you have their permission to use the image that they have provided on your blog.

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.

---

Related Articles:

Putting 3rd party HTML into your blog

Copyright, blogs and bloggers

How to make a Button for your Own Blog

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 all posts" message and it's ugly grey box.

If your blog has a Layout or Designer template, 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.

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.

And - unless you have removed it - there will also be a message at the top of the page saying "Showing posts with label yourLabel. Show all posts"

Reader actions that cause a visitor to see this message include:

• Clicking a value in your Label gadget

• Clicking a label value that is displayed in your post header or footer
  (unless you have turned them off in the Layout > Blog Posts edit option).

• Clicking a link that you have manually set up to show posts with a specific label (eg if you have used a Pages gadget to make a menu bar, and one of the options in it has a value like http://www.yourBlog.com/search/label/yourLabel?max-results=999

Unfortunately Blogger does not provide any way to customize or configure this message.
.
But it is easy enough to totally delete it, or to change the formatting, or to change the text..

How to delete the "Showing posts with LABEL" message

There are two ways that you can remove the "Showing posts with Label.   Show all posts" message.

Option 1:   Remove the code totally.   

To do this,

1  Edit your template in the usual way

2  Find the following text

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3   Delete that text and replace it with

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

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

Option 2:  Hiding the message using CSS

To do this, add  this CSS rule to your template in the usual way:

.status-msg-wrap,
.status-msg-body {
display: none;
}

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

How to change the format of the "Showing posts with LABEL" message

Some people don't mind the actual  "Showing posts with Label.   Show all posts" message.   But they want to format it in a way that suits their blog's layout and colour scheme.

This is easily done, by adding some extra CSS rules to your template in the usual way.

To change the format of the message text, use rules like this:

.status-msg-body {

text-align: left;

line-height: 1.4;   

font-weight: bold;

color: red;

padding: 0.5em 0.3em;

width: 100%;

}

To change the grey-shaded background or the box:

.status-msg-wrap {
width: 100%;
margin: 0 auto;   /*  keep the auto statement if the width is less than 100%, so the box is centered */
position: relative;
}

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.

How to change the "Showing posts with LABEL" message

There are several ways that you can change the text in the "Showing posts with Label.   Show all posts" message.

Option 1:   Just replace it with some text

To show a sentence of your own instead of Blogger's standard message, 

1  Edit your template in the usual way

2  Find the following text

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3   Replace the line in bold (ie <data:navMessage/> ) with your own words.

For example, you might say

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>

<div class='status-msg-body'>

Posts in this category include (use the Older Posts link to see previous posts):

</div>

<div class='status-msg-border'>

<div class='status-msg-bg'>

<div class='status-msg-hidden'><data:navMessage/></div>

</div>

</div>

</div>

<div style='clear: both;'/>

</b:if>

</b:includable>

To show the searched-for label value in your message, you need to use the   <data:blog.searchLabel/>   tag. For example, you might say

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
Posts about <data:blog.searchLabel/>  include (use the Older Posts link to see previous posts):
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

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.

---

Related Articles:

Types of Blogger template

Using Labels to categorize your posts

The Pages gadget is a menu bar for Blogger

How to edit your Blogger template

How to add a new CSS rule to your blog template

What bloggers need to know about Responsive Web Design

This article is about responsive web design, and what it means for Blogger users.

Some of the information is relevant for people who use other platforms (especially Wordpress) but much isn't, because Blogger does so much of this for us.

What is Responsive Web Design?

One of the biggest changes to how people use the internet recently is the range of screen sizes.

Back in the day, we had ever-increasing screen resolutions, so most people went from 800x600 to 1024x768, etc - the specific varied along with the type of monitor and graphics card.  But the constant was the annual joke about "What's your New Year's resolution?" - the answer always got larger each year.

But now there are smartphones, tablets, and giant TV screens in the mix. Users may be looking at websites in anything between 300x200 to 4096 � 2160 - or more if they're using a TV.

To start with, no one was quite sure how websites should cater for this. Many people made two sites: one for their "regular sized" users and one for "mini-screen" users. Sometimes this led to  duplicate-content, which didn't amuse Google's search-engines. It made more work (of the boring kind) for people maintaining websites, who had to update two places. And it didn't cater for the super-size-screen folks at all.

After much thought, in June 2012, Google announced that a technique called "responsive web design" was their recommended approach. Basically, it says to have one version of the website, but to put instructions into it (usually with CSS) saying whether or where to show things based on the size of the user's screen - ie, effectively by "responding" to the user's settings.

This article from Blacknight Solutions goes into a lot more detail - and uses more technically precise language to describe the challenges and the approach.

What does Responsive Design mean for Blogger users?

This infographic is a quick-and-visual summary of the area of responsive-website design.

It recommends various books and in the "toolkit" section, it lists options for Wordpress, Drupal and Joomla and JQuery.

Of these, JQuery is used for display tools that a number of Blogger-helpers provide - so I would expect to see "responsive" being added to their features soon. 

Apart from the JQuery front, initially I thought that responsive website design didn't matter for people who use Blogger: as Ive explained before, we simply don't have much control over the web-pages that are made to display our blogs. But it made me wonder about how Google might change Blogger so they were following these guidelines fully themselves.

But after thinking some more, I realised that Blogger is already starting to use the responsive design approach with mobile templates: if one is enabled for your blog, then the gadgets that are shown a different on mobile and non-mobile devices ane the way that posts are displayed is different - but the underlying site content (posts and pages) is the same.

And there are things that we can do in our posting and template editing that will help Blogger make our sites work better on devices with different screen sizes.

So, what should we do?

Set the maximum width for pictures.

In the post-editor, you can choose to make pictures small, medium, large, etc - and the values that are used for this are absolute numbers of pixels height and width.

But what happens if you set the width to, say 400 pixels ("400px"), and a user has a screen which is narrower than this?  The question is hard to answer, because mobile devices apply some scaling-down so that in many situations the picture fits, and look fine.

I recently read an article from an English coffee-drinker, showing how to change these sizes to any values you want and to control the picture quality at the same time.   At first I thought that this would solve the problem.

But there are cases where it won't work properly, eg if you want text and pictures to be side by side, and use a table rather than a "<div>" statement to do this. If the amount of space that you allocate to the picture is wider than the space on the screen, then the results my be unpredictable, or the text may be very, very narrow.

I was originally going to suggest working around this problem by specify the width in terms of percentages instead of pixels, for example:   style = 'width: 80%;'  But, as I found tonight, if you float your pictures to the left or the right, that approach doesn't quite work - the way that the post-editor puts in <div> statements means that scaled down pictures can be left inside empty larger empty divisions, etc..

A better alternative is to continue to use small / medium / large etc, and also to add a CSS rule  saying that pictures can take more than a certain proportion (ie percentage) of the available. space.    (Thanks to Paul of Spice Up Your Blog who suggested this, as a way to stop pictures from spilling into the sidebar).  

Luckily it's very easy to do this - just add a CSS rule in the usual way for your template.   The specfic rule to add is

.post img {max-width:98% !important}

When you copy and paste - don't forget the dot (.) at the start of that line.

Also, you may like to experiment with values - you might even go as low as 80% on some blogs.   The beauty of this rule is that it specifies the maximum - if your photo is smaller than that, it's not affected.

Width of other embedded elements, eg PDF files

Pictures aren't the only things that have a fixed width - the same thing can happen to embeddded documents / PDF files, slideshows, maps, forms, etc. They can be more challenging to use on sites with smaller screen sizes. Somteimes their code might cater for differnt sizes. But one good overall principle is simply to remove the height statement from the, and specify the width in terms of a percentage.

That said, I don't do this for the embedded Google custom maps on one of my sites: as a user I very much prefer to see the map at full size, and to scroll around as I need to - so I've assumed that my visitors prefer the same approach.   It all depends on the nature of your site, and how people use it.

Responsive AdSense ads

If you use Adsense via Blogger's gadgets, then appropriately sized units will be placed on your blog. And (unless you choose the "ads between posts" option in the Blog Posts gadget) - this includes inside mobile-template viewers.

But many Bloggers use AdSense by getting the code and installing it to their template or putting it into an HTML/Javascript gadget, perhaps because they want better control over the ad colour-scheme, or to have the option of image-only AdSense ads.

Fortunately it's pretty easy to adapt these ads to be responsive - this excellent article from Digital Inspiration explains this technique in more detail.

Sidenote: I was quite amused with recent announcements by some Blogger-helpers (eg Paul in Spice Up Your Blog) that we can now use AdSense in Dynamic Templates.  As far as i know this has been the case since Dynamic Templates were introduced: provided AdSense is enabled in your blog with a gadget (not embedded in posts, or put into HTM/Javascript gadgets), then the Dynamic Template view promised to show an advertisement in an appropriate place (most likely the footer, I think). In princple, this is just another dimension of being "responsive" to different screens and ways of reading website content.

What else

My instinct is that there are other things which blogger users will need to think about as we move into a "responsive" world - at least Bloggers who care about visitors from different screen sizes will need to be busy.

At a minimum, consider whether you need to enable a mobile template for your blog, and set up some specific gadgets just for it.


What else do you think is relevant here?

---

Related Articles

Who Blogger converts out posts into web-pages

Giving your blog a special template that only mobile users see

Showing Google maps inside your blog

Getting image-only AdSense ads

Putting 3rd party HTML into your blog

How to add a gadget using Blogger

Adding a CSS rule to your template