Showing posts with label YY - needs Sept11 review. Show all posts

Friday, October 29, 2010

Understanding Google Accounts

This article is about Google accounts: what they are- and aren't, how to access them, and what the account-names look like. This supports another article about the relationship between Google accounts and Google-Apps accounts.

Blogger accounts vs Google accounts

Once upon a time (pre 2006), there was a tool on the internet called Blogger.   People created accounts on Blogger, and then used them to make a blog that was owned by their Blogger account.

Then Google (the company that made the search engine) purchased Blogger.   They wanted to integrate their products, so Blogger users had to change their original Blogger accounts to "Google accounts". (Google were pretty nice about this: they kept support old, unconverted Blogger accounts up til 2011, but have recently said that this will stop soon.)

At the time, very few people understood the difference between Google-the-company and Google-the-search-engine, so most didn't have any idea of the power and importance of these "Google accounts".   However as the other applications available through our Google accounts grew (Gmail, Picasa-web-albums, Google-custom-maps, AdSense, AdWords, etc), this has become clearer.

Getting a Google account

To make a new Google account, you just have to sign-up for any one of the products that Google offers (Gmail, Blogger, AdSense, etc).

The sign-up screen asks you to enter an email address, and says that it "(must already exist)". But it does not check that the email-account does actually exist.

If the product that you sign up with is Gmail (which is where Google accounts started, I think), then it makes sense that the account name is the email address.

