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

Hiding the space where the navBar used to be

This article shows how to remove the space that is left when Blogger's top-of-screen navigation bar display is turned off.

Removing the navBar is one of the long-standing tweaks that blogger users have been making ever since layout templates were introduced.

It caused a bit of heartache in the early days, because there were suggestions that perhaps doing so violated Blogger's Terms-and-conditions.

And the navBar is still the home of some tools that people do think are useful, including the report abuse link.


But it looks like Blogger themselves have finally settled the arguments.  They've adding an option to off turn the nav-bar to the from the Layout > Navbar - edit tab.

1. Choose the Off option
2. Click Save.
3. Click Save arrangement (top right)

(Granted they did hid the option at the very bottom of the list, and as far as I know they didn't mention it on any of the new features announcements.   But it is there, so it must be ok to use.)

Note: If you have already applied the original remove-the-navBar tweak, then your option button will be whatever it was before, even though your navBar isn't showing.

What your readers will see

If the navBar is turned off, then your blog will be drawn on the screen in the usual way, except that the space where the navBar was will be filled with a solid line in your background colour.

At least some of your readers (eg ones who use a netbook or other smaller screen quite often) will regard this as a waste of valuable screen space.

How to remove the gap where the navbar used to be

You can move the header up to cover over the area where the nav-bar was by adding a CSS rule to your template in the normal way.

The rule to add is:

#navbar { height: 0px; visibility: hidden; display: none;}

Apply that, and the space that the nav-bar was in will simply close up, so the rest of the content is a little closer to the top of the screen.

Is it a good idea to get rid of the navBar?

"Just because you can, doesn't mean you should"

I explained what features the navBar offers in my initial article about how to remove it.  I still think that there's no hard-and-fast rule about whether to keep it. It seems to me that the navBar is:

• Particularly useful to readers who use blogger themselves
• Handy for those readers who have Google accounts themselves, and understand the benefits of being logged in while browsing
• Confusing and annoying for the rest of your readers
• A Very Bad Thing(tm!) if you're trying to hide the fact that your website is built using Blogger.

What do you think:

Will removing the navbar make your blog better?

Are there any blogging friends who you should share this tip with now, because it will definitely make their blog look better?

---

Related Articles:

How to add a CSS-rule to your template

The original hack for removing the navBar from your blog

Custom, layout, designer and dynamic templates - understanding which is which.

Understanding Google accounts.

How to put a gadget into a post in Blogger

This article describes how to put a gadget into a blog post / page - or at least how to make it look like you have done so.

Gadgets and Blog-posts

Previously, I've explaiend how to add a gadget to your blog. In that post, I said that the only place where you could put a gadget was one of the areas defined by your template - basically the header, footer or sidebar.

For gadgets where you get the HTML or Javascript code from somewhere else, it's easy to add the code to a post - see adding code from external sources to your blog for more information.  But for gadgets from the Add a Gadget list, there is no way to do this.

But it's fairly easy to make it look like you have put a gadget into a post or page, provided you're willing to accept the risks of editing your template.

The way to do this is by putting the gadget below the blog-posts area, putting any further post-content into another HTML-gadget under this, and then setting both of these up to only show on the specific post or page that you want the gadget to be "in".

While this is tedious, I don't expect the restriction of putting gadgets inside posts to be changed anytime soon.   (Go on Blogger ... prove me wrong!)

Follow these steps to put a gadget into a post or page:

1)   Make the post or page
Give it a title, and if there is any content that you want to put above the gadget, then add it now.


2)   Publish the post / page.
If you use a Post, remember that it will go out in your RSS feed - and it could look strange for your subscribers to see a half-written post - make sure that what you'd doing is worth any confusion that this may cause.
And if you use a Page, you may need to adjust the Pages gadget to not show it, depending on what how visitors will access the page.

Despite these side-effects you need to publish the post/page now, before the gadget is added, because you need its address later on.   So take note of the URL of your published post.


3) Add the gadget to your blog in the usual way.
Position it immediately underneath the Blog Posts gadget. Find out the gadget-ID, and keep a note of it.


4) If there is any content that you want displayed after the gadget, then

• Use the post-editor (or any other tool) to generate the HTML code for this content 
• Add an HTML/Javascript gadget:  Put the code you made into the Content field, and position the gadget immediately underneath the gadget you added in step 3.
• Note the ID of this gadget, too.

5)   Set up which page/post your gadget is shown on:

