How to put put Posts into Pages in Blogger

This article shows how to set up your blog, using Blogger, so that it looks like your posts are on separate web-pages.

Can you put Posts onto Pages in Blogger?

Ever since Google introduced "pages" into Blogger, people have complained that their posts all go onto the "home page", and asked how to put posts onto different pages in their blog.

The standard, but unsatisfactory, answer is

"Sorry, that's not how Blogger works.   So called "static" pages in Blogger are meant to be used for reference information that doesn't change often, which you don't want to be part of your regular post-feed, but which you do want users to have easy access to."

Basically, this is part of the difference between post and pages.

Luckily it's easy to set up your blog so that it looks like your posts are on different pages [tweet this]    (even though you and I know that this isn't how Blogger works) by following three simple steps.

Follow these steps to put your posts into pages

1   Add Categories

Categorise your posts by adding Labels to them.

It's your choice whether to add Labels to all posts, or just the ones that you want to show up on specific "pages".

2 Make a "pages look alike" menu bar

There are (at least) are three ways of doing this - described below.

When Blogger first implemented static pages that could link to websites, I suggested choosing which ever option suited your blog best.  

However now, due to the increasing importance of mobile themes, I recommend Option c), because the pages-gadget is the only one mentioned that automatically shows upon mobile-themes.

a)   With a Labels Gadget    

Use the usual add-a-gadget approach to put a Labels gadget into the spot where you would put the Pages gadget if you wanted to make a horizontal menu bar with it.

If your blog has some Labels that you don't want to have "pages" for, then set it to show only some of your Labels:

b)  With a Linked-list gadget

Use the usual add-a-gadget approach to put a Link-list gadget where you would put the Pages gadget if you wanted to make a horizontal menu bar with it.
Add a link to the list for each Label that you want a "page" for.   The HTML to use for each Label value is

http://YOUR-BLOG-URL/search/label/THE-LABEL-NAME

You can also add other items (eg individual Posts, or even Bllogger's static "pages" if you really must have them - see why I don't like them!) - see the menu bar at the top of this site for an example of this. 

c)   With a Pages gadget   <===   RECOMMENDED APPROACH

Use the usual add-a-gadget approach to put a Pages gadget into the menu bar area.   (You can do this even if you have not created any Pages of content).

While you are editing the Pages gadget, there is an  + Add external link option.  

Click on this, and add an entry in like the ones described above in he Linked-list gadget option, putting

•  the text you want in your menu bar into the Page title field 
• The label search command into the Web address field.

3   Optional:  Deal with the home-page

If you don't want your posts to appear on the "home page" was well as the topic pages, then there are two possibilities:

• Use a technique similar to Showing a Gadget only on the Home Page  to not show the Blog Posts gadget on the home page. 
  
  In this case, the condition to use is !=  instead of ==)  
  
  If you do try this, then I strongly recommend that you consider the various options for giving your blog a home page, and make sure you are ok with the disadvantages of editing your theme.

OR

• Give your blog a "home page" using the custom-redirect option discussed in this post.

However I generally see this as unnecessary, because in most cases, very blog visitors ever see the home page.

Job Done

It really is that simple.  Your readers can now click on the "pages" in your blog from a "menu" at the top, and see a list of posts for the Page that they chose.

Even better, if some posts relate to more than one topic, they show up on both of the relevant pages.    And if you have used the Pages gadget, your blog is well set-up to work with a mobile-theme - which is something that is getting more important every month.

Don't forget to test your blog, to make sure that the menu bar is working how you expect it to and that it looks OK, in all the browsers that your readers are actually using.

---

Related Articles

Using Labels to group your Blogger Posts

Adding external and internal URLs to your pages-gadget / menu bar

Giving your blog a home page

The difference between posts and pages

Showing a Gadget only on the Home Page

Making your blog work for people using smartphones and tablets

Setting up Google Analytics for a 2nd or later blog

This article is about how to set up Google Anaytics to work on subsequent Blogger sites, if you have already set it up for your first blog or website.

If you already have Google Analytics set up, then the process is a little different to setting it up for your first blog (which is nicely described by GreenLava over on BloggerSentral) - because you already have a Google Analytics account, which you must add a new web property to.

How to set up Google Analytics for a subsequent blog

Log into Analytics using the Google Account which you use for Analytics overall (ie which you used for your other blogs or websites).


Choose the Admin tab  (currently linked from near the right on the orange menu bar)


