Domain Hosting Sale

Monday, 29 March 2010

Types of Blogger template

This article is about the types of template that apply to your Blogger blog, and how you can work out what type of template you have.

What types of template does Blogger have:

Blogger users templates to know how to structure your blog: all template-types except the new Dynamic-view templates allow you a lot of freedom to customise how your blog looks.

Ttemplates are the "framework" that Blogger uses to let us do this, but still offer the features that a blogging platform provides.

Currently, each blog made with Blogger has:

One post template:
There is only one type of post template, adn it is edited from Layout > Blog Posts - and not customisable apart from this
One design template:
This template may be one of four different types: Dynamic, Designer, Layout and Custom.

Also, each template may have a mobile template, which is used only when someone views the blog using a mobile device (eg smartphone). A blog only has a mobile template if this has been enabled for it (on the Template screen).

When you have looked at a few blogger options, you will begin to recognise the different types of templates, just from the way blogs made with them look on screen. The following sections describe the types of design templates (which include Designer templates, just to be confusing), and show you how to tell if your blog is using them.

There is also a very quick way to find out the name of your template - often knowing the name will let a Blogger Helper understand what the problem is, and so make suggestions about how to fix it.

The Custom Template:
The first design template that Blogger had was a custom template - and there are still some blogs with these today.

With a custom template, the only way to change the layout of your blog is to edit the HTML; there are no widgets, and no drag-and-drop editor for positioning things.

How to work out if you have a Custom template:

Post-Sept 2011 Blogger (aka the new interface):
If you go into the Template tab, and the first thing you see is "Give your blog a whole new look!", and at the bottom of the screen there is an area called "Edit Template HTML", then your blog is using a Classic template.

Pre-Sept 2011 Blogger (aka the old interface):
If your menu options include "Template", but don't include "Layout", then you have a Custom template.

Layout Template:
The Layout template was the next to be introduced. It includes the Page Elements editor and the idea of Gadgets (previously called Widgets and Page Items). This was a great improvement because it let blogger users move items around their design by drag-and-drop, instead of by editing HTML.

These templates (Minima, Rounders, ....) were a great step forward in the early 21st century, but web-technology has moved on. They are no longer available to choose in the new Blogger interface, but can still be selected in the old interface.

How to work out if you have a Layout template:

Post-Sept 2011 Blogger (aka the new interface):
Go to the Templates tab, and choose Customize. If there is no template name given underneath "Live on Blog", and no template selected in the area to the right, then you have a Layout template.

Pre-Sept 2011 Blogger (aka the old interface):
Go to the Design tab and choose Template Designer.
If the Background and Layout tabs (down the left hand side) have message like "Not applicale for this template", then you have a Layout template.

Designer Templates
Designer templates were introduced in early 2010, when the Template Designer was first available in Blogger in Draft. They provide a far wider range of basic designs, and far more options for choosing the number of columns, column width, background images,footer structure, colour scheme, etc.

How to work out if you have a Designer Template:

Post-Sept 2011 Blogger (aka the new interface):
Go to the Templates tab, and choose Customize. If there is a template name under "Live on Blog", and it is not from the names under Dynamic Views on the right, then you have a designer template.

Pre-Sept 2011 Blogger (aka the old interface):
Go the Design tab and choose Template Designer.
If you have options to change the column structure, then you have a Designer template.

Dynamic Templates:
Dynamic view templates were first introduced in April 2011. They are quite different from the other template types, because they rely on your RSS feed as the content source, and have a number of different viewing options, and actions like adding a gadget are quite different from other templates. Some dynamic templates use each post's thumbnail picture as the main navigation tool.

How to work out if you have a Dynamic Template:

Post-Sept 2011 Blogger (aka the new interface):
Go to the Templates tab, and choose Customize. If there is a template name under "Live on Blog", and it is from the names under Dynamic Views on the right, then you have a designer template.

Also, if you go into the Widths sub-tab, you will see a message "Not applicable for this template.

