Making Custom Templates Compatible With Pages Tabs

Blogger Pages lets you publish static information on stand-alone pages linked from your blog. For example, you can use Pages to create an About This Blog page that discusses the evolution of your blog, or a Contact Me page that provides directions, a phone number, and a map to your location.

blog pages

  • To create a page, click on the drop-down menu next to the gray Post List icon, and scroll down to Pages. You can create up to 20 pages.

Edit Page
<p>Once your page is published, you can link to it from the new <strong>Pages gadget</strong>. This gadget lets you add links to your pages as tabs at the top of your blog, or as links in your blog's sidebar. Existing third party templates may not support pages as tabs, but pages can still be added as links in your blog's sidebar. Here's an example of pages as links on a sidebar:</p>
<img class=

In the Pages gadget, you can decide which pages will have links, and in what order they will appear. You can also choose whether or not you want links automatically created for pages when you create them by checking or unchecking the box to the left of Add New Pages by Default.

For information on how to add a gadget to your blog, visit Adding a Gadget.

Making Custom Templates Compatible With Pages Tabs

If you're familiar with HTML and want Pages as tabs, follow these steps carefully (caution - this is not for the faint of heart!):
  1. Make sure the Pages Widget hasn't already been added, if so, remove the widget
  2. Go to the Design | Edit HTML tab for your blog
  3. Download a backup of your template by clicking Download Full Template
  4. Click the checkbox next to Expand Widget Templates
  5. Look for the following three lines of HTML. If this HTML exists, change showaddelement='no' to showaddelement='yes'
  6. <div id='crosscol-wrapper' style='text-align:center'>
             <b:section class='crosscol' id='crosscol' showaddelement='no'/>
  7. If this HTML does not exist, paste the following lines of HTML where you want the tabs to appear (for instance, after <div id='content-wrapper'>)
  8. <div id='crosscol-wrapper' style='text-align:center'>
             <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
  9. Confirm tabs are correctly added, click Save Template
  10. Go to Design | Page Elements and look for the new horizontal Gadget area and add the Pages gadget there.


Post a Comment