Showing a Google Custom-Map on your Blog

This article is about embedding custom maps made with Google maps into blogs made with Blogger.  However similar principles also apply to putting Google custom maps into other types of website.

Overview:

Previously I've described how to make a custom-map in Google Maps.

Not only does this add a visual dimension to your blog, it can also be an excellent way of showing your progress on a journey, or describing your neighbourhood or the area that you blog about.

That said, you should also use the Location tags in posts, so that the posts themselves as well as the map shows your status.

If you are using Google custom maps, then once you have created a map, you can:

• Email a link to the map to other people:  when they click on the link, their web-browser opens Google Maps, and shows them them map

• Put a link to the map on a website:  when a viewer click on the link, their web-browser opens  Google Maps and show them them map

• Embed the map into a website:  when the web-page loads, the map (including zoom-tools, scrolling, etc) is displayed.

How to to link or embed a Google custom map:

Log in to Google maps using the Google account that you used to create the map.

Make a new map, or click "My Places" to see the list of maps you have made.

Select the map you want to link to.

Click the "Link" item:  it's at the top of the left-hand sidebar, beside the print icon.

A new panel opens just underneath the Link button.:

If you want to share the map by email, or by linking to it on a website, then copy the code from the top entry in the panel, which is labelled "Paste link in email or IM".

However if you want to put the map itself into your blog, then DON'T just copy the code from the item labelled "Paste HTML to embed in website".

Instead, click Customize and preview embedded map.

This opens the map in a new window, where you can preview the actual zoom-level that will be used, and also pick a standard map size of a custom one.

Choose the settings that you want - including scrolling up and down slightly, so that the correct area is shown.

