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!

Flash for Blogger.

Flash files can be embedded in your template or posts. Though it can slow down the loading of your blog.........

you can use small flash files for your header as well as for navigation links within your blog. To do this first upload your flash file to a free host like Googlepages. If for some reason you cannot get an account at Googlepages you can create your own Google Group. This will give you 100 MB free space for your files. See Google Groups Tips and Tricks for Bloggers.


After uploading your flash file copy down its URL or link. Then use the following code :

<object width="150" height="340">
<param value="MYFLASH.swf" name="movie"/>
<embed width="150" src="URL OF MYFLASH.swf" height="340">
</embed>
</object>

Change the width and height as per the dimensions of your file. Instead of 'MYFLASH.swf' and 'URL OF MYFLASH.swf' put the relevant details of your flash file and paste the code in a Html/Javascript Page Element in the sidebar. See how to add widgets to blog. For example I have a flash navigation widget at the end of the right column of this blog. See it here also (below) :

Click on the various links to open them in a new page.

FLASH HEADER

To add a Flash header to your blog first add a Page Element to your header as described in How to add a picture to a Beta Blog Header. Then click on Add Page Element and choose Html\Javascript option and paste the above Flash code in the contents section and save. First upload your Flash header file to a freehost like Googlepages or Google Groups and then modify the code given above and use it. See this header below (Click on image to enlarge it)


See it live here.

Technorati Tags:flash, blog header, navigation links,

Making an Image Link.

There are several situations where you may need to construct an image link in your blog. The most frequent is when you want arrows pointing to the next page or the previous page as navigation links.......

Other uses are when you wish to post the image as a preview. For example the image of a bookcover used to link to Amazon.com.

WHAT IS A LINK A link in a document to information within that document or another document. These links are usually represented by highlighted words or images. When a reader selects a hyperlink, the computer display switches to the document or portion of the document referenced by the hyperlink.

You can also use logos/banners as image links to other websites represented by the logo. I have covered this in Adding Banner links. The basic simplest link code is :

<A href="URL OF SITE">TITLE OF SITE</A>

CREATING THE IMAGE/LOGO

To create the image you can use online generators such as cooltext.com. These are websites which allow you to create a logo or banner for your blog. Most of them are free, others attach their own logo to the image created on their site. You can search for these sites by typing logo/banner generator in your Google search bar. After creating the image right click the image and choose Save Image As to save the image to your hard disk.

You can also create your own image using Paint or any other image editing program like Paintshop, Photoshop or Irfanview. After creating the image save it to your disk.

You can also search for and download navigation graphics like the following :

UPLOADING THE IMAGE

After creating and saving the image you have to upload it to a freehost on the Internet. This is because though your PC may be connected 24/7 to the Internet it is not a server which can serve your images whenever requested. Googlepages offers 100MB free space per account and you can create five such accounts at present. Other freehosts are Photobucket.com and Imageshack. You can upload your images to Imageshack directly from the link at the bottom of the right column in this blog. Another freehost is Flickr.com

You can also use Blogger to host your images by uploading them in a post. After uploading click on Edit Html tab of Post Editor and you will see the code for the image like this :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s1600-h/Blackberry.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s400/Blackberry.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5024576285117553666" /></a>

From this image code extract the url for the image which is :

http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s1600-h/Blackberry.jpg

After this Publish that post as a draft. When you publish post as draft your viewers do not see it though it is available. In the New Blogger when you delete a post you are given option to delete the images within the post. If you do not delete the image there is no guarantee that they will not be deleted.

If you have uploaded your image to a free host then copy down its link which will be in same form as above. You can test the link by pasting it in the address bar of your browser and hitting Enter. The image should display in your browser.

MAKING THE LINK

We have the image uploaded to a freehost and we have its link. Now to constructthe link code which is :

<a href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>

Replace URL/LINK YOUR IMAGE IS POINTING TO by the URL of the site your image is pointing to. Replace LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE with the link of the image you extracted from the blogger post or the link of your image at the freehost. Replace TITLE OF SITE IMAGE IS POINTING TO with the title of the site the image is pointing to.

Alt tags provide alternative text for images to visually impaired individuals, who reach the net through audio-based browsers. They also provide alternative text for individuals who have disabled image loading in their browsers.

GIVE YOUR LINK A TITLE

To give your link a title include a title tag. This will show the title when the mouse is over the link and also serve to give directions to the viewer eg:

<A title="GO TO THIS SITE FOR A WONDERFUL EXPERIENCE" href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>

LINK IMAGE TO A POST

To make an image link to a post in your blog use this code :

<a href="PERMALINK URL"><img src="URL OF PICTURE" alt="POST TITLE"></a>

Instead of PERMALINK URL paste the URL of the post. This can be obtained by opening the post in a browser and copying the link from the address bar.

NAVIGATION ARROWS FOR NEW BLOGGER

Perhaps you are tired of the Older Posts and Newer Posts links at the end of each post in the post pages of the New Blogger. Then you can replace them with navigational arrows as follows :

Go to Template------>Edit Html and backup the Template.

Then put a checkin Expand Widgets Template checkbox and scroll down till you see this code in the Blog Posts section :

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>

Replace the code in red with the following lines :


<img alt='OLDER POSTS/NEWER/POSTS/HOME' src='URL OF NAVIGATION IMAGES' />

Technorati Tags:older posts, newer posts, home, navigation links, image links