Make Sitemap Page in Blogger.

This post is NOT about adding your blog sitemap to Google Webmaster Tools. It is about creating a sitemap page in Blogger which contains the links of all the post titles in your blog.


Such a sitemap page is commonly seen in other blogs and prominently linked to from the Main Page. Blogger does not have such a sitemap page. Instead it has the Blog Archives in the sidebar. To save space these show just the latest month posts and the rest can be accessed through drop down arrows. This hides most of your posts from the noobie viewer. Creating a sitemap page is then the only option to show all posts in one page................

CREATE A PAGE IN BLOGGER

In Blogger there are no specifically designed 'pages'. Instead each post is put on it's own page by default. You should have Post Pages turned on in Settings------->Archiving. The Layouts template has this turned on by default. To create a page in Blogger :

1. Login at Blogger.com.

2. Click New Post button on Dashboard under blog title.

3. Post Editor will open.

4. Put title as "Blog Sitemap.".

5. In the post editor type in a few introductory words like I have done in my sitemap post.

6. Publish post.

7. Click Edit Post link to open post again for editing.

8. Click Post Options link in bottom frame of Post editor.

9. Change the date to any date in the recent past.

10. Publish Post.

11. The Post will not appear on Main Page since it has been backdated. This is the only way to change the post order in Blogger.

CREATE THE SITEMAP GADGET

To create the sitemap gadget see How to create a Table of Contents with Post Preview for Blogger. Follow the instructions under this heading : "TOC for ONE BLOG".


This will place the Contents table gadget in your blog. Use Click and drag on Page Elements subtab to drag the gadget below the posts column.


The gadget is now seen on ALL blog pages. The next step is to place it only on the Sitemap page. To do this first we need to get the permalink of the sitemap page we created in our blog. Look in the Blog Archives gadget and expand all the arrows to see the "Blog Sitemap" title we gave to the post. Click on the ttle to open the post page. Copy the permalink from the address bar of the browser.

PUT GADGET ON SITEMAP PAGE

To put the gadget on the sitemap page we use conditional tags. To do this :

1. Login at Blogger.com.

2. Click Layouts link under blog title on Dashboard.

3. Click Edit Html subtab of Layouts tab.

4. Click Expand Widgets Template checkbox on top of the Template Code box.

5. Wait for the page to refresh.

6. Scroll down to locate the code for the Table of Contents gadget.

7. Modify the code as shown below (Put in the red lines of code) :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "BLOG_PAGE_URL"'>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>

Replace the CAPS : BLOG_PAGE_URL with the permalink of your blog sitemap post.

8. Save Template.

LINKING TO SITEMAP PAGE

To link to the sitemap page from Main Page first you will need to create CSS navigational menu in your header. Then get the permalink of the Blog Sitemap post and put it in the code for the navigation menu tabs.

Free CSS Navigation Menus in Blogger.

A reader wanted to know how he could add a navigation menu bar in the header. You can add your most frequently occuring labels as tabs in the header (See header of this page) but if you want to add only four or five links like in the picture below :


here is an easy method to do so..............

CREATE POSTS

The first step is to create posts which will be linked to the various links in the menu bar. Create a post and title it 'Contact' and put in it all the information on how you can be contacted. If you want to remain anonymous you can put in an email form on the page. Publish the post and copy down it's link from the post title. Paste link in a Notepad file and save.


Create another post and title it 'Subscribe'. Put in it all your feed information and publish it. Copy down the link of the post to the same Notepad file and save. Create another post called 'Archives' and in it put all the links for your posts. Publish it and get it's link in same way.


Lastly create a 'Copyright' post and do the same. Login at Blogger.com and click 'View Profile' link on Dashboard. Your profile will open. Copy the link of the profile page from the address bar and save in the Notepad file.

GET IMAGES FOR MENU BAR

To choose the images for the navigation bar go here. They are available for commercial or private use and you can doownload them from free css navigation menus.


After this unzip the file and upload the images you want to a free host and copy their links to paste in the code in the next step.

ADD PAGE ELEMENT TO HEADER

The second step is to add a Html Page Element to the header. For this follow these steps :

1. Login at Blogger.com and click 'Layout' link on the Dashboard.

2. The Page Elements tab will open. Click Edit Html subtab of Template tab.

3. The Edit Html tab will open with the Template Code box.

4. Scroll down in the Template Code box to this code :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Change above code to :

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>

Save Template.

5. Switch back to Page Elements tab. Click 'Add Page Element' link in the header.

6. In popup window choose Html/Javascript option.

7. Copy the code below and paste it in the contents window (leave Title blank.) :