Pre-Sept 2011 Blogger (aka the old interface):
Go to the Design tab. If there is a template name under "Live on Blog", and it is from the names under Dynamic Views on the right, then you have a designer template.
Also, if you go into the Widths sub-tab, you will see a message "Not applicable for this template.

Creating a Shadow Blog

This article is about how to make a "shadow blog" - one that has the same structure as our real one, but less content, and which used only for testing.

Overview

By Jérôme from Rouen, FRANCE
(5+6+7+8+9+10+11+12)
[CC-BY-SA-2.0 (www.creativecommons.org/licenses/by-sa/2.0)],
via Wikimedia Commons

Sometimes, before you make a major change to a blog (or even a minor change to a popular one), you will want to test it before applying it to your blog.

You may even want to go one step further than getting your posts right before you publish them, and actually test the "look" of posts before you put them into your main blog. (After you have got your post complete in your shadow-blog, you can copy the HTML from the shadow to the main blog, so that the formatting etc is all carried over: See How to copy an individual post for details)

A shadow blog has is a place where you can do this. It has

The same structure as your real one, and
Just enough content so that you can do some changes and test if they're working properly: generally two or three more posts than the maximum you show on any on a screen is enough.

To make a shadow blog, you need to

Create a new, private, blog with the same base template as your existing blog
Copy your existing template into it, and
Copy some of your existing posts into it.

Detailed Instructions:

1 Make a blog to work with:

Find out what template your existing blog is using