From the drop-menu under Property, choose Create a New Property

Choose Website (it's the default)


Choose whether to use Universal Analytics (currently still beta) or Classic Analytics.
(I've chosen Universal for the blog that I've just set up - will be interesting to see how it's different from classic for blogger).


Enter the

• Sitename
• Blog's URL
• Industry category

Choose the Reporting Timezone:  I've left it on US / Pacific, because that's what my other blogs are based on.


Click Get Tracking ID.    The page that shows has your Tracking ID, it's like this (where the n's and m's are numbers):

      UA-100nnnnn-mm

• nnnnnnn is your own number, identifying your account.
• mm is the number of this analytics property - it is what makes your property ID unique.

Log in to Bogger using an account which has Administrator rights for the blog.


Put this Tracking ID into the    Settings > Other > Google Analytics >  Google Analytics Web Property ID  field.  


Click Save settings.


Wait 24 hours or so, for the code to activate.    If you're not seeing statistics after that, check if your blog really is getting visits (eg visit it yourself a couple of times)  - and ask for assistance in the Blogger Product forum.

Do you have Adsense on more than one site, including this one?

If you have AdSense on more than one website, and you are going to have it on this site, then you need to take some extra steps so that Analytics gets the AdSense data.    See here for more information.

Do you need to install the tracking code?

As well as your trackingID, Analytics also shows a block of code, with this header:

This is your tracking code. Copy and paste it into the code of every page you want to track.

The good news for Blogger users with newer Dynamic or Designer templates is that we can ignore this:   Blogger puts the code in for us.

But if you're using an older Layout or Classic template, or a Designer template that's older, you may need to install some code (not the Analytics tracking code, though) manually.

If you'e in doubt, edit your template in the usual way, and search for:

<b:include name='google-analytics' data='blog'/>

If you can find it, then do nothing, your blog already has the code you need, and your statistics should start flowing soon.

If you cannot find that line, then add it, just before the </body> tag.  (Search for   </body   and paste just before it).

Either way - don't install the tracking code from Analytics, because as Blogger operates now, this will not correctly count visits from mobile devices.

---

Related Articles:

How to edit your Blogger template

Using Google Analytics if you have AdSense on multiple websites.

Understanding Google accounts

AdSense Direct: A new way to sell direct advertising on your blog

This article introduces AdSense Direct, a new way to use AdSense to manage advertising that you directly sell ads on your blog or website - and to fill those spaces with AdSense ads when there are no Direct ads running.

AdSense have announced a new feature called AdSense Direct, which will let AdSense publishers (ie people showing ads on their blogs or websites) manage directly-sold ads using their AdSense account.

"Management" means that after an advertisement and campaign details are set up and approved, the ads will show on your site without any changes to your site (apart from having AdSense ads in on it), and having all contracts, invoicing and payments handled through your AdSense account.

How to use AdSense Direct

• Arrange a direct deal with an advertiser -- this can be any advertiser, even one that doesn't currently use AdWords.

• Enter the details into your AdSense account; more details about this here.

• You will be given a link which you email (etc) to the advertiser.

• The advertiser logs in (possibly after creating a Google account), upload their ad "creative" (ie text and pictures), approve the terms you entered, and pays for the deal with Google Wallet.

• You - and Google - approve the ad creative (ie words and pictures).

After this, the ad runs during the time period that you set up for it.   And after it has finished, regular AdSense ads are shown instead.

Limitations

Bad news for now:

AdSense Direct is currently available to publishers and advertisers located in the U.S., and we hope to expand further in the coming months.

But my fingers are crossed that this will change soon.

There's no statement about how this works with AdSense's limits on the number of AdSense ad units shown: does an "AdSense Direct" ad count towards the three-per-type-per-page that non-premium AdSense advertisers are limited to? My guess is "yes" - because regular AdSense ads are shown if AdSenseDirect ones aren't available.

Possibly you can only have one direct advertising campaign at a time?  Google's announcement  also says "If you've already expanded to running multiple direct ad deals and ad networks on your pages alongside AdSense, try our ad serving solution DoubleClick for Publishers (DFP)." - and yes, AdSense Direct does seem to be a vastly simplified version of this, which will benefit Google by signing up more advertisers.

And AdSense-Direct will only work in places where you can put an AdSense ad unit.  For example it is possible to put ads right inside blog-posts.  But regular AdSense ads need Javascript to work, so people who read your blog by email subscription or RSS don't see them. It's likely that AdSense Direct ads will be the same.

I haven't checked, but I'm pretty sure that the standard AdSense rules will apply.   And this will mean that if your advertiser ticks any of Google's categroy boxes, their AdSense-served ad will not appear on your blog if you have blocked that category.

AdSense Direct is probably not available for Blogspot domains, or at least not for ones whose owner signed up for AdSense using the easier AdSense setups for hosted publishers.

Costs?

The $64m question!

I'm still looking for information about Google's charge or margin for using Direct. For regular AdSense (for non-premium publishers, anyway), its 42%, ie they pay out 58%. I guess it will be a lot lower - but still significant, as Google are providing tools to do some of the most troublesome bits of direct advertisign for us.

My (possibly hopeful!) guess is 20%. What's yours?

---

Related Articles:

Setting up AdSense for your blog

Easier AdSense setups for hosted publishers

Other advertising options for your blog

How to show an AdSense ad inside a blogger post

Putting a picture on your blog as a Gadget

You can put a picture anywhere in your Blogger blog that you can insert a gadget - and you can make it link to a post in your blog or to any other website.

The Image gadget

Dry dock in Claddagh Basin

A very simple way to put a picture into your blog is to use an Image gadget (previously called a Picture gadget).

This is a tool that Blogger provides to make is easy to add a picture that shows up on all screen and is linked to somewhere.

Often gadgets (sometimes called widgets or page elements) are put on the sidebar - but in many blogger templates they can go in other places too (header, footer, etc).

Follow these steps to add a picture gadget in Blogger

1  Make sure you know where the original picture is and that you have copyright permission to use it.

2  Copy the location (URL or file system full path-name) of the picture - and remember whether it's on your computer, or on the internet.
(This article tells you how to find the URL of a picture that's already stored in Google Album Archive. )

3  In Blogger, follow the usual Add a Gadget procedure, and choose the Image gadget from the list of options (you may have to scroll down to find it in the list).

4  In the Configure-Image box, enter the options you want for your picture.   These include:

• The title for the Gadget,
• The caption for the picture
  (the small words that go underneath it, usually explaining it, or where it came from),
• What should happen when a reader clicks the picture - put this into the Link field
• Where to find the picture
  (ie the file-location that you copied in step 2)
• Whether to re-size (ie shrink) the picture to fix the space in the sidebar in your current template.

5 Press Save.

6  If necessary, drag-and-drop the new gadget to the place where you want the picture to go, and press Save.

What your visitors see

People who visit your blog in a web-browser, will see the picture, in the place where you put the gadget.  However pictures are not supported gadgets for dynamic view templates, so it won't be see if you use one of these.

Also, people who see your blog through an RSS reader, or by receiving emailed updates don't see any gadgets, so they will not see the picture.  

If you entered a value for Link, your visitor's browser leaves your blog and goes to the Link location:  with the Picture gadget, then there is no way to make this open a new window.   If you want to do so, then use an HTML gadget instead, get the code for the picture, and put target = "_blank"   into it:, so the code looks something like: 

<a href="YOUR LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target = "_blank"><img border="0" src="YOUR PICTURE LOCATION" /></a>

---

Related Articles

Options for putting pictures into your blog

Copyright, blogs and bloggers

Picasa and Blogger - an overview

Getting the HTML to add a picture to your blog

Finding a picture's URL in Google Album Archive

Finding the URL of a picture stored in Flickr

Showing a PowerPoint presentation in your blog

Why RSS / Subscribe to Posts is important for bloggers

Following a blog by email

Delete, change or re-format the "Showing posts with label" message.

This article explains options for deleting, or changing the content or formatting of Blogger's "Showing posts with  LABEL.  Show all posts" message and it's ugly grey box.

If your blog has a Layout or Designer template, then when a person who is reading it chooses a label value, Blogger displays a page with (a summary of) your most recent posts with that label.

If there are more posts that Blogger is willing to show on one page, then there will also be "older posts" and "newer posts" links at the bottom of the page.

And - unless you have removed it - there will also be a message at the top of the page saying "Showing posts with label yourLabel. Show all posts"

Reader actions that cause a visitor to see this message include:

• Clicking a value in your Label gadget

• Clicking a label value that is displayed in your post header or footer
  (unless you have turned them off in the Layout > Blog Posts edit option).

• Clicking a link that you have manually set up to show posts with a specific label (eg if you have used a Pages gadget to make a menu bar, and one of the options in it has a value like http://www.yourBlog.com/search/label/yourLabel?max-results=999

Unfortunately Blogger does not provide any way to customize or configure this message.
.
But it is easy enough to totally delete it, or to change the formatting, or to change the text..

How to delete the "Showing posts with LABEL" message

There are two ways that you can remove the "Showing posts with Label.   Show all posts" message.

Option 1:   Remove the code totally.   

To do this,

1  Edit your template in the usual way

2  Find the following text

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3   Delete that text and replace it with

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

(If you just delete the text and do not put the replacement in, then it is possible that Blogger will add that section back in again later.)

Option 2:  Hiding the message using CSS

To do this, add  this CSS rule to your template in the usual way:

.status-msg-wrap,
.status-msg-body {
display: none;
}

(This approach is less risky because you do not need to edit your template, and because it's easier to change later.   But some people have reported that on their template, it has not worked.)

How to change the format of the "Showing posts with LABEL" message

Some people don't mind the actual  "Showing posts with Label.   Show all posts" message.   But they want to format it in a way that suits their blog's layout and colour scheme.

This is easily done, by adding some extra CSS rules to your template in the usual way.

To change the format of the message text, use rules like this:

.status-msg-body {

text-align: left;

line-height: 1.4;   

font-weight: bold;

color: red;

padding: 0.5em 0.3em;

width: 100%;

}

To change the grey-shaded background or the box:

.status-msg-wrap {
width: 100%;
margin: 0 auto;   /*  keep the auto statement if the width is less than 100%, so the box is centered */
position: relative;
}

There are a wide range of options - check with CSS reference guides for the options.   You may need to carry out some experiments with your template and how it looks with various options to decide on the best combination for your blog.

How to change the "Showing posts with LABEL" message

There are several ways that you can change the text in the "Showing posts with Label.   Show all posts" message.

Option 1:   Just replace it with some text

To show a sentence of your own instead of Blogger's standard message, 

1  Edit your template in the usual way

2  Find the following text

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

3   Replace the line in bold (ie <data:navMessage/> ) with your own words.

For example, you might say

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>

<div class='status-msg-body'>

Posts in this category include (use the Older Posts link to see previous posts):

</div>

<div class='status-msg-border'>

<div class='status-msg-bg'>

<div class='status-msg-hidden'><data:navMessage/></div>

</div>

</div>

</div>

<div style='clear: both;'/>

</b:if>

</b:includable>

To show the searched-for label value in your message, you need to use the   <data:blog.searchLabel/>   tag. For example, you might say

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
Posts about <data:blog.searchLabel/>  include (use the Older Posts link to see previous posts):
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Note:  if you are going to use this tag, then you need to choose your label values very carefully, so that they all make sense.   For example, in one blog I have some posts labelled "For quiz organizers" and others labelled "Finance", "Organisation" etc.    There is no way that I can write a sentence including the labels that makes sense for both of these.

---

Related Articles:

Types of Blogger template

Using Labels to categorize your posts

The Pages gadget is a menu bar for Blogger

How to edit your Blogger template

How to add a new CSS rule to your blog template

Adding tooltips or hover text to Blogger posts and gadgets

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even a picture) in a Blogger post or gadget.

What are tooltips?

Tooltips are a feature found in many websites and modern computer based software:  when a viewer hovers their mouse over an item, a small piece of text is shown, generally formatted in a box which is highlighted in some way.

They can be used for all sorts of things, to provide definitions of technical or foreign-language words, additional information about particularly interesting concepts - or as an incentive or invitation to take an action  eg you could tool-tip "click here to enter" with a description of the prize or benefits of entering.)

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.


Create the item that you want the tool-tip to be on (it may be text or a picture).


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


Go into HTML mode (top right side of the editor toolbar), and find the HTML for the item.  
Hints:

• Use the find feature in your brower - it may be helpful to temporarily put some marker text just before and after the item.

• If you want to put a tooltip into a text gadget - just put the text into an HTML gadget instead, and that way you will be able to work in HTML mode.

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

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>

If you don't want the item to be linked, remove the href="Your Link"
part of the 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;" />

If you're working in the post-editor, 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;

}

There is more information about some of the options for formatting a line in this article.

---

Related Articles:

Adding a new CSS rule to your template.

Adding a horizontal line between blog-posts - including CSS line formatting options

Using marker-text to find places in your HTML