Quickly find the item you need in the Add a Gadget list - quickly

This article explains a quick way to find the widget that you are looking for in the list that Blogger displays when you use the Add a Gadget tool.

When you start to add a gadget to your blog, Blogger opens a new window listing all the existing page-elements that are available (in two tabs) and allowing you to upload a widget of your own (in a third tab.)

Currently, the first tab (called Basics) has 28 gadgets listed, while the second one (called More gadgets) has 899, displayed in pages of 30.

There is a search-for-gadgets feature available on the second tab - but it doesn't return gadgets that are listed on the first tab.   And even when it did, I didn't recommend it, because sometimes 3rd party gadgets with similar names were listed before the official widgets developed by Blogger.

So, to find a gadget that's listed in the Basics tab, you have to scroll down the list until you see the gadget you want.   However there are some problems with this.

• Given that there are 28 gadgets listed, but only about 4 shown at each click (may be different if you have a larger screen), this can be a lot of clicks.
• It's very easy to miss the gadget you want, and keep clicking through to the bottom instead.

But there is a very simple way to go directly to the gadget you want, provided you know what it is called, or some words that are shown in the description of that gadget and no other.

How to navigate directly to your desired gadget

Choose Add a gadget

When the new window has opened, use your browser's "find" command.

• In Chrome and Firefox, this is ctrl /f ,   ie hold down the Control key while pressing the "f" key once.

Type in a  few letters of the name (or description) of the gadget you want.  

Note:  these can be any letter, they don't have to be at the start.  But they must appear together.

Usually, as soon as you start typing, your web-browser will start scrolling down to the first place in the screen where the letters you type appear.   So if you choose the gadget details you type carefully, you should end up scrolled down to the gadget you want very quickly indeed.

The scroll bar at the side shows how far down the window you have come, and also if there are more cases of those letters further down the page.

And once you are at the gadget you want, you can just click the name or the blue plus-sign on the right side to open the gadget configuration page.

To sum up:

Use your browser's Find tool to go straight to what your're looking for in the Add a Gadget list. 
[tweet this]

What to search for to find popular gadgets

The words that I search for most often when I'm adding gadgets are:

• HTM - for the HTML/Javsascript gadget
• Ads - for the Adsense gadget
• Link L - for the linked-list gadget.

What about you - what gadgets do you most frequently add to your blogs?

---

Related Articles:

Backing up your gadget settings

How to add a gadget to your blog

Where to find the HTML code for popular Blogger widgets

How to add a Google Contacts button to your blog, website or desktop

This article shows how to add a button that takes a user straight to Google Contacts to your blog or website.   It also distributes a picture that you can use in other places (eg your PC desktop) to make your own Google Contacts icon.

Most people have a button on their computer or smartphone, which they use to start their email.  For some, this goes straight to their Gmail account in a web-browser, while others use an system like Thunderbird or Outlook to look at their email messages in a Gmail account and/or in email accounts they have with other services.

If you use Gmail as your email system, then Google also gives you an address book, which they call Contacts. This is not the same as the address book in Thunderbird or Outlook etc, which is saved on your local computer.   Instead, the Google address book is saved on the internet, in your Google account.

Google Contacts is tightly linked to your Gmail account, and the way that most people access it is by:

• Going to Gmail 
• Clicking on the Contacts button in the left-sidebar.

But you can go straight into your Google Contacts, without having to load Gmail first.   And I often find that it is faster, especially if I just want to look up an address or phone number and not send an email.

To go directly into your Google Contacts book, just type    www.google.com/contacts into the address-bar of your web-browser.

This is easy - but some people would prefer to have a button that they can click, rather than having to manually type an address.

So I have created a picture that can be used on such a button, and written up instructions on how to add it to your website, or your computer.   This is licensed under Creative Commons:  I am giving permission for it to be freely used on any website, so long as you say where it came from in the way that I've shown below.