In your existing blog, download a copy of your template. (See the first part of Editing your template, if you're unsure how to do this.)

Save the downloaded file somwhere (remember where, you'll need it below).

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

When Blogger asks which 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, and then go to the Settings / Basic tab: Set "Add your blog to our listings?" and "Let search engines find your blog?" to No (since this blog is just for your testing).

Go to Layout / Pick New Template (or to Layout / Designer Template if your existing blog has a designer template), and choose the same template that your existing blog has.

Go to the Templates tab, and choose Backup/Restore.

Click Choose File, and navigate to the downloaded template that you made earlier.

2 Get some posts to test with:

Choose whether to import all your existing posts into the testing blog, or just copy some individual posts.

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.

Saturday, 27 March 2010

Making a Custom Map in Google Maps

This article is about creating custom maps using Google maps. It supports another article about putting maps into Blogger. But the techniques apply whenever you want to generate a Google map of your own, and embed it into a web-site etc.

Custom Maps vs regular Google Maps:

Google Maps already lists vast numbers of road, rivers, buildings, businesses etc. And these are being added to all the time.

Very often, you can simply search for what you want, and Google Maps will show it to you. For example, searching for "Empire State Building" shows a map, with links to the building itself, and several surrounding businesses - like this.

But sometimes, the location you want is not already be in Google Maps.

If the place is "yours" then you can either register it through the Local Business Centre. But if it's not appropriate for you to own the Google Places listing, or if you want to show multiple places on the same picture, it may be better to create a Custom Map.

Also, Custom Maps are the tool to use if you want to show routes: for example, one of my blog-sites has about 30 custom maps that show the routes taken by local bus services.

How to create a Google custom map:

1 Go to Google maps (http://maps.google.com/)

2 Sign in
The same google account that you use for blogger is probably the best one to use. And if you've already signed in to blogger, you may find that you're already signed in.

3 Make a new map
Go to My Maps (link on the left, near the top), and then Create a New Map.

4 Add your content
Put in placemarks, shapes and lines - both along roads and not. You may like to use different colours for places that you have been to, vis places you're still planning to visit.

This page is good for learning how to edit maps: http://maps.google.com/support/bin/answer.py?hl=en&answer=62843

Tip: If you're putting in lines along roads, don't do one long line that shows the whole route. If you do, and something goes wrong with it, then you have to delete the whole line and start again. Instead, draw smaller parts of the line, and make up the overall route from them.

5 Save your map
Your map will auto-save as you make editing changes. Beware of this - it means that mistakes you make get saved quite quickly, too). When you have finished, press Save or Done one last time, just to be sure.

6 Exit and re-start Google Maps
In the same browser window, go into another google application (I usually use News, because the link is right beside Maps in the very top left of the screen). Then go back into Maps.

7 Check your map
Open My-Maps, and then the map that you just created. Check it's ok.

I've added this step from bitter experience! Sometimes, especially with lines drawn along roads, Google Maps seems to add some extra bits that you didn't put in, and which don't show on the map when you're editing it initially.

What next:

After you have created a custom map, you may want to share it by putting it into a blog (or other website).

Or you may just use it for yourself, or send links of it to other people.

Thursday, 25 March 2010

Making a Gadget that looks like a Post

This article is about how to make a gadget display (almost) all the things you can put into a post in Blogger.

Summary:

Previously, I've described how a gadget that only appears on the first screen is one option for giving your blog a home page.

One apparent weaknesses with a gadget is that it can only contain one type of "thing" - text, or a picture, or a poll or - or whatever other type of gadget you choose.

But - an HTML/Javascript gadget can contain almost any valid HTML. And each post is really just made up of HTML. So:

You can make a gadget look like the body of a post by

copying the HTML from a post, and pasting it into the gadget!

The picture below is an example of what such a gadget looks like. I've given it a title ("Test Gadget"), though for a real blog, I probably wouldn't bother. Notice that unlike the Post after it, the gadget doesn't have an author, date, comments or an edit-this link

See further down in the article for detailed instructions, and also for notes about which features from Posts will not show up within your gadget.

Follow these steps to make a gadget look like a Post

1 Create a new post (you won't be saving this, you are simply using it to get the HTML)

2 Edit it in the usual way, until it is complete and ready to publish - but don't publish it.

Write and format text.
Put in quotes, make them easily-tweetable.
Colour the font, or the background text.
Include pictures and videos and links.
Put in tables, maps, calendars - even AdSense ads or Amazon product links
Align things side-by-side
Etc, etc: basically do anything you would do in a normal post.

3 Click on the Edit HTML tab at the top-right-side of the Post-editor (old interface) or the HTML tab at the top-left-side (new interface)

4 Put your cursor into the editing window, and select ALL the code that is shown. (Ctrl / A does this in many systems)

5 Copy the HTML

6 Press Save Draft or Save Now   (not Publish Post)

7 Add an HTML gadget to your blog in the usual way

8 Paste the the HTML that you just copied into the Content field.

9 Save the gadget, and drag it to wherever you want it.

10 Once you're happy with the gadget, go back to Posting > Edit Posts, and delete the post that you used to make the gadget. (This step is options, but it will stop you accidentally publishing the post later on.)

Post features that don't work in Gadgets:

Of course there are some features of Posts that don't work in gadgets:

Don't put anything into the title field - it's not part of the HTML for the post, so won't be displayed.   Instead, type in any title you want, and format it yourself.   (Search engines won't index contents from your welcome gadget very because of this - so make sure that the content is elsewhere in your blog too.)

Jump-breaks don't work: you can put them into the post, but they have little or no effect on how the gadget looks.

Labels. Gadgets don't have them, so don't bother.   (except if you want to keep the "construction" page around as a draft: I often label things like with as "Site Admin" or similar)

Backing up. Gadgets aren't included when you export a copy of your blog.   Gadget contents may not always be backed up when you export your template (I haven't tested recently) - actually, this is a good reason to keep the "construction post" around as a draft.

Wednesday, 24 March 2010

Showing your oldest blog-post first - and the rest in reverse order.

Blogger does not have an option to display your posts in reverse order - so that the oldest post is first, and the most recent post is last. But this article describes displaying your posts in this way by manipulating their post dates. And it links to an article about some other possible options.

Overview:

Previously I've discussed the options for giving your blog a home page. One option is to organise the post-date for each of your posts, so that you control the order posts are displayed in.

This is easy enough to do, although there are a couple of risks that you need to be aware of as discussed below.

Blogger Posts and the Post-date

Each Post in your blog has a date-time value, which is called its "post-date". Normally , this is set to the date/time when you publish the post for the first time. But you can change the post date for any post, and you can do this either when you post it first or later on.

The post-date is important because it controls the order that posts are shown in:

The post that appears first when a reader visits your blog is the one with the most-recent Post-date.

If you have more than one post-per-screen, then the next-most-recent post is on the screen underneath the first one. And then the second-next-most-recent, etc.

When a reader is looking at any post, and they click Newer-Posts or Older-Posts, the post-date is used to decide what posts to show on the next screen.

This means that you can make your posts appear in the order than you wrote them (ie first post first, second post second, etc) by changing the Post-date so that:

your first post has the most-recent post-date,
your second post has the next-most-recent-date,
your third post has the third-most-recent poste date
etc

An alternative approach is to just make one post always appear first, and let the other posts appear in the order that you posted them.

How to make your posts appear in reverse order, using dates:

1 Give your first Post a post-date (eg today), AND remember that date.

2 Give all other posts (even ones that you write next week, or next year) a post-date that is earlier than the post-date you picked in Step 1.

If you want your posts is strictly reverse order, you need to give each one a date that is earlier than any existing post. This is quite easy: just look at the list of posts in Posting > Edit Posts and scroll to the bottom of the list to see the oldest date used so far.

3 Turn off the post-date display on your posts (since the post-date won't make sense, because you're manipulating the dates).

To do this, go to the Design > Page elements tab (old Blogger interface) or the Layouts tab (new Blogger interface).
Choose Blog-posts (edit).
Un-tick the date under "Post Page Options".

4 Remember to make the same date change for every post you write from now on.

Also, if it might be relevant for your readers to know when you wrote a post, make sure that you always manually put the date into each post.

Risks of this approach:

If you follow this approach, you will give a far-in-the-past date to pages that you never want to appear first. There is a risk that Google might convert the data behind older posts at some time.   If your post-dates get too far into the past, then it's possible that they might not cope well this.   This could be for reasons that seem logical, or because of things that are totally to do with the internal workings of Blogger's database, and make no sense to you at all.

Also, be aware that Google might choose to force the post-date to appear on posts at some time in the future. At the moment, they don't: it's your choice.   But you cannot guarantee that they won't change their minds about this, one day.   (Personally I think they probably won't, and I've built a couple of "real" websites that make use of the technique described here.   Just remember it's not guaranteed.)

