Displaying a gadget only on static pages - or on everything except static pages

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the "static" pages in your blog.

In Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing - basically a bit of code that can be put into your blog without looking like code, and which does a specific thing.

I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.

Making a gadget that only shows on static pages:

1   Make the gadget

Do this in the usual way.

2   Drag-and-drop the gadget to the place where you want it

A popular place for a gadget that is going to look like a "home page" is in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:

3   Find the Gadget-ID in the usual way.

4    Find the code for your gadget and edit the template:

Edit your template  in the usual way.

Look for the widget name that you noted in step 3.  Notice what comes after it.   In this example, it's the line for Blog1:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Use the arrow at the left-hand-side of that line to expand the code for that gadget.    Now it looks a bit longer (the exact details depend on what type of widget/gadget it is.), like this:

  <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

5   Add conditional formatting:

You need to put conditional formatting code around the code for the gadget - making sure that it doesn't go around the code for anything else.

The code to use to put a gadget only on a static page is:

<b:if cond='data:blog.pageType == "static_page"'>

THE CODE FOR YOUR GADGET GOES IN HERE

</b:if>

The example above looks like this, when the code has been added:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <b:if cond='data:blog.pageType == "static_page"'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

ALTERNATIVES:

To stop a space being left for the gadget on other pages, change the 2nd code-block you add to:

<b:else/><style type='text/css'>#XXXX {display:none;}/*remove blank space that the gadget leaves*/</style></b:if>

instead of just    </b:if>

To make the gadget appear on every page except static pages, use

<b:if cond='data:blog.pageType != "static_page"'>

THE CODE FOR YOUR GADGET GOES IN HERE

</b:if>

Notice the slight difference:    !=     instead of   ==

And of course there are various other conditions that you can use to control whether gadgets appear on certain pages, too.     For example, the home page.

NOTE:  
Copy and paste is the best way to transfer the code.  If you must type it in yourself, be very careful about what's a single quote mark and what's a double quote mark.

6    Check that it's worked

Preview your blog before you save the changes:  check that the the widget is visible.

Save the template changes, and look at your blog.  Check that

• The widget is, or is not, on static pages (depending on what option you chose)
• The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

---

Related Articles

Static Pages in Blogger

Controlling what goes on the homepage

Showing a gadget only on the home-page.

How to add a gadget using Blogger

How to edit your blog's layout template

Adding a Tweet button to your Blog

This article is about Twitter's tweet-this button, and how you can use it to let your readers tweet your posts.  

It's aimed at Google Blogger users, but most of it applies to other blogging (eg Wordpress, TypePad, etc) and website tools.

Background

Often bloggers want to give readers a tool to share the blog-post that they are reading via Twitter, on the readers own Twitter account.   I call this way of linking your blog to the social networking sites "Look what s/he said" (ref:  Linking your Blog and the Social Networks).

Your readers could just copy-and-paste a hyperlink to your page, but it's clunky:  they have to start up Twitter, themselves, and some won't know that Twitter automatically shortens links.

There are various 3rd-party widgets to put a "twitter-ish" icon on your blog, set up so that when a reader clicks it, the current page it is automatically tweeted.   But I've explained before why I don't like third party gadgets for Facebook, from both a security and maintainability point-of-view, and the same reasons apply to Twitter.

Google have social-media buttons which can be shown at the bottom of each post.   They're an improvement on the 3rd party gadgets, but I don't like the way they look, and the lack of options to customize them, so I usually turn off.