Copy the HTML from the window at bottom of the screen.  (Make sure you select ALL the code that's in the box: on many systems with happens if you put the cursor in the box and press Ctrl/A)

Put the copied HTML into your blog -  you have several options for doing this.

---

Related Articles: 



Making a custom-map in Google Maps

Putting 3rd party HTML into your blog

Copyright, Blogs and Bloggers

Removing the attribtion gadget by commenting out the code

This article documents removing the attribution gadget from Blogger by commenting out the code for the widget.  This method no longer works (last tested 20 Sept 2010 - the gadget is automatically re-added to the bottom of the sidebar), but the technique may be useful in future.   

See the main article about removing the attribution gadget from blogs with Designer templates for background information about the topic, and for the most recent information about techniques that work.

WARNING:

---

I have not checked the Blogger Terms and Conditions to find out whether you are allowed to remove the Attribution.   Even if they don't mention it today, a requirement to keep the statement could be added tomorrow.   This advice does not mean that I, or Google/Blogger, are saying that you should/can/may/must remove the attribution statement.

---

How to remove the Attribution Gadget by commenting out the code:

Edit your template in the normal way, and tick the Expand Widgets box, so you can see all the code

Find this section in the template:

      <!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution2' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
        <data:attribution/>
      </b:if>
    </div>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>

Note that Attribution2  may be a different value (eg Attribution1 or Attribution3) depending on how many times you've tried to remove it in the past - searching for  "type='Attribution'" is probably the easiest way to find the block of code.


Comment-out the code that displays the Attribution gadget, by putting it inside these characters  <!--   -->    so it ends up looking like this

      <!-- outside of the include in order to lock Attribution widget -->
<!--
<b:section class='foot' id='footer-3' showaddelement='no'> <b:widget id='Attribution2' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
        <data:attribution/>
      </b:if>
    </div>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>

-->

Preview the template change, to check that everything is ok.  If not, fix the problem

Click Save Template

As the template tries to save, you may get a warning message:

Warning: Your new template does not include the following widgets:

• Attribution3

Would you like to keep these widgets on your blog or delete them?
Deleting widgets cannot be undone.

(Yours might say Attribution1, or 2 or 4 ... depending on how many other approaches you've tried to remove it    )

If you get the message, then click Keep Widgets:  This will leave an attribution Gadget in the set of Widgets that your blog has data about, even though it's not actually showing it on the screen.  (Ref:  Components in your Blog)


If you want, add an an alternative attribution gadget.

---

Related Articles

Removing the attribution gadget from your blog - current information

How to edit a blogger template

Making a custom attribution gadget for your blog

Types of templates in Blogger.

Template Designer now live in Blogger.

How the data in your Blogger blog is organised

Centering the Post title (or Page title) in your Blog

This article is about how to centre-align the title that is shown for all Posts and Pages in blogs made with Blogger.

Center/Centre alignment

Blogger's template designer lets you choose the colour and font-size of the Post title.  This is true even for most Layout templates (ref:  What type of template does my blog have?) though some don't have an option to edit the post-header.

However it doesn't, yet, have an option to change the alignment, ie whether the title is flush with the left or right side, or in the centre.

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

To centre-align the post title, simply add this rule to the CSS section of your blog's layout template:

h3.post-title{
  text-align: center;
}

See Adding a new formatting rule to your template if you need help with editing your template to add the rule.

Right alignment?

Making the post or page title header right aligned is just as easy:  add this rule instead:

h3.post-title{
  text-align: right;
}

---

Related Articles

Adding a new formatting rule to your template

What type of template does my blog have?

Advantages and disadvantages of editing your blog's layout template

Changing colors in your blog

Blogger's "static" Pages are more trouble than they're worth

Blogger's "static" or stand-alone pages have some benefits - but also a number of disadvantages.   Use them sparingly!

Overview:

Previously I've described the Pages feature that Blogger introduced in February 2010, and the differences between Pages and Posts.

There are times when stand-alone Pages are a handy feature.

But overall I've decided that the disadvantages are a lot greater than the advantages.  From now on, any blogs that I work on will get horizontal menu bars made from Link-list gadget, or perhaps just menus made with HTML, and the vast majority of content will go into Posts not Pages.

Here's why.

The Page title is the Menu-bar value

When you create a page (Dashboard > Pages > New Page), you can

• Give it a title, 
• Write the content, 
• Allow viewer comments or not
• Handle <br />'s (or not)
• Say whether any HTML in the page is interpreted (ie used to control the display), or displayed (the code vales, not their effects, are always shown).

Blogger has standard rules for how the items that you enter are turned into HTML.  In particular, the Page-title (and Post-title too) is given a H3 (header three) tag.   And this particular tag is very important to the search-engines, so bloggers who care about whether the search-engines find their blog or not pay quite a bit of attention to the words in the title.

The problem is that the Page title is also the value that's put on the menu bar if you are giving access to your Pages with the Pages-gadget (and most people are):

That's ok, if you use only a short-ish titles.

The HTML behind the Pages gadget used an un-ordered list:  this it what lets it display horizontally if it's in the header, and vertically if it's in the sidebar.   But when it's horizontal, if the values are longer than one line then it simply spills onto the next line.   This can happen if a viewer had a low screen resolution - or if you've used lots of search-engine friendly key-words in the Page-titles:

And there's the crux of the problem:  since the Page-title is the H3 header, it needs to be long and descriptive to give the search engines a good chance of finding your page.  But make it long, and the Pages gadget looks awful, and is confusing for viewers.

Of course I could use Pages, and build a menu-bar to access them using a linked-list gadget (or even just HTML for a table).  But if I'm doing that, it's just as easy to make the menu-bar "items" out of Posts as it is from Pages - and using Posts avoids the disadvantages which Pages have (eg not included in the RSS feed, no Labels, etc).

Other problems:

There are some other problems with Pages, including:

An unclear name:   

Blogger decided to call the feature that they introduced "Pages".  Most help-article writers outside of Google used the phrase "static pages", to make a clear distinction between these new "pages" and the existing main page, layout-page, archive-page (not to mention the way that "page" refers to a screen in most websites).  But there are still dozens, maybe hundreds, of official help articles from Google, and unofficial ones from the rest of us, that refer to "Pages" in the older screen-full-of-text sense.

User confusion:

New Blogger users see Pages, and assume that it's possible to put blog-posts onto the individual pages, just like you can put content into pages in other websites.   Some spend a lot of time looking for ways to do this - time which IMHO would be better spent just adapting to Blogger's way of working, or moving to another tool that has native support for classical web-pages if that's what they really need.

RSS Feed:

Pages aren't included in a blog's RSS feed - a new page is not notified to Followers or feed-subscribers.

Backups:

When the feature was first introduced, Pages weren't included in exported blog-content files.  So the only way to back them up, or even transfer them to another blog, was to manually copy the contents.   (This feels like the sort of thing that Google might quietly fix - I haven't tested to see if they have or not.)

No labels or date:

Static-pages don't have Labels or dates, so there's no way for them to be included in the display shown on Archive or Label pages. This also confuses some readers.  It also means that a Page can never be used as the target page for any of the standard tricks that can be used to give your blog a "home page".

Conclusion:

None of the individual problems were enough to make me stop using Pages.

But the combined effect of the SEO / header-display problem and all the other issues means that I now believe that

"Static-pages are trouble than they're worth."

I'll still use the page-gadget area in designer templates to make my own horizontal menu bar, because I rather like the way that linked lists are formatted in most of the templates.  I might even make it look like I've put posts into pages using this menu.   And I'll happily use Pages to display the results of Google Custom Searches (since there's no need for these to be fed, backed-up etc)

But I won't be pointing to any new stand-alone pages made with the Posting > Edit Pages menu.

---

Related Articles:

Blogger's Static-Pages feature

Putting Posts into your Pages

Google Custom Searches - putting one into your blog

The differences between Pages and Posts

Blogs, Blogger and bloggers; Post, Pages and Screens:  some basic definitions

Giving your blog a "home page".

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