<style type="text/css">
/*- Menu Tabs J--------------------------- */

    #tabsI {
      width:660px; 
      margin:5px 5px 0;
      background:#000;
      font-size:93%;
      line-height:normal;
      border-bottom:0px solid #24618E;
      }
    #tabsI ul {
      margin:0;
      padding:10px 10px 0 10px;
      list-style:none;
      }
    #tabsI li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsI a {
      float:left;
      background:url("LINK_OF_tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsI a span {
      float:left;
      display:block;
      background:url("LINK_OF_tabrightI.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
      color:#FFF;
      }
    #tabsI a:hover {
      background-position:0% -42px;
      }
    #tabsI a:hover span {
      background-position:100% -42px;
      }
</style>
<div id="tabsI">
  <ul>
    <li><a href="BLOG_URL" title="Home"><span>Home</span></a></li>
    <li><a href="LINK_OF_CONTACT_POST" title="Contact"><span>Contact</span></a></li>
    <li><a href="LINK_OF_SUBSCRIBE_POST" title="Subscribe"><span>Subscribe</span></a></li>
    <li><a href="LINK_OF_COPYRIGHT_POST" title="Copyright"><span>Copyright</span></a></li>
    <li><a href="LINK_OF_PROFILE" title="About Us"><span>About Us</span></a></li>
   <li><a href="LINK_OF_ARCHIVES_POST" title="Archives"><span>Archives</span></a></li>
  </ul>
</div>

Replace the CAPS at the bottom with the links to the various posts created and paste the links to the uploaded images "LINK_OF_tableftI.gif" and "LINK_OF_tabrightI.gif". Save Page Element and you are done. View Blog. See picture below :



You can arrange it below the header by dragging it below the title on the Page Elements tab.


Enjoy!

Post a Book in the New Blogger.

Do you wish to write an online novel or book? You can customize the new blogger templates so that your blog looks and behaves just like a book.......

If you want to see an example of a book in the new blogger posted with this method, check out The Castle of Otranto, by Horace Walpole. (Thanks to Project Gutenberg for the text.) See the screenshot below :






The first step is to create a blog specially for this purpose. Login to your Dashboard and click on Create Blog. In the next screen choose a Title and a name after checking availability for the url. Choose a Title keeping the search engines and your book subject in mind. Click on Next and choose the Minima Template like I have done. You can choose any other template also. Click Next and make an Introductory post. You have finished creating the blog and in the next few steps you will customize it to give it the appearance of a book.

TABLE OF CONTENTS

: The first step is to create a Table of Contents which will show on the main page of your blog. For this go to Settings------>Template------->Edit Html.

Use the Download Full Template link to backup template to PC before doing anything.

Then scroll down in Edit Template text box till you come to :

<div id='main-wrapper'>
<b:section class='main' id='main' >

Replace the second line in above code with this line :

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

This will enable you to add another Page Element to the Blog Posts central column (maxwidgets='2') and will add a Add Page Element link to the Blog Posts central column in the Page Elements subtab of Template tab. Save Template.

Switch to Page Elements tab and click on Add Page Element link on top of the Blog Posts column. In the new window which opens choose Html/Javascript option. In the contents window paste the following code and save :

<table border="0" bordercolor="#000000" cellpadding="0" width="100%" bgcolor="#000000"><tbody><tr><td><table border="40" bordercolor="#fbf5c1" cellpadding="0" width="100%" height="500" bgcolor="#ffffff"><tbody><tr><td><p align="center"><strong>Table of Contents</strong></p>
<center>
<table cellpadding="5" width="169"><!--DWLayoutTable--> <tbody><tr> <td width="121"> <div align="center">
<pre><a href="http://newcastleofotranto.blogspot.com/2007/01/preface-to-first-edition.html">Preface to the First Edition</a></pre>
</div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-i.html">Chapter I</a> </div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-ii.html">Chapter II</a> </div></td> </tr> <tr> <td> <div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-iii.html">Chapter III</a></div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-iv.html">Chapter IV</a> </div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-v.html">Chapter V</a>
</div></td> </tr> <tr> <td>
</td> </tr> </tbody></table>
</center>
</td></tr></tbody></table></td></tr></tbody></table>
<em>© 1765 by Horace Walpole</em>

This will make a table of contents holding the links to the various chapters in your book. Replace the links with the links to your chapters. Also replace the copyright information at the end with your name.

USING THE NEW CONDITIONAL TAGS.

Next we will use the new conditional tags in the new blogger templates to banish Blog Posts from the main page. Once this is done only the Table of Contents will show up on the main page. To do this go to settings------>Template------>Edit Html and put a check in the Expand Widget Templates text box at the top of the Edit Template text box. Then scroll down till you come to :

<b:includable id='main' var='top'>
<!-- posts -->
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div class='blog-posts'>

Then paste this line instead of line xxxxxxxxxxxxxxxxx above :

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

Then locate the immediate next </div> and add </b:if> after it.