(If you a wondering "why on earth would anyone want that" - then please don't waste time reading further - you are clearly not the target audience of this post!   I know that there are some people who will be delighted with the idea, and that's who I'm writing for today.)

How to add a Google Contacts button to your blog or website

Set up a place to put the button

If you want to add the button to Blogger, then just add a gadget in the usual way, and choose gadget-type of HTML/Javascript.

If you want to add it to some other type of blog or website, then you need to use whatever procedure is required to add 3rd-party HTML to your site.

Add the code

The HTML code to add is:

<div class="separator" style="clear: both; text-align: center;"><a href="https://www.google.com/contacts" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDMLN8BP18RiShyDuGCHuH132G8SRisZMyfto46JcTmq9cwv3WKHUGkWZS-r9cyteHS0xQiShQLXDDsuYNgGZUvscZiJ24tFm71rTZ-WxCWBpDcooUD6gK5SBgeM9SzZK6T2TppztG5XJ/s490/google-contacts-icon.png" width="50%" /><!-- Google Contacts Start button from www.Blogger-hints-and-tips.blogspot.com   Design © Blogger Hints-an-Tips, 2014.   Licensed under Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)  -->  </a></div>

Make sure you all all the code, including the Creative Commons license information - this is what says you are allowed to use the picture.

Configure the size

You can change the size of the button by changing the number in this statement:

width="98%"

On my sidebar in Blogger-Hint-and-tips, I have it set to 50%.

You can use either a percentage value, as shown, or a pixels or em measure, for example

width="50px"
width="10em"

Job done!

Save the change in the usual way, and you will have a button on your website which opens Google Contacts

How to add a Google Contacts button to your computer / laptop / desktop

This is a little more difficult to describe, because it depends on exactly what computer and operating system you have, and what you mean by adding the button "to your computer".   But here are some options.

Browser Favorites

One option is to go to  www.google.com/contacts   and then before you do anything else save it to the Favourites section in your browser - and then you know you can get to Contacts using your regular internet button and choosing it from your favourites.

In the Windows desktop

Right click on your desktop

1. Choose New
2. Choose Shortcut
3. In the screen that asks what you want the shortcut to, enter  www.google.com/contacts
4. Click Next
5. Enter the Name you want the link to have, eg "Google Contacts", and click Finish

The shortcut that is added to your desktop has a standard internet picture.   To change it to another

1. Download this file to your computer, and save it somewhere.
2. Right click on the shortcut that was created, and choose Properties.
3. Choose Change Icon
4. Choose the file that you saved in step 1

Note:   these instructions were prepared using Windows 8 - they may vary slightly for earlier versions.   But the same general approach applies.

 

---

Related Articles:

Copyright, blogs and bloggers

How to add a gadget to your blog

Keep a backup copy of complicated gadget settings

This article explains why it's a good idea to keep a backup copy of settings for your gadget, in particular for HTML/Javascript gadgets that have complicated, hard-to-regenerate, code.

Blogger's backup tools let you take copies of:

• your post-contents and (separately) 
• your template. 

Some 3rd party backup tools (eg HTTRack) let you make backup copies of how your blog looks - including the consequences of displaying your gadgets.

But as far as i know, there is no way that you can back up the settings (ie parameters or configuration) that are stored inside the widgets on your blog.

This can be a problem if you accidentally remove a gadget, or if you have an HTML gadget and get the code wrong in it: Blogger is quite unforgiving sometimes, and the HTML/Javascript gadget editor simply removes any code that it doesn't understand.

In some cases, this isn't not a big problem  eg if you show a picture as a gadget, then it's generally easy enough to work out characteristics that you would need to enter to re-create the gadget.

But if you lose a complex gadget (eg your own customised set of subscription buttons), then re-creating it could be difficult and time-consuming.

So - for HTML/Javascript gadgets which have code which you think is complex, I recommend keeping a backup copy of the gadget code somewhere.

Personally I usually put it in a post in a private blog where I draft posts and keep the documentation for each blog - but you could use a range of other places, eg a text file on your computer or on Google Drive, or even any email message to yourself.

How to back up code from HTML/Javascript gadgets in a private blog post

Every time you edit a gadget that you want to keep a backup for, then just before you click Save:

• Press Ctrl/a to select all the text in the gadget window.
• Press ctrl/C to copy it
• Switch to use Blogger in a different window
• Open up the documentation blog, and navigate to the post where you keep the code for that gadget
• Edit that post - or make a new one if you don't have one already.
• Make sure that you're in Compose view, and the Options > Compose Mode setting is on "show HTML literally" (ie not on "interpret HTML")
• Paste the gadget code into the post, and publish it.

Although this sounds tedious, it's really very quick to do. And losing complicated gadget code, even once, is a good incentive to remember to back it up every time.

Hint: Put a comment to remind yourself where to back this gadget at the top and/or bottom of the gadget code. This reduces the chance that you will forget. A comment is done in HTML like this:

<!-- DON'T FORGET TO BACK UP THIS GADGET CODE  -->

How to back up complicated non-code gadgets

If your gadget has complicated settings which aren't code, one option is to take a screen-shot and save it to your photo collection, or even just a text-file or documentation-blog post where you keep notes about what the settings are.

You won't be able to automatically restore your gadget settings from this, but it should be a good reminder of what you need to do (provided you can find the picture when you need it).

Unfortunately there's no easy way to pack up linked-list or blogroll gadgets at the moment. However making a copy of your site using HTTracker will show you the list, and what the items link to.

Or you could build your linked list code manually (using the same trick that that I recommend for getting picture code) and put it into a HTML/Javascript gadget, which is based up as described above. The code for a handcrafted linked-list gadget looks like this:

<ul>
<li>PUT THE TEXT HERE FOR YOUR FIRST LINK TEXT.</li>
<li>PUT THE TEXT HERE FOR YOUR SECOND LINK TEXT.</li>
<li>PUT THE TEXT HERE FOR YOUR THIRD LINK TEXT.</li>
<li>etc</li>
</ul>

---

Related Articles:

How to add a picture as a gadget in Blogger

Using the post-editor to build HTML code for gadgets

Prepare your blog-posts in private, using a documentation blog

Putting a picture on your blog as a Gadget

You can put a picture anywhere in your Blogger blog that you can insert a gadget - and you can make it link to a post in your blog or to any other website.

The Image gadget

Dry dock in Claddagh Basin

A very simple way to put a picture into your blog is to use an Image gadget (previously called a Picture gadget).  

This is a tool that Blogger provides to make is easy to add a picture that shows up on all screen and is linked to somewhere.

Often gadgets (sometimes called widgets or page elements) are put on the sidebar - but in many blogger templates they can go in other places too (header, footer, etc).

Follow these steps to add a picture gadget:

1  Make sure you know where the original picture is and that you have copyright permission to use it.


2  Copy the location (URL or file system full path-name) of the picture - and remember whether it's on your computer, or on the internet.  
(This article tells you how to find the URL of a picture that's already stored in Picasa.   To find the URL of a picture on the internet, you can often right-click on it and choose "copy image location")

3  In Blogger, follow the usual Add a Gadget procedure, and choose the Image gadget from the list of options (you may have to scroll down to find it in the list).

4  In the Configure-Image box, enter the options you want for your picture.   These include:

• The title for the Gadget,
• The caption for the picture
  (the small words that go underneath it, usually explaining it, or where it came from),
• What should happen when a reader clicks the picture - put this into the Link field
• Where to find the picture
  (ie the file-location that you copied in step 2)
• Whether to re-size (ie shrink) the picture to fix the space in the sidebar in your current template.

5 Press Save.


6  If necessary, drag-and-drop the new gadget to the place where you want the picture to go, and press Save.

  

What your visitors see:

People who visit your blog in a web-browser, will see the picture, in the place where you put the gadget.  However pictures are not supported gadgets for dynamic view templates, so it won't be see if you use one of these.

Also, people who see your blog through an RSS reader, or by receiving emailed updates don't see any gadgets, so they will not see the picture.  

If you entered a value for Link, your visitor's browser leaves your blog and goes to the Link location:  with the Picture gadget, then there is no way to make this open a new window.   If you want to do so, then use an HTML gadget instead, get the code for the picture, and put target = "_blank"   into it:, so the code looks something like: 

<a href="YOUR LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target = "_blank"><img border="0" src="YOUR PICTURE LOCATION" /></a>

---

Related Articles

Options for putting pictures into your blog

Copyright, blogs and bloggers

Picasa and Blogger - an overview

Getting the HTML to add a picture to your blog

Finding a picture's location in Pisasa-web-albums

Finding the URL of a picture stored in Flickr

Showing a PowerPoint presentation in your blog

Why RSS / Subscribe to Posts is important for bloggers

Following a blog by email

New Google+ badges and follow buttons can be used in Blogger

This Quick-tip introduces the new Google+ plugins that Google released in late June 2013

Recently, Google+ Developers blog announced a vastly improved set of Google+ plugins for use with websites.

Most (all?) of them are not yet available as Blogger gadgets, so you have to get the code from the Google+ resources site, and add it to your blog like you would add any 3rd party code.

The new options include a more "industry-standard" follow on Google+ button, and new badges for Pages, Communities and Hangouts, as seen here. (I've previously explained why you might like to have a G+ community alongside your blog.)

They are configurable (size, dark/light, style, etc) - but  you need to work out how to apply the configuration settings to the code.   That said, I've added them to this site without any configuration (see the top of the sidebar), and the default options appear to work well. And it's not actually as hard as it looks: in general you just follow the pattern of:

• Changing   https://plus.google.com/{pageId}     to link to the "thing" (Page, Community, Profile) that you are displaying in the badge.

• Using the "<div class="g-page" data-href="https://plus.google.com/{pageId}"></div>" form of the code, ie the one that's completely inside a "div" statement.

• Adding extra information to it using "data-"   for example,   "<div class="g-page" data-href="https://plus.google.com/{pageId}" data-layout="landscape" data-width="200">

There is one interesting sentence in the announcement:

"Existing badges will stick around for up to 90 days, giving you time to configure the new version for your website. After 90 days, we'll automatically upgrade any Google+ badges to the new design."

I wonder how that will relate to the Google + gadgets that are available in Blogger's Add-a-gadget function now - maybe they will be automatically be changed too.   (In 90 days ... yeah, right ...)

Connet your page with google+ badge and gadgets in you Website, bloggger, wordpress

One of the most social networking site in millions of sites world wide is available and that Google.

Add your own code on above format

Google has good revenue by it self. So if we should connect with  Google than our site visitors and we have no worry about revenue and page rank of own site it may become in through blogger, word press.

After adding Google+ badge

By using this Google gadgets we can share good content and topic with your friends in group and in others groups.

Now a day most of the celebrity and people who working on publicity and e- networking media providing easily.

Google gadgets  is one of the useful gadgets for your sidebar of blogger and your official site and WordPress.

Blogger provides direct installation with your pages.

google gadgets work on mouse hover on Follow and Friends which is shown in below figures.

- https://developers.google.com/+/plugins/badge/

if you are already logged in g mail than you can see the below images.

Get code for Google+ Badge

Google badge much more option on that below page.

You can get code of that “by copy past this code” in your code.

Advance fasture,

light weight javascript code which you have to put in head tag of the HTML code.

Where to get the HTML code for popular gadgets in Blogger

This article explains where to find alternative code for many of the gadgets provided by Blogger - and why you might want to do this, and how to back up your HTML gadgets.

Gadgets in Blogger

Blogger makes it  easy to add a gadget to your blog: you pick the one you want from a list, enter the details on the gadet-options screen, click ok and save. Voila, a gadget doing "just what you want" appears where you put it.

But there are some issues with this simple process.

1  Controlling (and even knowing) what the code does

You don't control what the code does - and you can't even see it, so you have to believe that it does what it says it will do, and nothing else.

For many people this seems obvious:  of course a gadget will do what it promises, or people won't use it.   But maybe it does what it promises and more, eg if you use the poll-gadget, the results are shown on your blog. But does Google keep a record of them anywhere else?    You can't tell, because you cannot see the code behind the gadget.

2  No more customisations

You can only customize the gadget using the options in the gadget screen - and sometimes these are limited or out-dated..   For example, if you have signed up with Adsense and use the AdSense gadgets, then there is no way to restrict them to only show image ads, even though the option is available in AdSense itself. And you can only choose from the limited the ad-unit sizes and colour-schemes availabel in Blogger

3  Keeping a backup copy

You can't back up the "widget settings" that you put into the gadget-options, besides manually writing a note to yourself or taking a screen shot.

Is there a way around these issues?

The answer to these issues is to not use the gadgets that Blogger provides.   Instead, replace them with the HTML code for the gadget which you need to "find somewhere", and install it into your blog as code.   (And if you install it into a HTML/Javascript gadget, make sure you keep a backup copy in a documentation blog or similar).

This table lists places where you can get HTML/Javascript code equivalents for many of the popular Blogger gadgets.  In general, this code is not restricted to Blogger - it can be installed into any blog or website that accepts HTML / Javascript gadgets.

Gadget	Where to get the code?
Any of the AdSense gadgets	Log in to your AdSense account at www.adsense.google.com, and get the code from there in the usual way.
The Amazon Affiliates / Associates gadgets	See Amazon/Blogger integration is finished - what are our options now for information about these
Search	Use a Google Custom Search engine
Translate	Go to  https://translate.google.com/manager/add, enter your website name and the language it is in.   Then on the next screen, choose the options you want (all languages vs specific ones), and press Get Code. You are given a meta-tag to add to your blog in the usual way for adding meta-tags, and some HTML/Javascript which you add in the usual way for code.
Labels	You can build your own linked list (see below) and put the label-search value into them (eg  http://YOUR-URL/search/label/LABEL-VALUE).  This isn't quite the same, because it doesn't give a count of posts by label, but may be good-enough for some cases
Link List - and Unlinked list.	Make your own, by using the post-editor to make the code, and creating a linked-list there.
Google Plus	Get code for a range of gadgets from http://www.google.com/webmasters/+1/button/
Offering an RSS subscription to your blog	See offering an RSS-subscription service, using Feedburner.
Follow-by-email	See Offering an email-subscription to your blog, using Feedburner
Recent Posts	If you have used Feedburner to make an RSS-Subscription option (see above), then you can also get the code for a Recent-posts gadget from Feedburner:  go into the Publicize tab, choose BuzzBoost.  Choose the settings, Save, and Feedburner gives you the HTML code  to display your feed.
RSS	Make an RSS feed for the site you want to display, then use Feedburner's BuzzBoost tool to get the code to display the feed.
About Me	Make your own, by using the post-editor to make the code eg you might like to include a picture etc. Or you can just type the plain text into the Contents field of an HTML/Javascript gadget if you won't want any formattting or links
Archive	I haventt been able to find any way to do this - apart from making your own in a page and linking to it.
Picture	See getting the HTML-code to put a picture into your blog

I'm sure that there are others too - what gadgets would you like to find the code for?  Drop a comment below, and I'll see what I can find.

---

Related Articles:

Use a documentation blog to keep important information about your blog.

Installing code into your blog

Adding a gadget to your blog

Setting up Adsense for your blog a

Showing picture-only AdSense ads in your blog.

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

Adding gadgets to your mobile-template makes your blog better for smartphone visitors

This article shows how to add gadgets to the mobile version of your blogger template.

Gadgets and mobile templates

Previously I've described how to add a gadget to your blog.

If you have not enabled a mobile template for your blog, then visitors who look at it using a mobile device (smartphone, tablet etc) will see all your content and gadgets.   But they will probably have to scroll left and right a lot, because your blog will be a lot wider than their screen.  There might be some issues if you have gadgets that require javascript or particular media players, which their device doesn't have installed. But these are exactly the same as the issues for your visitors who are using desktop computers.

But if you have enabled a mobile template, then readers who are using a mobile device see a different design which is tailored to their screen-width, though still using the colour/theme that you chose.

Blogger faced some challenged when they built these mobile templates: many bloggers put a lot of effort into design and providing gadgets that.    But a 300-ish pixel screen simply does not have room for a sidebar and blog content, and may not have space for some of the things that gadgets do, either.

What Blogger have done is to say that only some gadgets are normally shown on mobile-template versions of your blog:

• Header
• Blog Posts
• Profile
• Pages
• AdSense
• Attribution

However it's easy to add other gadgets to your own customized mobile template, and to set up gadgets that are only seen by readers using mobile-devices - provided you are willing to take the risks of editing your template.

(I've described how to remove the attribution gadget from mobile-templates before, because it's one that some people particularly hate - and of course the same approach can be used for the other standard gadgets too.)

How to add a gadget to the mobile template

First, check that mobile has been enabled for your blog, and that your mobile template is set up to show customizations:   go to the Template tab, click on the gear-wheel under mobile, tick Yes (for show mobile template), then select Custom, and press the Save button.

Add the gadget to your blog, in the usual way:  when you are choosing the parameters, make sure you think about the amount of screen-space that your mobile-readers will have to see it.

Find the gadget ID.

Edit your template: you don't need to expand the widgets.

Locate the gadget code, by searching for the ID you found (tip: use your brower's search function, eg ctrl/F). It will look something like this (slightly different, of course, if the gadget you are working on is of a different type):

<b:widget id='PlusBadge1' locked='false' title='Google+ Badge' type='PlusBadge'/>

To show the gadget on the mobile version of your blog, add mobile='yes' to the code, like this:

<b:widget id='PlusBadge1' locked='false' mobile='yes' title='Google+ Badge' type='PlusBadge'/>

To show the gadget only on the mobile template and not to desktop users, add mobile='only' to the code, like this:

<b:widget id='PlusBadge1' locked='false' mobile='only' title='Google+ Badge' type='PlusBadge'/>

Save the changes.

Use either a mobile device (ideally), or another tool that lets you test blogs as they would appear on different screen sizes, to check that the gadgets are showing as you think they should.

Update:   

Since first writing this post, I have found out that due to a bug in Blogger, if you have a gadget with mobile='only' set, then when you try to make changes to the blog using the Dashboard > Layout editor:

• They will not save, and 

• If you try to preview, you get an error message:

The template is updated in other place. Please reload the original page and retry it again.
Error 500

The only way I have found to get around the error is to remove the mobile='only' statement.

If you really want to have mobile-only gadgets, then you may need to:

1. Remove the mobile='only' statement
2. Make the Layout editor changes
3. Replace the mobile='only' statement.

What gadgets should you add to your mobile template?

There are no hard-and-fast rules here:   it's all about what you want your mobile visitors to be able to access.   I have seen people add blog-rolls, linked-lists, polls, profiles, and various other simple widgets.

Gadgets that I think could be more troublesome are slideshows, popular posts (if you try to show a thumbnail), newsreel, subscriptions, gadgets from Amazon.com and other 3rd parties.

You just need to remember amount of screen space which your visitors have, and how large the images are likely to be for them.   And also that gadgets are likely to be shown as the bottom of the list-of-posts (which is how the blog-posts gadget shows the home page of your mobile blog), so won't be nearly so obvious as they are in the sidebar.

Why put gadgets only in the mobile blog?

You may wonder why a gadget should only go on the mobile version.

One reason is to provide a simpler alternative to a full-featured gadget that is shown on the non-mobile version of the blog. For example, I use a two-page google-custom-search option here on Blogger-Hints-and-tips. This lets me control what sites are searched, and use some advanced display features. But a mobile-sized screen won't cope with this. So if I wanted to make Blogger-HAT more mobile-friendly, I'd add a regular search-gadget, but only show it to on mobile-devices so that non-mobile visitors didn't get confused.

Positioning gadgets on the mobile template

As far as I can see, Blogger users do not easily have any control over the positioning of gadgets in the mobile-template versions of our blogs.

Some experiments make me think that:

• Gadgets from the header in the regular layout are put above the list of posts in the mobile view
• Gadgets from the footer in the regular layout are put below the list of posts in the mobile view
• Gadgets from the sidebar in the regular layout are put below the list of posts in the mobile view

But there could be more going on here - please let me know if you've worked out any more rules that are applied.

Also, I have no idea how mobile templates will cope with tricks like gadgets that are put above your header: test your blog extra carefully if you've tweaked your template in this way before adding mobile-specific tweaks.

Troubleshooting

Stopping gadgets from showing on mobile-template blogs (ie adding mobile='no') does not require you to choose the Custom option from the list of mobile template.   But adding them (except for the ones in the default list) does.

The default mobile gadgets are  only shown if you have put them onto your blog template: if they are not in your blog at the moment, then they will not automatically be shown just because you enable a mobile template.

What other problems have you had with mobile-templates?

---

Related Articles

Putting a gadget into your blog

Turning your blog's mobile template on

Advantages and disadvantages of editing your blogger template

Finding the id for any gadget

Adding a google-custom-search

Giving your blog a home-page

Finding the gadget ID for a widget in your blog

This article shows you how to find the "identifier" for a gadget in your blog.  This isn't useful in itself, but is a set in various other template customizations, including putting a gadget on a single page only.

Sometimes you need to find the code-name for a gadget that you have added to your blog, so you can edit your template and control how and where that gadget is displayed.

This may be part of giving your blog a home-page, controlling how your blog looks on mobile devices, or various other tweaks.

Luckily this is very simple.

How to find the id-code for any gadget

"gadget", "widget", and even "page-element" all mean the same thing.  I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.


Add the gadget to your blog in the usual way.

Edit it again, but don't make any changes to it.


Maximise the window, so you can see the very end of the address bar in the window - at the top of the screen.


Notice the word at the very end of the address, ending in a number.   This is the Gadget-id.


In this example, it's Text1,   Other possible values are HTML1, Attribution1, Followers1, etc.

What does the number mean?

The digits at the end of the widget-id show to the number of times that a gadget of this type has been added to the blog:  in a complicated situtation, with lots of gadgets of the same type, it can get into double, or even treble-figures.)

---

Related Articles

Controlling what goes on the homepage

Adding a gadget / widget / page-element to your blog

Editing your blogger template

Putting a gadget on your static-pages only - or your home page

Blogger developer documentation has moved

Blogger have announced that the documentation for people who write tools using the Blogger APIs has moved to https://developers.google.com/blogger/

This iinformation is what you need to know to create and share you own gadgets. It is also very useful for blogger-helpers who want to understand the data / schemas that Blogger uses, in order to work out hacks for the rest of us to use to control the look and feel of our blogs.

The blogger developer forum is another very handy place too.

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?