However Google (or perhaps even Blogger: I don't remember) decided that people would use a text-string that looks like an email address as their Google-account name - even if the email address isn't a Gmail one, and even if there is no valid email account with that address

This means there are Google accounts called Joe.blogs@yahoo.com, and similar. There are even Google accounts with a name that is not, and never has been, a real email address. This has caused lots of confusion and problems:

If the email address isn't a gmail one, then changing the password of the email doesn't change the password of the Google account

Some people don't understand that their Google account name is just a set of letters: they don't realise that they can change the email address attached to their account without changing the underlying account (Dashboard > Edit Profile, identity tab).

Some people lost access to the email address (eg because they leave their job, or use a free service and didn't log on for 30 or 60 or however-many day).

Some people never had access to the email address, because they used a text-string that wasn't actually an address, and Google never checked if non-Gmail addresses actually worked.

In these cases, problems happened when that email address was the only tool that the person used to identify their Google accounts. If it's not real, or they can't access it any more, then Google can't help when they forget their passwords,etc. So there are some blogs that can never be accessed ever again, because Google has no way of being sure who owns the Google-account that made them.

Google Apps accounts

This article was written in October 2010, to support information about resolving conflicting Google and Google Apps accounts.

It is replaced by Google Apps, Google Accounts and Blogger, which describes the situation now that the conflicting accounts have resolved and all Google Accounts have transitioned to Google's new infrastructure.

Friday, September 17, 2010

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;
}

Thursday, September 16, 2010

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.

Monday, September 13, 2010

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.

Friday, August 27, 2010

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.

Note: 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, using Design > Page Elements > Add a gagdet.

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 Edit the Gadget again

Don't make any changes to it - just maximise the window, so you can see the WidgetID, which is at the very end of the address bar at the top.

Make a note of the value. (In this example, it's Text1).

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

Edit your template (Design > Edit HTML)

Download a copy of the template, and put it somewhere safe.

Use your browser's text search tool (Edit / Find in Firefox) to 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'/>

Click the Expand Widget Templates checkbox (so it's turned on)

After the expanded template has downloaded, find the widget name again. This time it will look a bit longer (the exact details depend on what type of widget/gadget it is.)

<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:title != ""'>
<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 - makings sure that it doesn't go around the code for anything else! (which is why you noted what comes afterwards in step 4)

The code to use 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"'> 
<b:if cond='data:title != ""'>
    <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'>

ALTERNATIVE:
If you want the gadget to appear on every page except static pages, use is

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

THE CODE FOR YOUR GADGET GOES IN HERE

</b:if>

See the slight difference: != instead of ==

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.

If anything is wrong with how your blog is working, go back to the template editor (Design > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1. This will let your blog work properly, while you figure out what went wrong.

Saturday, July 31, 2010

Showing image-only AdSense ads in your blog

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

Blogger and AdSense

It's easy to Set up AdSense on your Blog: Just go to Monetize > AdSense - and then follow the prompts to apply for an account.

Once you've been approved, it's easy to put AdSense ads into your blog:

Design > Page Elements > Add a Gadget > Adsense - for ads in your sidebar, header, footer etc
Design > Page Elements > Blog Posts (edit) - for ads in between posts

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)

How to display image only 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 > Get Ads tab.

3 Choose AdSense for Content

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).

7 Place the ad:

If it's going in a gadget, Choose Design > Page Layout > Add a Gadget > HTML-Javascript and paste the copied code into the Contents field. Save the new gadget, and drag-and-drop it to wherever you want

If it's going in a post, see putting AdSense ads inside Blogger posts

To request image-only for the ads that are shown at the bottom of individual posts (via Design > Page Layout > Blog Posts/edit), 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

Sunday, July 25, 2010

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").

Why change case?

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 Posting > Edit Posts tab.

Select all the posts with the label you want to change (eg "fred"), by clicking on this Label in the left-hand panel, and then clicking Select All.

Use the Label Action... drop-down menu (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.

Thursday, July 8, 2010

Zemanta and your Blog: how to add and remove it

This article is about Zemanta and your blog: what it is, how to add it, and how to delete it.

Overview

In June 2009, Google announced Zemanta - a tool for "blogging smarter", which had to be downloaded and installed into your browser. More recently, they announced a closer integration between Google and Zemanata: there is now a Google-hosted page where you you can choose to install Zemanta with pretty much a single click.

Zemanata is basically an assistant that sits inside Blogger while you're writing, and makes suggestions about related things (pictures, articles etc) that you might like to link to. It's fine in theory (although I'd prefer to control my own research process, and take responsibility myself for meeting copyright conditions), however I found real performance issues when I tried to use it - which is why I went looking for the removal instructions! Some people at Blogger clearly like it though, so it must have some advantages.

It's possible that there will be some more Zemanta integration coming: eg options inside Blogger for enabling and disabling it and setting the user-options/preferences. But in the meantime the basic information about adding it to a blog, and removing it too, is presented here.

How to add Zemanta to your Blog

To turn Zemanta on for your blog:

Log into Blogger with a Google account that has admin-rights on the blog which you want to use Zemanta with
Click here to add the Zemanta gadget

In the window that opens, choose the Blog from the drop-down list

Click the orange "Add Zemanta" arrow.

Immediately after clicking the arrow, you are taken to the Post Editor with a new post for the blog that you selected. There is an extra gadget showing on the right hand side of the editing window. This gadget will be on the screen every time that you edit a post.

It's not currently available in the Page editor - but if you really want to use it while writing a Page, then just write the contents in a Post, save it as draft (ie don't publish), and use the HTML copy/paste approach described in Moving a Post from one Blog to Another.

How to remove Zemanta from your Blog

Log into Blogger with a Google account that has admin-rights on the blog which you want to remove Zemanta from
Open the Post Editor (eg by clicking New Post).

In the top row of the Zemanta gadget, at the right hand side, there's a small down arrow. Click the arrow and choose "Remove this gadget".

Click Ok.

Some people reported that removing it from Chrome was different: they said that there you would not see the small drop-down arrow, but instead need to look in the browser's address bar and use the Zemanta icon on the right hand side, which has an option to isable Zemanta for blogs. However this clearly isn't the case now, because I just removed it from Chrome to make the pictures above. It may be that these instructions apply if you have used some other method to install a toolbar: in this case, you may need to go into the Control Panel and use Add/Remove Programs to remove it.

Wednesday, July 7, 2010

Seven simple steps to a snazzy new-look blog: preparing to change template in Blogger

This article is about making a plan to change your Blogger template if your existing blog-template has been customised: it covers how to make a list of the changes that have been made to your template, and using this as the basis of a list of changes to re-apply when you change templates.

Overview:

Changing your template in Blogger is easy: you just choose another template, press save or Apply to Blog (in the Template Designer), and the changes are applied.

But if you have ever customised your template using the Edit HTML feature, then ALL the customisations are lost when you change templates. This is fine for some changes (eg hiding things you didn't like in a particular template), but it means you lose changes that you may want to keep, eg a favicon, meta-tags, Google Analytics or Webmaster verification, Amazon Product Preview, etc - in short anything that you want to keep, no matter how your template looks.

If you're worried about the consequences of changing templates, you have a basic choice to make:

1 Remember what you did:
Try to remember what you've set up on your blog, and think about which of these things you want to apply in your blog-with-a-new-template.

2 Code comparison:
Compare the layout-template code for your blog with the same code from another blog that has the same template and widgets as your blog, but not the HTML customisations. From this comparison, make a list of what customisations you need to re-apply after you change templates.

The first option is quicker and a lot easier - but you might miss something important. Personally it's not an option I'd like to use for any blog that has "weight".

Unfortunately the second option doesn't give a 100% correct list of customisations, unless you kept a copy of your current template at it was at the time when you first applied it to your blog. This is because Google may have upgraded their copy of the standard version of your template, but not been able to upgrade your customised version. (See Advantages and Disadvantages of Editing Your Blogger Template for more about this). However the list that you can make may be close enough - and I used it myself to make sure I didn't miss any details in migrating the blog you are reading now.

This article is about the second option, and how to use the results of the comparison to make a detailed plan for moving your blog from one template to another.

Applying Option 2:

Follow these steps to compare the template from your blog with another un-customised version of the template:

1 Make a test-blog which is like your Real-blog, except it doesn't have the layout-template customisations. See Making a test-blog for more details about this: it's NOT as simple as just copying the template over.
IMPORTANT: If you do have a backup copy of your template from immediately after you last applied a new template to, then apply it to your test blog before giving it any widgets. (Doing this will give you the chance of making a 100% correct list.)

2 Line-by-line, compare the template code in your test and main blogs. For each difference, work out whether it's due to a customisation that you want to keep when you "migrate" your main blog to a new template, or something that you can leave behind.

To do the comparison:

Get the template code for your test-blog by choosing Design > Edit HTML for it, and clicking on Download Full Template. Save the downloaded file somewhere with a name like testBlog-Template.xml

Get the template code for your main blog the same way Save the downloaded file with a name like realBlog-Template.xml

Use a text-file comparison tool to find the differences between the two files.
Comparing two text files using Excel discusses this in more detail, and links to a tool that makes this process (a little) easier.

Note that there may be some differences which aren't explained by modifications that you made to the template: these will be due to improvements that Google have made to the template file. You need to decide how much time to spend investigating each difference, based on how likely it is that you made it.

3 From the list of differences, write a plan of the existing customisations you want to apply to your new template, and also of any new changes that you want to make at the same time. Put it in order of most-to-least important (eg I usually put "load Google Analytics code" just after "apply template, because the statistics are very important to me).

3.5 (optional) Decide which new template to use, and practise the upgrade:
Use the test-version of your existing blog (the one you made in step 1), and give it the new template. Apply the extra customisations from your list. Possibly even copy in some posts from your main blog into it. Test how well it works, and tweak your list of the changes that need to be made when you migrate your real blog.

4 Back up the current template of your blog.

5 Apply the new template you've selected to your blog.

5.5 (Optional) make another back-up of your template - before you re-apply any of the customisations. This will be the basic version that you compare against if you ever need to do this exercise again, so save it somewhere safe.

6 Make the other changes from your plan.

7 Test your blog to see that all is well.

That sounds easy enough. Seven simple steps to a snazzy new-look blog. Let me know how you get on.

Friday, June 11, 2010

Getting an old-style (Layout or Classic) template for your blog

This article is about how to apply a Layout or Classic template to your blog, instead of a Designer template.

Overview
During 2010, Google made the Template Designer available as the standard tool for selecting and customizing your blog template.

But there may be situations where you want to use an older style template (eg, if you want to make a shadow or testing blog for an existing one, or if you want a template that uses the entire screen-width without borders).

At first glance, this option appears to have gone. But fortunately, it's just tucked away in a remote corner:

How to Select a Layout or Classic Template

Go to the Design > Edit HTML tab.

Scroll to the bottom of the screen (underneath the bottom of the code-box).

There you will see new links that let you choose a Layout or Custom Template. Click the one you want, and it opens a screen that works just like the old Blogger screens did.

(Remember that "... you will not have access to many new features... " if you use one of these templates.)

Saturday, May 8, 2010

Making a test-blog for template changes

This article is one of a series about preparing to change the template in Blogger. It looks at how to make a template-test blog.

Other articles in the series - coming soon - tell you how to use this template to plan your template change so that you don't lose any key features that you've installed before.

Steps to make a template-test blog:

1 Check your blog's post-template

Go into Design > Page Elements > Blog Posts (edit), and change one of the ticked items (just temporarily). For example, show reactions or un-show an item that is currently shown. Save this change, and check that it appears on your blog.

If the change is ok, then you can un-do it, and move directly to the next step.

But if they change doesn't show up, then you have a corrupt post-template. You may want to re-set the post template and be sure that your blog is showing the items you want before moving on.

2 Create a new blog to work with:

Find out what template your existing blog has.

Go to the Dashboard, and click Create a Blog. Give it a name and URL like "testing-YOURBLOGNAME"

When Blogger asks which starter template to use, choose your current template, (if it's on the list shown), or just any template.

After the blog has been created, press Start Blogging,

Go to the Settings / Basic tab and set

"Add your blog to our listings?" = No
"Let search engines find your blog?" = No

3 Give it the same settings as your real blog:

In this step, you need to make your test blog have the same structure as your current blog. This doesn't mean the same contents, just the same widgets and other background settings that affect how the blog looks. The particular things you need to check include:

In the Settings / Basic tab, set all the other options (except the ones at the end of the last section) to exactly the same settings as your real blog has.

In the Settings > Formatting tab, do the same thing.

In the Settings > Comments tab, do the same thing.

Go to Design > Template Designer and choose the SAME template that your existing blog has.

Go to Design / Page Elements / Blog Posting, and give your test blog exactly the same settings as your main one: this includes their position on the page, as well as whether or not they're displayed.

Go to Design > Page Elements, and use the Add a Gadget function to give your test blog EXACTLY the same gadgets that your main blog has.

This step is tedious if you have a lot of gadgets. But there are no shortcuts: uploading the downloaded template would apply the template customisations as well as the gadgets, which defeats the purpose! And even though it's a lot of work, it's worth it if your blog has a lot of "weight" (visitors, authority etc) an so you don't want to risk having it fail.

If you have done any structural change to your template (eg I added a footer sectionto the Blogger-Hints-and-Tips blog), then you will need to do the same structural change to your test-blog as well. This is ok, because you most probably will not be needing the same structural change in your new template.

If there are any gadgets on your main blog that you've been planning to delete anyway, it would be good to do this now - it saves having to re-create them in your test blog

Technically you should apply any header images and the same fonts and colours too: I chose not to do this when I was preparing to move BHAT, because I didn't want to accidentally make an update to the test-blog which should have one to the real blog - having the colours and header look different reduced the chance that I would make this sort of mistake.

3 Get some posts to test with:

Choose whether to import all your existing posts into the testing blog, or just copy some individual posts. Or you may choose not to test with any at all (at this stage).

Note: Any links in your posts WON'T be re-directed, so when you are testing, you will find that clicking any internal links in your posts will take you back to your main blog. If you are moving all posts, you could avoid this by opening the export file with a text-editor, and doing a fine/replace to change the main blog's URL to the testing blog's URL in any links.

Depending on what kind of tests you want to do, you may not need many posts. Personally, when I was preparing to move BHAT I just did two.

Wednesday, May 5, 2010

Writing posts for Blogger in MS Word (etc)

This article is about how you can write the content of your blog posts when you are not connected to the internet, and actually post them later when you are connected again.

Why write off-line?

Some people like to prepare their posts while they are off-line: This may be because their internet connection costs are very high, eg on a cruise ship as a passenger or as crew, or because their internet connection in unreliable. Some people just find that they can be more creative when they're not connected and being interrupted by chat and emails. Others may have documents that they wrote before they knew that Blogger (or even the internet) existed, that they now want to put onto a blog.

If you copy-and-paste from MS Word (and other Microsoft programs too, eg Excel, PowerPoint), then a lot of extra codes are added to your text. These characters can have all sorts of effects, eg I've seen a help-forum post about a page element in the sidebar changing colour unexpectedly which was finally tracked down to a copy-and-paste from Word.

So, to be safe, the advice is DON'T copy and paste from Microsoft directly to your blog.

Which leaves people asking, how can I:

Write the contents of blog posts when I'm not connected to the internet?
Convert existing word-processor documents into to Blogger posts?
Load content from another tool into your blog?

Some options:

Use a text editor:
The simplest approach is to write your document contents in a text-editor (eg Notepad) without any formatting.   You can copy-and-paste from there into Blogger when you are ready, and then you apply formatting after the text is put in the blogger editor.

Double copy-and-paste:
Another approach is to write in MS Word (etc).  When you're ready to post, copy the text into a text-editor (eg Notepad) first, and then copy it again from there before you past it into the blogger editor.   You will lose any formatting (bold, italics, indents etc) that you did in Word: they will need to be re-done once your post is in the Blogger editor.

Write externally and link to the file:
You may decide not to load the document contents into Blogger at all. Instead, load it to a file host (see File-hosting options), and link to it from your blog post with some anchor text.

Anchor-text is the set of words that are used to link to something - for example, in the last sentence, "file-host options" is the anchor text, and "http://blogger-hints-and-tips.blogspot.com/2010/01/file-sharing-hosts.html" is the link

If you do this you want to be sure that the people who will looking at the file will have software that can read it.   One good option can by to save it as a PDF file - if you use some file hosts, you can even get the HTML to display the PDF embedded in your blog (using option two from Putting external HTML into your blog).

Use a Blog-friendly editor:
One tool that you can use for off-line work is Windows Live Writer. I haven't tried it myself (yet), but this article about it is from a person who generally gives very good advice.   That said, if you're going to use WLW, you need to keep using it, because there are some issues with switching back to the regular Blogger editor later on.

Another possible tool is MS Word version 10.   This has an option to publish blog posts.   It may not work in all situation - eg in some companies, the network may be set up so that you cannot make the necessary connection between Word and Blogger. Also, I'm fairly sure that it will use the Live-Writer approach, so it's likely that posts originally written in Word 10 (and higher) may not be easily edited in Blogger.

A similar approach is to use a Blogger-friendly converter, ie a piece of software that takes a Word (etc) document and turns it into the type of HTML that Blogger can handle.   Google Docs is one option - there's a separate article for this approach, because it's so new and has so many potential options and challenges. But so far, the feedback is that this works well.

Thursday, April 22, 2010

Tools for measuring and managing your blog-site's progress

This article lists tools and suggestions that I want to remember for promoting and measuring the "success" of blogs and blogsites ("real" web-sites made with blogging tools).

Measurement Tools and Techniques

Website Grader by HubSpot
Free. Gives you a mark out of 100, and a report with suggestions for improvements. You need to give them an email address, but the report is provided on-line.

Blog-grader by HubSpot
Free. Gives you a mark, but it's not quite clear what it's out off. Ranks based on how often you post, and how many words per post. Includes a table of number of posts by week-day and time-of-day.

Promotional Ideas

Link your blog and the social networks

Write about local businesses that don't have websites of their own

Submit listings to search engines:

Submit listings to directories:

The Yahoo! Directory

Friday, April 9, 2010

Putting a Blog into Facebook, changing the title and descrption

This article is about putting a note about your blog (or any other website) onto Facebook using their share tool, and controlling the heading and text that are shown.

Overview

There are many ways to link a blog and your Facebook account. The simplest options are manual:

If the blog has a Share-this-on-Facebook button or Facebook Like or Send buttons, click this button, if necessary log into Facebook in the window that opens, and a post is automatically made. (see Putting a Facebook "share this" badge on your blog for more about this.)
If the blog doesn't have these tools, then you need to manually copy the URL from the blog, and paste it into your Facebook wall or status field.

No matter which option you use, Facebook suggests what title, text and picture from the blog shoul be shown in the Facebook entry. They've got better and better at choosing appropriate text and images, but in come cases options suggests are not appropriate.

Fortunately, you can change the suggested title and description..

Follow these steps:

1 Click the Share / Like / Send button, or copy the URL for the blog that you want to link to.

2 If prompted, log in to Facebook and / or past the link - otherwise it will come up automatically.

3 Click on the link item (it's in the Attach bar, looks like a drawing-pin)), and when the window opens, paste in the web-address (URL) that you copied in step 1)

4 Click on Attach, and you will see a preview of the default values that Facebook is suggesting, based on what it finds on the blog:

5 If you hover over the title and description part of this preview, you will notice that they are highlighted. This means that you can click on them and edit them.

6 Choose a thumbnail-picture (using the arrow buttons at the bottom left, and edit the title and description by hovering and then clicking on them.

What your readers see:

Your readers will not know that you have changed the title and description suggested by Facebook - they simply see the values that you entered.

Tuesday, April 6, 2010

Blogs, Blogger, bloggers, Posts, Pages and Screens - some basic definitions

This article defines some of the basic words if you are using Google Blogger. It is helpful if you are just getting started, and need to accurately describe a problem you are having. It is part of a series of articles about getting started with Blogger.

Google, Blogger and Blogging, Posts

Google, the noun, (sometimes called Google Inc or Google Ltd) is a company. They became famous by creating a very, very useful search engine. Since then, as well as making the search engine even better, they've created (or purchased) lots of other tools as well, and become rich by selling on-line advertising space inside their tools.

Using their most-popular tool (www.google.com or your local version eg www.google.co.uk), you can google (a verb), ie search, for things. (The same way that you can hoover the floor, or xerox a piece of paper

A blog is a "binary log" - geek-ese for "a diary you keep on the internet". A blog can contain anything you want to write, for example:

a fantasy story that you made up,
a factual account of your life,
your opinions about politics
newsletters from a club you belong to
information about your business and the services you offer
and many many more

Blogger is a piece of software (ie a computer program) provided by Google, which lets you create a a blog.

A blogger (small b) is a person who writes a blog. They may use Blogger, or various other types of blogging software (eg WordPress, TypePad)

A Post is the basic item that you publish onto your blog.   After you have been blogging (writing a blog) for a while, you blog will (usually) have many Posts.

Pages - AKA Static Pages

In regular websites, a page is roughly the same as a screen (at least as far as anyone who reads this article needs to know).

Until recently, most documentation about Blogger talked about Pages as through a Page was something that showed one or more Posts. (More about these soon.)

However Google introduced a new feature, called Pages, into Blogger in early 2010.

These Pages are intended for bloggers who want some material on their blog which is slightly different from the rest: it's not part of the usual material that they publish, and stays current and relevant in a way that older posts in a blog don't.   Typical pages content includes contact-details, frequently-asked-questions, or "about this blog" statements.

Pages are edited using a tool that is similar to the Posts editor, but they have some small differences: eg they don't have a publication-date so they don't appear in the Archive. I have previously written a full description of the difference between Pages and Posts.

Pages also have a gadget all of their own (called the Pages Gadget), which can be used to give a "menu bar" at the top, or bottom, or in the sidebar of your blog.

A key difference between regular websites and blogs is that Posts don't go onto Pages: all your Posts go onto what feels like the "main page", and the other pages are for reference materials only.   There are ways around this, eg using labels to categorise your blog, and making it look like you have put posts into pages by making a horizontal linked-list of label-search statements instead of the standard pages gadget, but even this isn't quite what many people expect.

Some people refer to Pages as Static-pages, to try to avoid the confusion. I don't use that term because:

It's not the term that Google/Blggger uses, and
Some of the target information (eg contact details for a club) is not static - it could change many times over the life of the blog.

Templates and Collections of Posts

A Template is a control file that says how a Blog will look. Blogs that are about different topics may use the same template: their content will be different, but they will look very similar to a person who reads them.

I have recently started using Screen to refer the display that Blogger generates each time that someone looks at your blog.

A Posts Screen may show 1,2, 3 or even dozens of Posts. The number of posts shown is controlled by an option that the blogger sets (in either the Design > Page Elements > Blog Posts, or Settings > Formatting options) and by a (relatively new) feature called auto-pagination, which restricts overly large collections of Posts, so that Blogger works more quickly overall.

If a Blog has a Layout or Designer template (see Types of Blogger template), then there are links near the end of each screen for Newer Posts and Older Posts: clicking them take the user to a new Screen, which shows a set of newer or older posts.

There are other types of Screen also:

If a blog has a Labels gadget, then clicking as option in it opens a List of Posts screen showing all published Posts in the blog that have the corresponding Label.
If a blog has an Archive gadget, then clicking an option in it opens a List of Posts screen showing all published Posts in the blog that were published in that time period.