The Blog Archive Google Gadget.

The Blogger Archive Gadget which comes as default with the official Blogger templates has some disadvantages. It does not show all the post titles. Only the titles of the present month are shown leaving the viewer to toggle the arrows to expand the list to see the other titles.


Here is a Google Gadget incorporating Google AJAX API code to retrieve a list of all your post titles from your post feed (Please wait till whole page loads to see it in action) :



The features of this gadget are.............

Blog Archives Google Gadget Features

1. Shows All Post Titles.

2. All Post Titles linked to their pages (permalinks).

3. Occupies small space on blog. Width and height can be customized.

4. Can be put in a post also (unlike Blogger gadgets).

5. Can be styled to match blog colors.

6. Contains official Google AJAX code.

7. It scrolls downwards automatically.


If you would like such a gadget for your blog drop me a mail at :

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.

Shows All Posts Blogger Gadget Installer.

The Blogger Archive Gadget shows only the post titles of the latest month (in Hierarchy mode). The rest of the months and post titles are hidden behind small black arrows which have to be clicked to reveal them.


The Feed Gadget shows only the latest five posts if used along with your blog feed. Here is The "Shows All Posts Blogger Gadget Installer" which when added to your blog enables your blog readers to add/show ALL your blog posts in their blog.


This gadget can increase traffic to your blog and also after installing it on your blog you can with one click add all your post titles as a blog archive on your own blog.........

1. MODIFY FEED TO JAVASCRIPT CODE

Paste the code below in the place shown in Step2 after modifying it as follows :

Change 'MYBLOG' to the actual subdomain of your blogspot blog. That is if your blog address is http://example.blogspot.com put in 'example' in place of 'MYBLOG' in the code below :




<div style="text-align:left !important;">
<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2FMYBLOG.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=1000&desc=0&date=n&targ=y" type="text/javascript"></script>

<noscript>
<a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2FMYBLOG.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=0&desc=0&date=n&targ=n&html=y">View RSS feed</a>
</noscript>
<a href="http://www.blogdoctor.com">Gadget by The Blogdoctor.</a>
</div>





This code converts your site feed (1000 posts) :

http://MYBLOG.blogspot.com/feeds/posts/default?start-index=1&max-results=999

into Javascript code at this site.

2. CONVERT ABOVE CODE TO ESCAPE HTML

The code generated in Step 2 is in HTML.  It will work if you paste it directly in a HTML gadget in your blog.  However we need to provide it to our readers in a gadget to place on their blog.  To do this we need to convert HTML characters like '&gt;' and '&lt;'.  You can do this the hard way by converting each character or the easy way by using sites which provide this service free.  Copy the code generated in Step 2 and paste it in the box provided at the HTML escape site. 

Click the Encode button.  A fresh code text box will appear lower down.  Copy the code in it.

3. CREATE GADGET INSTALLER

To add the gadget installer to your blog copy the code below and paste it in a HTML gadget in your blog AFTER :

a) Changing "MYBLOG.COM" to your actual blog name.

b) Copy code given in Step 2 above after the encoding process and paste where it says "PASTE CODE FROM STEP 2 HERE."

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="All Posts From MYBLOG.COM" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">

PASTE CODE FROM STEP 2 HERE.

</textarea>
<input
value http://www.blogdoctor.com="name=" infourl type="hidden"/>

<input
value = name="logoUrl" http://www.blogger.com/img/icon_logo32.gif type="hidden"/>
<div style="text-align:center;">
<input src="http://i52.photobucket.com/albums/g7/vinayak06/add2blogger_lg-1.gif" name="image" type="image"/>
</div></input
value></input
value></form>
<div style="text-align:center;">
<p>Click above button to get ALL posts from this site on your blog</p>
<li><a href="http://www.blogdoctor.me/2008/12/shows-all-posts-blogger-gadget.html">Click here to Get Similar Gadget for Your Blog.</a></li>
</div>

Put the title of the HTML gadget as "Get ALL Posts from THIS BLOG."
Save the HTML gadget. It will look like this :

4. TEST GADGET INSTALLER

Lastly test the Gadget installer. Click on the "Add to Blogger" button and you will get the "Add Page Element" window. Select your blog and add and you will see a complete list of your blog posts in the sidebar (upto 1000 posts).


Enjoy!