An Alternative Approach:

Adam of Too-Clever-by-Half has suggested a totally different way to display your posts in reverse order.   I haven't used it, but think that it has a lot of potential in some situations, provided you are comfortable using Yahoo pipes and RSS feeds to display things on your blog.

He has also recently shared another approach he found, which uses a script to manipulate elements within Blogger, and so is more robust than his first approach.

Tuesday, 23 March 2010

Making one post always come up first

One way to make a "Home Page" for your Blogger blog is to simply make sure that one particular Post always comes up first when someone visits your blog. (This approach only works for Posts, it does not work for Pages.

Overview

Generally, the post that appears first when a reader visits your blog's main address (www.yourBlog.blogspot.com or www.yourDomain.xxx) is the one with the most-recent Post-date.

One way you can make sure that one particular post always comes up first by re-publishing it every time you post something else - and changing the date to a value more recent than the most-recent post.

This can be tiresome, because you need to remember to edit two posts every time that you post. But:

Its easier than manipulating the date of every single post, and
You can still use the date-features that Blogger has, so it's unlikely to stop working if Blogger something in the future.

Follow these steps every time you publish to your blog:

1 Do the new (or changed) post, and publish it.

2 Edit the post that you want to go first.

Go into the Post editor
Change the content in a small way (eg put in a space, and take it out again).
Change Post date and time to Automatic.
Publish it.

If you want to change several posts on the same day, you could do all of them, and only do step 2) after the last one. This will mean that a different post (the most-recently-published one) will come up first for a short time - but this will probably be ok unless you have a very large number of visitors to your blog just after posting.

