Blogger pages let you to 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.
You create a page similar to how you write a blog post. From Blogger in Draft click Posting | Edit Pages tab, then click New Page. (Note: you can create up to 10 pages)
Once your page is published, you can link to it from the new Pages widget. The Pages widget lets you add links to your pages as tabs at the top of your blog, or as links in your blog's sidebar. (Note: existing third party templates may not support pages as tabs, but pages can still be added as links in your blog's sidebar)
In the Pages widget, 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, you can visit Adding a Gadget
Making Custom Templates Compatible With Pages Tabs
If you are familiar with HTML and want Pages as tabs, follow these steps carefully (caution - this is not for the faint of heart!):
- Make sure the Pages Widget hasn't already been added, if so, remove the widget
- Go to the Layout | Edit HTML tab for your blog
- Download a backup of your template by clicking Download Full Template
- Click the checkbox next to Expand Widget Templates
- Look for the following three lines of HTML. If this HTML exists, change showaddelement='no' to showaddelement='yes'
- 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'>)
- Confirm tabs are correctly added, click Save Template
- Go to Layout | Page Elements and look for the new horizontal Gadget area and add the Pages gadget there.
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div><div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='yes'/> </div>
![[summary_02d36c15b225a0e91055e665b3c0fb83.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKR4wuN-ARwzf1JIbWIjEDyC3yQOcrNJE8RTBiCNFvHMLSfZKVd5HpqrsfA8GBelR_VVP6tjVOGMKFngp4EoVfu1B58lNB27-WIl-VRlErspoR2wmbGuLE42h2aqQrP523EdS-EjBNPOU/s220/summary_02d36c15b225a0e91055e665b3c0fb83.png)
