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.

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 your 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

Adding tooltips (hover text) to Blogger posts

This article is about putting a "tooltip" (text that is shown when you hover over) into an URL in a Blogger post.

What are tooltips?

Tooltips are a feature found in many websites and GUI-based tools:  when a viewer hovers their mouse over an item, a small piece of text is shown which explains the item.
You can see them in Blogger's Post Editor when you put your mouse over an item in the toolbar.

But tool-tips can be used on other things too, including pictures and text: put your mouse over This Text to see one.

They can be particularly useful if you want to provide a translation for a few words from another language, or a definition for technical terms, but don't have enough to make a glossary worthwhile.

How to add a tool-tip in Blogger

Open the Post (etc) that you are working on.
1  Create the item that you want the tool-tip to be on (it may be text or a picture).
2  Select the item, and use the Link button on the toolbar to set up a link for it.  (Do this even if you don't want it to end up linked to anything - you can remove the link part alter on.)
3  Go into Edit HTML mode (top right side of the editor toolbar), and find the HTML for the item.  

Hint:  use the find feature in your brower - it may be helpful to temporarily put some marker text, eg XXX, just before and after the item.

The HTML for the item will have this sort of structure:

<a href="Your Link" > Your item text ... </a>

or it may be like this if your item is a picture:

<img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" />

or even like this if it's a picture that's linked:

<a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a>

4  Add  title="YOUR HOVER TEXT" to the HTML, so it becomes something like:

<a href="Your Link" title="YOUR HOVER TEXT" > Your item text ... </a>

or, if the item is a picture:

<a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" </a>

5  (optional)  If you don't want the item to be linked, remove the href="Your Link"
statement, so the HTML becomes similar to:

<a title="YOUR HOVER TEXT" > Your item text ... </a>

or, if the item is a picture:

< img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" />

6  Return to Compose mode (top right of the Post Editor window), so that you aren't faced with HTML the next time you edit a post.


Formatting unlinked text that has tooltips.

If you put hover-text on words that aren't linked to anything, it's good to give them a different format so that readers know to mouse-over them to see the hover-text.    For example

When you visit Ireland, you will undoubtedly experience rain, ceol and great craic.

To do this:

1   Add this CSS rule to your blog's template  (See Adding a new CSS rule to your template if you need help with this):

.toolTippedText {
   border-bottom: 1px dotted red;
}

2   While editing your Post (etc) to add the hover-text, also add this class statement

class="toolTippedText" 

to every URL which has title="YOUR HOVER TEXT" added to it.  So the full statements become

<a href="Your Link" title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>

or, if you don't want the text to actually be linked to anything:

<a title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>

It probably doesn't make sense to add a font-decoration like this to tool-tipped images - though it can be done in exactly the same way.

If you don't like using red dots as the way to highlight text that has hover-text, there are other rules you can add to your template.  For example to get a solid underline in the same colour as the text font, use:

.toolTippedText {

 text-decoration:underline;

}

---

Related Articles: 



Adding a new CSS rule to your template.

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 (Edit 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 label 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 other 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".