A better approach: Twitter's official Tweet button
Twitter now offer a share button on their resources page.   (You don't need to be logged in to twitter - or even have a Twitter account yourself - to use it.)

This lets you customise the layout and (optionally) suggest two Twitter accounts that your readers might like to follow in future.   You install HTML code provided anywhere in your blog (etc).

You can see an example of this gadget at the top and bottom of this article, in my custom social sharing bar.


Follow these steps install a Tweet button on your Blog as a gadget:

1  Go to the Twitter resources page.
(You don't have to be logged in to Twitter to do this - in fact, you don't even have to have a Twitter account.)

2  Select Tweet Button

3  Set the options you want.  Currently there are separate (horiztontal) tabs for

• Counter: none, horizontal or vertical.

• Tweet-text:  either the title of the page the gadget is on (by default) or some other text that you enter.

• URL:  The page that the button is on, or some other URL that you enter.
  Important:  If you want readers to tweet about individual posts, not your whole blog, then put some text that you will find and change later (eg FIX-UP-URL) here.    See the section below about Twittering Posts vs your Whole Blog for more information about this.  

• Language:  the language that the button is in on your website

4  Recommend people (Twitter accounts) to follow - if you enter a Twitter account here, then it will be suggested to readers who click on your gadget.  You can suggest up to two accounts.   If you are logged in to Twitter when you make this gadget, then your account will be automatically filled in here, but you can change it.

5  Preview your button  (don't click anything, just check it out in the bottom left of the window - notice that it tells you the size, in pixels, of the button you've selected)

6  Copy the HTML from the box.

7  Go to Blogger, and add the HTML to your blog, using one of the standard options for adding externally-sourced HTML to your blog.  

Except - if  you chosen the post-specific-URL option in step 3,  you must

Change:    data-url='FIX-UP-URL'      to     expr:data-url='data:post.url'

and make sure you add the code to a post-specific place in your blog.

8  Save the change and the view your blog.   Test the new gadget (does it look right, does the right thing happen when you click it).


Twittering a post vs your whole blog:

If you put a Tweet button into your own blog as a gadget, then what is shared is your whole blog, not the particular Post that is being read.   

For example   http://blogger-hints-and-tips.blogspot.com   (this blog)

instead of      http://blogger-hints-and-tips.blogspot.com/2010/04/tools-for-linking-blogger-and-social.html  (a post)

But if you want your readers to tweet individual posts, you need the Tweet-button to appear with EVERY post.  This is because some screens show multiple Posts, and unless the button is linked to a specific post it doesn't have a specific URL to share.   Unfortunately it's true even if you have your blog set up so that only one Post shows at a time.   It is a bit harder than adding it as a gadget, because you need to edit your template and put the code into a post specific location.   This article explains the options for locations that are inside posts, and where to put the code.

What your readers see


When a reader clicks the NUMBER in your Tweet gadget:

They are taken to a screen showing the results of searching for your post/blog in Twitter:  if other people have Tweeted the same post, they will be able to see who tweeted it, and what replies were generated.

When a reader clicks the BUTTON in your Tweet gadget:

They'll be asked to log in to Twitter, unless they're already logged in.

Then they see a window where they can

• see the shortened link and text that they're going to be sharing, and
• change it, and 
• choose whether to follow the recommended Twitter account(s)
  
  

The shortened link is to either the page that they were viewing when they clicked the button, or another URL (if you chose Custom URL when you were setting up the gadget).  The text is the title of the post, or some other text if you entered some when you were settin gup the gadget.

Both the text and the shortened-URL can be changed by the reader before they share the Tweet.

---

Related Articles:



Linking your Blog and the Social Networks

Why I don't like third party gadgets for Facebook

Options for putting third-party HTML into your blog

Putting a Share this on WHATEVER button into Blogger - includes info re post-specific locations

Planning changes to your blog - in private

This article is about how to make major changes to your blog with a minimum of disruption for your readers.

If you are making big changes to your blog (eg switching to a Designer template), then there is likely be to a time-period when your blog looks strange:  some of the changes will be done, some won't, and maybe some key features won't look right.

Many people look for a way to re-direct their blog or to display a temporary vacation-notice ("closed for maintenance, come back soon") while they make the changes.

However the only option that Blogger has is making the entire blog private (Settings > Permissions > Blog-authors-only).   This isn't really suitable, though, because it just shows prospective readers a standard message saying that the blog cannot be accessed, without explaining why.  It may even harm your blog's reputation, if someone influential happens to look at it just at the wrong moment.

Since there is no other work around (except for blogs with a custom-domain - see the last section of this post), Blogger administrators have to plan their changes carefully, and put them in place quickly.

Plan carefully, and make the changes quickly

If you blog has a .blogspot URL, or if you don't like the alternative suggested below, then the only option is to plan your changes very thoroughly so you can minimise the time that your blog is in transition.

The first step in planning is to make a private testing blog that's like the real blog (except perhaps it only has 2-3 dummy posts instead of your real conent).

Work out exactly what changes you need to make, and the exactly details of how to make them.   Use the test blog, not your real one, to do all your research, experiments etc.

Keep a list

So you know exactly what changes need to be made.
When I did this recently, I used Excel because I'd used it to find the difference between two template files.  But there are many other suitable tools, ranging from the back of an envelope on your desk to a draft post in your blog, or even a full-blown change management system.

Prioritize

Sort the list so that the changes that must happen first are at the top,and the things that aren't so important are at the bottom.

What's important to you may be different from what's important to your readers:  when I did changes to my local site, re-installing Google Analytics was the first thing to do after changing the template, because collecting statistics is very important to ME.   But if I'd been totally reader-focussed, I'd have done things last, and done all the things that readers see first.

Combine things:

Consider whether some items on the list can be done at almost the same time

Eg if you need to customise the template for several items on the list (eg center the heading, hide the navBar), and all the customisation can be done by entering new CSS rules then these can all be done at the same time.

(These two steps may give conflicting results:  but if you prioritise first you'll be able to make good decisions about what's most important.)

Choose a time of day

Choose the best time to make the changes.  This could be when your blog has a relatively low number of visitors, or you may use some other criteria.

For a blog that's used by people in my city, I chose 12-midnight when very few people are interested in the topic.  But for Blogger-hints-and-tips I chose 9am (local-time for me is Western European time) because most readers are 4-8 hours behind my time zone.

Warn your readers

Some people recommend making a temporary post telling readers that you're making changes and apologising for things looking strange.   There are cases when this would be a good idea, but overall I'm not convinced:  most of your readers probably won't visit while you're making the changes - except that a post like this going out on your RSS feed might just encourage them to visit now to see the new look.    And readers who get to your blog via search and go straight to an older post may not see the post anyway.

Do the changes, quickly

Work fast, but be careful and methodical too:  work through your list, and tick off items as you go.  If you have an brilliant ideas about what else you could do, resist them at least until you've got your core blog features working correctly with the new look.

An alternative for custom-domain blogs

If your blog is published to a custom domain, you could:

• Prepare a temporary "come back tomorrow" message using another tool (eg Google Sites - or even just another blog with only one post)

• Switch your main blog back to published on Blog*Spot
  (Setting > Publishing > Switch to Blog*spot)

• Re-direct your temporary message (site/blog etc) to use the custom domain

• Do the changes to your blog

• Undo the redirect for your temporary message

• Re-publish your blog to the custom domai

Of course this won't work for people who navigate directly to one of your posts instead of going to the blog and itself (eg to http://blogger-hints-and-tips.blogspot.com/2010/07/coverting-ms-word-documents-to-blogger.html instead of http://blogger-hints-and-tips.blogspot.com/) - if you get a lot of visitors from Search, then they probably enter your blog this way.

Also, if things go wrong during the re-direct processes it could take a bit longer than you planned to resolve the registry entry problems.   (Things don't usually go wrong, but it may not be worth the risk.)

---

Related Articles

Switching your blog to use a new Designer template

Making a private blog for testing template changes

Comparing two template files, using Excel

Showing image-only AdSense ads in your blog

This article is about how to show image-only AdSense ads in your blog.

It's easy to Set up AdSense on your Blog.

And Once you've been approved, it's easy to put AdSense ads into your blog:  just add them in the same way you would add any other gadget from Blogger.

But the advertisement format options that Blogger provides for are limited: you can only choose either text-only or image-and-text ads.  There is (currently) no option for image-only ads.

To guarantee that your blog displays image ads only, you need to get the ad-code from AdSense, and put it into an HTML-Javascript gadget or inside a Post (or Page), or into your template.

How to display image only AdSense ads:

1    Log into AdSense with the Google-account that you use to manage your ads.   (There may be some cases where this is not the same Google account that you use to manage the blog where the ad is displayed)


2    Go into the AdSense Setup > My Ads tab.


3     Click New Ad unit, or edit an existing ad unit if you want to re-use an existing one.


4     Configure your ad:

Work through the items in the wizard to (I like to choose single-page, so everything is visible at once).   If you've chosen the Ad Unit radio button, then beside it there is a drop-down that lets you choose:

• Text-and-image, 
• Text-only, 
• Image-only.

5  At then end of the wizard, you are shown some HTML code.    Copy and paste that code.


6  Go to Blogger (with the account you use for the blog), and add it in the same way you would add any other 3rd party HTML  (either in a gadget, the template, or even inside a post).

Making ads between posts image-only

The method above does not work for ads that are shown between posts, using the "show ads between posts" option in the Blog Post gadget editor.

To do this, you would need to edit the design-template.  Instructions for this will vary depending on what template you have, and are beyond the scope of this article.   But you can put a gadget at the bottom of all the blog-posts that are shown on a screen - just make the gadget the usual way, and drag it to underneath the Blog Posts gadget

---

Related Articles:

Putting AdSense ads inside Blogger posts

Blocking categories of AdSense ads from your Blog

Stop malicious use of your AdSense account ID

Setting up AdSense on your Blog

Changing the case of your Label values

This article is about how to change the case of the Labels in your blog.  For example, from lower to initial case ("cats" to "Cats") or even all capital-letters ("CATS").

When some people start using Blogger, they apply labels to posts without much thought:  they just type "cats" into the label field, and don't consider how it will look later on.   Even worse, they type in "Dogs" for the next post and "FROGS" later on.

This gives an untidy, unprofessional-looking labels gadget.

And it's a bit hard to fix:  you can change the labels on individual posts, but if even one other post has "cats" as a label, it doesn't matter how many times you add "Cats" to new posts the label will always be recorded as "cats".

The only approach I've found is to apply a unique temporary label to all posts with the value you want to change, then to delete the initial label and use the temporary label to select the posts to apply the correctly-formatted value to.

How to change the case of existing Labels

Log in to Blogger, and go to the Posts > All tab.

Display all the posts with the label you want to change (eg "fred"), by choosing the value from teh drop-down list near the top right of the screen.

Select the posts by clicking the checkbox above the first column in the list of posts.

Use the Labels drop-down menu (the one with a picture of a luggage-label on it, just above the list of posts) to:

• Give them a new temporary label that's not already in use (eg "xxx-temp") - when you have done this, they will all have at least two labels.

• Remove the label that you want to change

• Select all the posts with the temporary label

• Give them the label that you want to change to (eg "Fred")

• Remove the temporary label that you added in the 2nd step.

Warning

Blogger blogs have a maximum of 5000 labels.   Some problems that have been raised in the Blogger-Help-Forum make me think that this is a life-time limit, and that a label is still included even if no current posts have it, though I haven't tested this personally.  I suspect that applying the procedure above will use up to three labels:  the original, the temporary one and the new one.   You may not want to use it if you think that your blog might ever reach the limit.

---

Related Articles

Using Labels to Categorise your Blogger Posts

Posts, Pages and Navigation.

Understanding the email address that is shown in your blog

This article explains what email address(es) are shown when someone is reading your blog - and why you don't have to worry if you see your own address even if you didn't ass it..

Many people who are new to Blogger get upset because when they look at their blog, they see their email address near the top right hand corner. 

Reasonably enough, they assume that is they can see it, so can other people.   And so they start looking for instructions about how to remove the email address from their blog.   Or they notice that some other blogs don't have email addresses showing, and start looking for ways to make their blog the same, sometimes with far-reaching consequences.

However there's one important piece of information that they've missed:

The email address that may be shown near the top right hand corner of a blog belongs to the person who is reading the blog, not the person who wrote it.
This means that it's simple to remove the email address from the top of your blog:  just click the Sign-out link.

Details:

Some blogs never show any email addresses, because they have hidden the navBar.   This is either deliberate, or because the are using 3rd party templates that simply don't include it.

But when you are viewing a blog (yours or someone else's) that is showing a navbar, and you are logged into a Google account, then your email address is shown near the top right hand corner of the screen.

In this example, I'm viewing someone else's blog, and my email address is shown (even thought it's quite hard to see because the background picture is noisy and the navBar has been set to be transparent).

In the same way, if one of your readers is looking at your blog, and they are logged in to a Google account, then their own address shows near the top right hand side of the screen.

My email address?

There is one small point that I've glossed over here.

When an "email address" is shown in the navBar, it's actually the name of the Google account that is currently signed in.  For many people, this is the same as their own email address, but some people have different email addresses.   And some now sign-in to Google with old "addresses" that have long-since stopped working for email:  this is fine provided they remember their password, and have updated the primary address that is updated with their account so that Google know where to find them.

---

Related Articles:

How to show an email address in your blog.

Understanding Google Accounts

Finding the address for blog's RSS feed - even if the owner has hidden it

This article is about how to find the subscription-address for any blog's RSS feed, whether or not the blogger has provided a subscribe button.
 

Blogger blogs and RSS feeds:

Every blog created in Blogger is originally set up to produce an RSS feed.

Some blogs don't actually produce a feed any longer:

• Bloggers can choose to turn their feed off (Settings > Site Feeds > Allow Blog Feeds = None), 
• Blogs that are changed to not public have their feed automagically turned off, because it's not possible to apply Blogger's security rules to control access to a feed.

But provided the blog is still producing an RSS feed, it is still possible to find the feed address even if the blogger has not provided an icon for it on his/her site.

Finding the RSS-feed address for a Blog

Option 1: Use the Subscribe to Posts (atom) link

Every Blogger template produced by Google (or at least every one that I've seen) has a Subscribe to Posts (Atom) link at the bottom of the screen.

The easiest way to get the blog's (atom) RSS feed address is to right-click on this link and copy the link-location.

But some blog-authors have removed the Subscribe to Post link

• accidentally, or 
• because they're in the process of replacing it with a "proper" chicklet
• because they don't want people to read their feed - possibly because they've realised that for each Post, the feed contains the first version of it that they publish, not any updates that they've made since - and don't know about the proper option to disable it.

and in these cases you need to use another option.

Option 2: Use the RSS icon or feedcounter icon that the blogger has provided

If the blogger has added either an RSS icon, or Feedburner's feedcount gadget, then you can right-click on them and copy the link-location.   Or just click on them, and most probably the feed will be opened in your favourite feed-reader software.

Option 3: Work it out from the blog's source-code

Even if the blog-owner hasn't given you any way to subscribe to their feed, you can still work out the feed-address by looking at the instructions that are used to show the blog in your web-browser:

1  View the blog in your browser.

2  Choose to view the page-source.   The command to do this is different in each browser:  in Firefox it's  View > Page Source.

This opens a text-file which shows the code that was used to draw the web-page you were looking at.

3  Search for "RSS" in the text file.  
Hint:  use the browser's seach command (Edit > Find in Firefox).

4  Examine the code:  If there is a feed coming form the blog, you will see the URL's of the feed in atom and RSS format, like this:

<link rel="alternate" type="application/atom+xml"
        title="Blogger-Hints-and-Tips - Atom" 
          href="http://blogger-hints-and-tips.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" 
        title="Blogger-Hints-and-Tips - RSS" 
          href="http://blogger-hints-and-tips.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" 
        title="Blogger-Hints-and-Tips - Atom" 
          href="http://www.blogger.com/feeds/5681944372768269659/posts/default" />

The URLs are the text inside the quote-marks after each of the "href=" statements - shown in the example as links.

Note:  I've put in line-breaks so you can read this code, but in the source file there will only be three - long - lines used.

5  Choose which one you want to use.    (Atom or RSS - I think RSS is more universally accepted, but Atom will be fine for any Google situations.)

You can copy-and-paste one of these, and use it to subscribe to the blog.   Which one to use, and how/where to use it depends on where you want to put the subscription.

For example, I've just done this to subscribe to a blog in Google reader:

• I chose the URL which is equivalent to the one that's highlighted in the example above
• In Google-Reader, I choose Add a subscription, and pasted in the URL

---

Related Articles: 

Removing the Subscribe to Post (Atom) link.

Putting an RSS feed icon (chicklet) onto your blog

Adding Feedburner's count gadget to your site

Why RSS is important for your blog

Restricting your blog's readership isn't as secure as you thought

Feedburner and the follow-by-email gadget