An alternative:

The option listed above was the only way of doing this for a long time.

But during 2012, Blogger introduced custom re-directs (as a way to let us delete posts, while not losing the traffic that was provided by existing lists to those posts. And so this gives another alternative: you can set up a custom re-direct on your blog's main URL, so that visitors to it always get taken to pretty much anywhere they want. See the first option in giving your blog a home page for more details about how to do this.

Making a "Home Page" for your Blogger blog.

Displaying a gadget only on the home page

Showing your oldest post first in Blogger

Changing the date for a post.

Stopping certain pages from ever appearing on the home page

Monday, 22 March 2010

Blocking categories of AdSense ads from your Blog

This article is about how to restrict the types of advertisements that AdSense places on your blog.

If you don't have an adult-content warning flag on your blog, then doing this is almost essential for AdSense users, so that you comply with Blogger's Terms and Conditions and ban ads about sex / sexuality.

Overview:

Previously, I've written about setting up Adsense in Blogger, and explained how easy the this is, thanks to the features in the Monetize tab.

Unfortunately, there are a few things that you cannot do in the Monetize tab, and which I believe are essential for every Blogger user who displays AdSense ads.

One step that I strong recommend is stopping malicious use of your AdSense account ID.

Another is restricting the categories of AdSense ads that are displayed - and in particular stopping sexually explicit ads from appearing.

This is because Blogger's Terms and Conditions say that you will only show adult material if it's placed behind an adult-only warning flag - so if you don't stop the ads from showing, you could potentially be breaking the rules.

And depending on the content and audience of your blog, there may be other categories of AdSense ads that you also want to block.

How to block certain categories of advertisements:

Log in to AdSense (http://www.google.com/adsense)
Go into the Allow and Block Ads tab
Make sure that the Product drop-down (centre of the screen) has Content selected.
Go into the Sensitive Categories tab, and click on the right-hand button beside each category you want to not show on your blog.
For Blogger, this should include at least Sexually Suggestive, unless your blog has an Adult-content flag
.
Go into the General categories tab, and do the same.
Go back to step 3, and choose Mobile Content from the Product drop-down. Then repeat 4 & 5.
You need to do this even if you don't have a mobile template for your blog: AdSense's mobile ad-units are being displayed when such blogs are looked at using a Smartphone or similar mobile device. (They were on one of my sites yesterday, anyway.)
If you use AdSense for feeds, then go back to step 3, and choose Feeds from the Product drop-down, then repeat 4 & 5

Once a category is blocked, there will be small red cross-circle and the word "blocked" beside it.

There is no need to press Save, your choices are saved automatically.

You can turn a category on again by clicking on the left-hand button, ie the one beside the banned symbol.

new adsense interface screen for disallowing certain advertising categories fro all your websites

Yes, the numbers don't make sense: I used MS Paint to mix them up, so Google cannot say that I'm revealing confidential details about my AdSense performance.

What your readers see:

As far as I know, the changes take place pretty much straight away: AdSense takes ads from the blocked categories out of the pool of ads that are able to be shown on your site. (If you have examples where it has taken longer, please leave a comment below.)

Choosing what categories to block:

Google kindly tell you what percentage of recent revenue you would not have got, if you had each category blocked. You may find this useful in deciding whether to block any other categories.

Personally, I don't: blocking categories is about making sure that I get ads that are appropriate for my site, not about making revenue.

But it comes down to your blog, and what's the best thing to do in your area.

Blocking just for a specific blog:

Currently, it's only possible to block categories at AdSense account level, not at web-site / blog level. This is annoying because it may mean that you need to block some profitable categories from some web-sites in order to stop them going on any of your sites. Hopefully Google will change this feature in the future.