Edit your template (don't tick the expand widgets checkbox).

For both of the gadget-IDs that you noted (the one that's going "inside" the post, and the one that contains the rest of the "post"),  change the template so that they are only displayed on the Page or Post that you created in the first step.

The way to do this is very similar to only showing a gadget on your home page, except that instead of

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

the condition to use is

<b:if cond='data:blog.url == "URL-OF-THE-POST-YOU-MADE"'>>

How well does it work?

I'm still testing to see how well this approach works, and what gadgets it's most suitable for.  Some, eg the Labels and Followers gadget, are likely to expand to fill the space available.   So will Search - though if it doesn't then it might be as easy to just use a custom-search-engine, which will give you the code.   AdSense gadgets will take the space required for the type of gadget you choose, but again it's probably simpler to just get the code from AdSense and put it into your post directly.

One issue I've found is that the gadget is left-aligned, and there is no way to make the "post" text flow around it if it doesn't take the entire post-width.

It may be possible to centre the gadget within the post, by putting this code around in in the template:

<div style='text-align: center;'>
<b:widget id='XXXn' locked='false' title='YOUR-GADGET-TITLE' type='Text'/>
</div>

That said, I haven't tried this yet, and there may be some extra things to think about here.   Let me know if it doesn't work, and I'll try to find a way to solve any problems.

---

Related Articles:

Adding a gadget to your blog

Finding the id for a gadget 

Using the post-editor or generate HTML

The Pages gadget:  a menu bar for Bloggers

Showing a gadget on your home-page and no other pages

Advantages and disadvantages of editing your template

Putting AdSense ads into posts

Removing the navBar from your blog

This article explains what Blogger's navBar is, what features it offers, and how to turn it off if your blog-site doesn't benefit from these features

What is the navBar in a Blogger blog?

At the top of most blogger blogs, there is a strip with some handy functions on it.

This stripe is called the navBar (short for navigation bar), and it can be incredibly handy for your readers - if those readers are Blogger users, or at least Google users, and so appreciate it.   For others, however, it's just clutter, and a waste of perhaps 15px of above-the-fold space.

On the left hand side, the navigation bar (aka the blogger bar) has tools for visitors to your blog:

• A quick link to the Blogger software, ie www.Blogger.com  (the capital B icon on the left)
• Search - access to a very cut down search function
• Follow - a quick way to follow your blog
• Share - a very simple set of social-networking share buttons
• Report Abuse - linking to Google reporting centre
• Next Blog - a link that takes the reader to a semi-randomly chosen blog made with Blogger (semi-random because it's matched on topic, to some extent)

On the right hand side, if you are logged in and looking at a blog which you have administrative rights to you can see:

• Your Google account name
• A new post link 
• A link to the Blogger Design tab for the blog you are currently viewing
• A sign out link, to let you log off your Google account. 

Or if a visitor is logged in, but doesn't have administrative rights for the blog they are looking at (ie if they are a visitor looking at your blog), they can see

• Their own Google account name
• A link to their own Blogger dashboard 
• A sign out link, to let them log out of their Google account. 

These functions have their uses, although I wouldn't rely on people to see them:  if you want your blog to be popular, you'd be far better off adding your own custom search engine and social networking icons).

But if you want your blog to look like a website, the navBar should be on your hit-list of things to be removed.

(And if you're wondering why your blog doesn't have these handy functions at the top, it's either because your templates already has them removed, or because you are using a blog with a dynamic template:  these don't have a nav bar at all.)

How to take the navBar off your site:

---

UPDATE: 

The following is now redundant, because Blogger have added an Off option to the navBar options. It's being kept here for reference only.

Also the Off option leaves an empty space at the top of the blog - you can remove it using this simple tip.

---

To get rid of the navBar, just follow the usual way of adding a CSS rule to your template, and add this rule:

#navbar-iframe { height: 0px; visibility: hidden; display: none;} 

And if you want to close up the space at the top where the nav-bar used to be, add this CSS rule too:

#navbar { height: 0px; visibility: hidden; display: none;}

How to report abuse on a blog that has the navBar removed:

Some people may remove the navBar because they want to use Blogger for purposes that are against the terms and conditions, and don't want to be reported.

Sadly for them, the lack of a "Report Abuse" link doesn't help very much: if you see a blog that you want to report, you can simply used Blogger's terms of service complaint submission system, and type in the link to the blog or blog-post yourself.

Do make sure that you review the list of things that Blogger will accept complaints about:  it's not a good idea to get a reputation as someone who cries wolf, just in case you need to report something genuine later.

---

Related Articles:

Adding a CSS rule to your blog

Linking your blog and the social-networks

Understanding Google vs Blogger accounts

Adding a custom-search-engine to your blog

Adding a gadget to your blog, using Blogger's WYSIWYG interface

This article shows how to use Blogger's add-a-gadget tool.  

It also looks at how you can move a gadget around in your blog, and describes what you can do with some of Blogger's most-popular gadgets.

Gadgets and types of Blogger template

Previously, I've explained what gadgets (ie widget) are, and the advantages and disadvantages of each method of adding one to your blog, and how to add a gadget to a blog with a dynamic-view template.

This artile looks at the details of using Blogger's own add-a-gadget tool, how exactly to use it, and how to change the placement of gadgets in your blog.

This is more in-depth than the dynamic templates article, and applies mainly to blogs with layout and designer templates.  The same general approach is used for dynamic template blogs, but they do have some features  that aren't discussed here (eg a limited range of gadgets that actually work).

In-post, and HTML-code gadget:

The tool described here lets you put a gadget in any of the "gadget areas" in your blog.   The options are a little different if you want to put a gadget right inside a blog-post.

Also, there are reasons why you might prefer to get the HTML-code for a gadget, and install it like you install any other code to your blog.   Read more about the reasons for using HTML-gadgets and places to get code that's equivalent to Blogger's official gadgets.

How to use Blogger's Add-a-gadget feature

From the Blogger Dashboard (www.Blogger.com)  go to the Layout tab

The layout screen will open.    On it. the Add a Gadget links show you all the places that you can currently add a gadget.

Choose one of these place.
(You can make it possible to add gadgets to other places see How to add a gadget above your header, or Adding a new footer section to your template for ideas on how to do this.)

Click the Add a gadget link at the top of the area you choose.


The format of the Choose-a-gadget window that opens used to look like this, but has since been updated to the look like new interface.   But the same general idea applies:  you several lists of gadget, in separate tabs.

Choose a gadget from the list, or one of the tabs:

• You may need to scroll down the list to find the one you need.

• Do not use the search tool in the list to find the gadget that you want - it sometimes doesn't work correctly and only shows gadget from 3rd parties and not the official ones from Blogger.

• But it is ok to use your browser's search-tool - like this.

• Every gadget in the list has a source: some are from Blogger.com. Some are from other recognised companies (eg Amazon.com), But some are from individuals, just like you and me. The danger with using a 3rd party gadget from this list is that you have no way of looking at the code behind it, so you cannot decide if it's safe or not.
  
  I recommend only choosing gadgets from Blogger.com, or other well known companies.

Select the gadget by clicking the small blue plus sign beside the name.


This opens the gadget configuration screen, where you enter the details of how you want the gadget to work.

Every gadget needs different details.

For example, in the Popular Posts gadget, you must choose

• to list popular posts since statistics started, or the last 7 or 30 days
• whether to show the image thumbnail
• whether to show the post snippet
• how many posts to show

When you have entered the parameters, click Save.

This takes you back to the blog-layout screen.  The new gadget is at the top of the list of gadgets in the area where you put it. If you gave it a title, then this will show up. But if you left the title blank, the screen just shows the gadget type.

Use the Preview button to see what the front page of your blog will look like with the gadget added.

Change the position of the gadget if you want to (see the next section if you need help with this).

Once you are happy with the gadget and its position, click Save to apply it to your blog.

How to change the position of a gadget:

You can move a gadget (new or existing) into any place in your blog-layout that you can add a gadget to.   In the Layout (Design > Page elements) screen:

1. Single-click on the gadget and hold the mouse button down.   Keep holding it down.
   
2. Dragging the mouse moves the gadget to other places, including further down the list of gadgets currently in that space, or into a totally different part of the blog.
   
3. Once the gadget is in the place where you want it to be, let go of the mouse-button.

Once you are happy with the position of all the gadget, click Save (in the old Blogger) or Save arrangement (new Blogger) to apply the new places to your blog.

There are other things that you can do with gadget, too, including only show them on the Home-page, and making a gadget that looks like a post.

What can Blogger's gadgets be used for

Some of the most popular gadgets provided by Blogger are:

Labels	Lets your readers pick a category and see a list of posts from your blog with that category.
Popular posts	Shows the most-frequently read posts from your blog
Pages	Similar to Labels and the linked-list gadget, this one can show a list of either Pages from your blog or external sources, and it can also be used to make a menu bar for your blog
Blogroll	Highlights other blogs that you follow
Picture	Shows a picture, of your choice, which can link to somewhere as well.
RSS	Displays the last few posts from an RSS feed - this can be any feed that you choose - not just your own one.
HTML/Javascript	Lets you add code that came from a 3rd party, or that you wrote yourself, without having to edit your template.
Link List	A general-purpose gadget for adding a list of web-sites and blog pages, either inside or outside your blog.

---

Related Articles:

Finding an item in Blogger's add-a-gadget list, quickly.

How to edit your blog's template

Options for adding gadgets to your blog

Adding a gadget above your header

Adding a new footer section to your template

Adding a gadget to a blog with a dynamic-view template

This article is about how to add widgets (also known as gadgets) to blogs that have dynamic templates.

Things are looking up: 

Beer glasses can have widgets, and
now  dynamic-view blogs can have them too

Previously I've described dynamic templates, and how you can turn them on, and also off, on your blog.   And when people asked "how do I put a whatever gadget onto my blog", the short answer was " you can't - yet".

But now Blogger have announced that it's possible - their post also shows us how the docked widget bar works.

And if your blog already has a dynamic template, they've added a few gadgets for you.   For my test blog, this was Followers, Archive About me and Subscribe - I'm not sure if these are the only ones, or it was based on my layout before the blog went dynamic.

How to add a gadget to a blog with a dynamic template:

This is just like adding a gadget to a blog with a designer or layout template, ie:

• Go to the Layout tab   (Design > Page Elements, if you're using pre-Sept-2011-Blogger)
• Click Add A Gadget.
• Choose your gadget, and configure it if necessary.
  (NB Blogger appear to be converting all the existing gadget setup screens to the new-interface-look-and-feel, so don't be surprised if the buttons etc inside the gadget parameter windows look different)
• Preview to check it's ok
• Click Save Arrangement.

It's not perfect yet:

The layout editor window looks somewhat strange, in post-Sept-2011-Blogger anyway:

More importantly, Blogger's announcement says

Gadgets supported in Dynamic Views currently include: Blog Archive, Followers, Labels, Profile, Subscribe (a new gadget - automatically present if either Follow By Email or Subscription installed), and Link List.

So no HTML, no AdSense, no Blogroll (except you can make your own with the Link List), Statistics, Slideshows, Polls, etc ... yet.    To make matters worse, there's nothing to tell you what gadgets you cannot add:  you put them in, but they're just not there once you save and look at the blog.

But some of them may become available, if Blogger can figure out how to place with within the type of space they're using for gadgets on dynamic views, where we don't really have a sidebar.   And until then, the following section from my original post still applies.


In the meantime:

The October announcement did show how you can customize the colors of your dynamic-template blog.

Southern Speakers has been publishing lots of how-to information about how you can format dynamic blog elements by adding CSS rules - his most recent post is about how to remove static page titles.   He has also described a way to put gadgets that you can get the code for into a page - this description is specifically for the Followers gadget, but could be applied to other code too, provided you can get the code.

And if you want, you can just switch back to using your most-recent template, and wait for the improved version of dynamic templates to arrive.

Or you could do cunning things, like put AdSense ads into your posts instead.




For history's sake:

This is the body of my original post.   It's not true any more, but I want to keep it here, in case I need to use some of this text agaon - or so you can see how much better things are now.

The Full Story:Google told us in late October 2011 that they're working on making this possible.   They haven't said when they expect to have this available.   If we're really lucky it will be "one day very soon" (and boy will I have a red face if they announce how to do it tomorrow!)

I suspect that it's not an easy thing to do, because dynamic template blogs are basically a totally different way of displaying your blog, using your RSS feed and (now) CSS rules, rather than reading all the design details from the blog itself.   Providing this, along with the level of design control that people with Designer and Layout templates are used to, might be quite technically challenging.

I've written this article because I got sick of explaining "no not yet" in the help forum:  I really want to give people there the full story, but finding the link to that October announcement every time was a pain.   Now I can just link to this.

But hopefully I'll be able to totally re-write it, very soon  :-)    Giving negative answers isn't nearly as satisfying as explaining how to do things.

---

Related Articles:



Dynamic templates and your blog

Options for adding gadgets to your blog

Remove your dynamic template carefully, to return to your previous design

Putting AdSense ad-units inside blogger posts

Understanding your RSS feed

How to add a CSS formatting rule to your blog, without editing the template

What type of template does your blog have?

The Page gadget: a menu bar for your blog, with links to just about anywhere

This article shows how you can use the Pages gadget as a general purpose menu bar for your blog.

Evolution of the pages gadget

When Blogger first introduced so-called "static" pages, I thought they had a lot of potential.

As I investigated, though, I came to the conclusion that they were more trouble than they were worth, so I recommended abandoning them and just using posts.   Or at least abandoning the Pages gadget - even I sometimes use a Page for things that I don't want to send out in my RSS feed, eg custom-search-engine results.

But when the September-2011 version of Blogger  was introduced, the Pages gadget got a new feature:  now, it can include links to any website URL, not just your own pages.  

This makes it a lot more versatile - even though the effect is just the same as adding a Link-list gadget and putting it into the right area of the blog-layout.

How to add general web-links to your Pages gadget

Go to the Layout tab of your blog's dashboard.

If you are not already using the Pages gadget, then add it - the same way you would add any other gadget.    Otherwise just click Edit on your current Pages gadget to see the gadget-options.


Click the + Add Link Page  option

Enter the title that you want to show up on your menu bar  (phrases with spaces are allowed, some special characters may not be), in the Title field


Enter the URL which should be opened when someone clicks on the new menu-bar item   (make sure the web-site address starts with http:/  )   in the Web-address field:

Click Save


You can change the order of the items in your menu bar by picking them up using the "grab bar" to the left of the item name, and drag-and-dropping them up or down the list of entries entries.

And you can remove external web-addresses by clicking the small grey "X" to the right of their Title.


When your menu-bar items are in the right place, click Save to apply them, and then Save Arrangement in the top right corner of the Blogger dashboard.

What your readers see

Visitors to your blog using a web-browser on a non-mobile device will see a menu bar either at the top or the side depending on where you put your pages gadget.

Visitors using a mobile device will see the same thing if you do not have a mobile template enabled, or a slightly different style of menu  (drop-down) if you do have a mobile template.


Most readers will think that the items in your menu bar will take them to "pages" in your blog.   If they hover over an item in the bar, they will see the web-address it is linked to, in the same way that their browser usually shows this   (eg in Chrome, I see it in faint text at the bottom left of the screen).

This will work well if the web-addresses you have added are within your own blog (eg search-labels, if you are using this approach to putting your posts into pages).

But it may be confusing if you've put in links to other websites, or invalid links   (remember, there was no "test this link" option when you were adding the web-site URL to link to).

Currently I do not know any way to make pages-gadget links to external websites open in a new browser window.   If this feature is necessary, then your only option is to use a hand-coded HTML gadget instead of the Pages gadget.

The Pages-gadget vs a Link-list

When the Pages-gadget was first introduced, they were just like regular linked-list:   the magic was that Blogger introduced a new area in the templates where linked-lists are formatted differently.

This is still true to a great extent.   But on blogs viewed with dynamic templates, the presence of a Pages gadget causes the layout to be a little different.  

I haven't tested it thoroughly, but I suspect that the presence of a link-list gadget on the template (remember, you cannot add gadgets to dynamic template blogs)  would not have the same effect.

This makes me suspect that Blogger may introduce some other enhancements based on the Pages gadget, so it may be worth using them instead of Link-list gadget in the future, so as to get the benefit of these changes when they eventually happen.

---

Related Articles

Putting your posts into Pages

Making your links open in a new browser window or tab

How to add a gadget to your blog

Adding gadgets to dynamic view blogs

The difference between posts and pages

What are dynamic blog templates?

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.

Overview

If your blog has a layout or designer template, then (almost?) all of Blogger's templates start out with 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.

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 cannot drag any gadgets to above the header.

But this is easy to change, provided you are willing to accept the disadvantages of editing your blog's layout template.


How to allow changes above your blog's header:

Follow these steps to make it possible for you (or any blog administrator) to add gadgets to the area about your blog's heading section:

1  Edit your blog's template
Old UI:  Design > Edit HTML
New UI:  Template > Edit HTML > Proceed

2  Download a full copy of your template, and put it somewhere safe (in case something goes wrong, and you need to restore from it).

3  Find this code in your template:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Hint:  use your browser's search tool, (Edit>Find in Firefox, Ctrl/f in Chrome) to look for a key phrase like "id='Header1'

4  Change it to

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Notice that there are two changes made:

• Setting maxwidgets to greater than 1, and
• Setting showaddelement to Yes, instead of No

5  Click Preview, to check that your template is working:
This shows you a view of the screen, but you won't be able to click the items on the preview srcreen.   It's a good idea to do this even for very simple changes, so that you know that they will save correctly.

6  Click Save to apply the changes to your blog's template.

7  Quickly test your blog, to make sure that nothing else was accidentally changed.   At very least, you should click one of each "type" of link on the main page (eg one post title, one page tab, on search button)


What you will see:

After you make this change, the next time you edit your blog layout (New UI:  Layout    Old UI:  Design > Page Elements), then you will find that you can add or drag-and-drop up to three gadgets to the Heading section of the blog, making a total of four.

You can add even more gadgets by changing the number for maxwidgets to something else.


Related Articles: 



Disadvantages of editing your blog's layout template

How to set up an extra administrator for your blog

Types of Blogger template

Planning changes to your blog - in private

How the data in Blogger blogs is organised.