We will use the same strategy to restrict our Table of Contents to the main page. In Edit Template text box locate this code after expanding Widget templates :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

and add this line immediately after the second line :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Also add </b:if> before the immediate next </b:includable>
The whole code after modification becomes :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>


This will show the Table of Contents on the Main Page only.



To set up the sidebar sections go to Page Elements tab and click on Add Page Element and choose the Html/Javascript option. Then paste this code in the contents section :

<h2 class="sidebar-title">About the Author</h2> <h2 class="sidebar-title">About Me</h2> <a href="http://www.blogger.com/profile/4709592"> <span class="profile-img"><img alt="My Photo" width="58" src="http://photos1.blogger.com/blogger/7384/574/320/horace.jpg" height="80"/> </span> </a> <strong></strong><span style="font-weight: bold;">Horace Walpole </span><strong style="font-weight: bold;"></strong><span style="font-weight: bold;">
London, United Kingdom</span> <p class="profile-textblock"> I would have blogged this novel for NaNoWriMo if it had existed in 1765. Instead, I'm blogging posthumously. </p> <p class="profile-link"> <a href="http://www.blogger.com/profile/4709592">View my complete profile</a> </p>


<h2 class="sidebar-title">About the Book</h2>
<a href="http://newcastleofotranto.blogspot.com/">
<span class="profile-img"><img width="110" src="http://photos1.blogger.com/blogger/7384/574/1600/otranto.jpg"/></span></a>
<p style="font-weight: bold;">The Castle of Otranto</p>
<p class="profile-textblock">Published in 1765, this work is considered the first gothic novel in the English language; its supernatural happenings and mysterious ambiance were widely emulated in the genre.</p>

Replace the relevant data with your data. Add your pictures under ABOUT ME and a picture of your book under ABOUT THE BOOK. Add a short Introduction to both. Also replace the profile link with the link to your profile.

Other Settings to be adjusted are Settings----->Archiving----->Enable Post Pages---->Yes------->Save. Get rid of the dates by going to Settings------->Template------>Page Elements------>Click on Edit link in Blog Posts section and uncheck the Date, Time, Labels, Email Post Links and Links radio buttons. Show 1 post on main page. Also put © 2007 by in blog author settings. Save.

DISABLE FEED ACCESS :

In CSS part of your template add this code .feed-links { display:none; } before this tag : ]]></b:skin> This will prevent the Subscribe to Posts : Atom link from showing up below each post.

DISABLE "OLDER POSTS-HOME-NEWER POSTS" LINKS

To disable this go to Settings----->Template------>Edit Html and put a check in the Expand Widgets Template box and then scroll down till you come to this code in the Blog Posts section :

<!-- navigation -->
<b:include name='nextprev'/>

Delete this code and Save Template.

IMPLEMENTING A CSS TABBED NAVIGATION BAR AT THE TOP AND BOTTOM

Next we will implement a tabbed navigational CSS bar at the top and bottom in the header and footer respectively. To do this we will use images and code supplied by http://exploding-boy.com/images/cssmenus/menus.html. Download this file from his site :http://exploding-boy.com/images/CSSmenus.zip To do this first go to Settings----->Template----->Edit Html and scroll down in Edit Template text box till you come to :

<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='The Castle of Otranto (Header)' type='Header'/>

Change the second line to

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

This will enable you to add a Label Page element to the header. Also change 'true' to 'false' in the Header1 line. This will enable you to move the Label Page Element to the bottom of the header title. REPEAT THIS PROCESS WITH THE FOOTER. Save the Template. Go to Page Elements tab and Click on Add Page Element link in Header and choose Labels. Then drag the Labels element to below the header. Save. Go to Edit Html and click on Expand widget Templates box and scroll down till you come to Labels code in the header :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

Add the following lines after it :

<div id='tabsG'>

<ul>
<li><a href='http://newcastleofotranto.blogspot.com/index.html' title='Home'><span>Home</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/preface-to-first-edition.html' title='Preface'><span>Preface</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-i.html' title='Chapter I'><span>Chapter I</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-ii.html' title='Chapter II'><span>Chapter II</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-iii.html' title='Chapter III'><span>Chapter III</span></a></li>

<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-iv.html' title='Chapter IV'><span>Chapter IV</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-v.html' title='Chapter V'><span>Chapter V</span></a></li>
</ul>
</div>

Substitute your chapter links and Titles in proper places. Do the same in the footer and save Template.


The CSS code for the labels is taken from http://exploding-boy.com/images/cssmenus/menus.html. In CSS part of your template add this code :

/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
margin-top:15px;
margin-bottom:10px;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

save Template. If you do not wish to go through the lengthy process above you can download the Castle of Otranto Template from here.

Technorati Tags:post a book, css, conditional tags, navigation bar, table of contents,