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 :

Random Rotating Post Gadget with Excerpt.

If you have a blog with more than 20 posts than this gadget is just the thing your blog needs :



Click on above picture to enlarge it. You can see it above the posts column in this blog when the page is completely loaded. Features :

• 1. Shows one post title at a time.
• 2. Links to the post.
• 3. Shows post excerpt also.
• 4. Every 5 seconds shows a new post.
• 5. Cycles through all the posts in the blog.
• 6. Starts a new cycle at the end of the list.
• 7. Once loaded continues cycling even when not connected to the Internet.
• 8. Uses official Google AJAX technology.
• 9. Can be used on other blogging platforms (not tested).
• 10. Hovering with mouse cursor over the post title halts the rotation till mouse moves off the gadget.

............................................



Bloggers with plenty of posts in their blogs face a major problem in showing all of them to the viewers. Some solve this by changing the settings to show all the posts in Main Page. This slows down the loading speed of the blog and can turn away visitors.



The Blog Archive gadget which comes as a default with the standard Blogger Layouts shows only the posts in the blog for the present month. The rest of the posts are hidden and can be seen only by clicking the black arrows to expand the archives. This saves the real estate on the blog page but to the new visitor hides the previous months blog posts.



One can eliminate the dates in the Blog Archive and show all your posts in a blogger gadget but this makes a very long sidebar and if you have posts with little content this may make the blog seem lopsided.



To save space and yet show all posts one by one this gadget uses official Google AJAX API Feed technology and the Dynamic Feed Control. It fetches the post titles and data from your blog and displays it in the gadget. To install this on your blog :

1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click Add Gadget link in sidebar on Page Elements subtab of Layout tab.
4. In popup window scroll down and click Html/Javascript gadget.
5. In Contents window copy the code below and paste after modifying it :

<style type="text/css">
    .gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 20px;
  border: 1px solid #BCCDF0;
}

.gfg-title {
  font-size: 24px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 0px;
}

.gfg-subtitle a {
  color : #3366cc;
  display:none !important;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
  display:none !important;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight { 
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
 * FeedControl customizations.
 */

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 24px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
 * Easy way to get horizontal mode, applicable via js options to gadget.
 */

.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
 * FeedControl customizations.
 */

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}
body {
      background-color: white;
      color: black;
      font-family: Arial;
      font-size: small;
      margin: 0;
    }
    #feedGadget { 
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
</style>
<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" 
 type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

  <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITLE ~ Random Posts."});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>
<div id="feedGadget">Loading...</div>
  <div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>

In the above code make changes in the following parts :

 <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITLE ~ Random Posts."});
    }

Change "MYBLOG" to actual blog subdomain and "BLOG_TITLE" to actual title of your blog. Then paste the modified code in the Html gadget and save the gadget.


Get your AJAX API key and put it in above code instead of 'PUT_AJAX_KEY_HERE'.


Lastly click and drag the HTML gadget from the sidebar to above the posts column. See picture below.



This is because the width of the gadget is more suited for the posts column than the sidebar. Save the Layout. View Blog.


If you do not want to save space you can show the whole Table of Contents with post preview.

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!

List all the posts in alphabetical order in Blogger.

PROBLEM : How can you list all the posts in your blog in alphabetical order?

SOLUTION :................


We will use Yahoo Pipes to solve this problem as we did in How to Display Combined Labels in Blogger?

GET BLOG FEED

First we get the blog feed URL. In this case we will use :

http://betabloggerfordummies.blogspot.com/atom.xml

Then to include all posts we add this parameter to the above feed url :

?redirect=false&start-index=1&max-results=999

This will fetch 1000 posts from the blog. Now the complete feed url is :

http://betabloggerfordummies.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999

To get your feed url simply replace 'betabloggerfordummies' in the above url with your blog name.

YAHOO PIPES

Next get a Yahoo account and go to Yahoo Pipes. Click Create a Pipe to open the interface. In the sidebar click Source and from drop down list drag and drop a Fetch Feed module onto the Interface. In the Fetch Feed module paste the URL for the blog feed shown in above step. See Picture below






Next click on arrow next to 'Operators' in the sidebar. From the drop down list choose 'Sort' module and drag and drop that onto the interface. See Picture below



In the Sort Module choose Sort by "item title" in "ascending" order. Drag the blue circle on the bottom border of the Fetch Feed module and connect it to the Sort Module. Then connect the Sort Module to the Pipe Output Module.



Wait for the results to appear in the bottom grey Debugger pane. Click Save Pipe at the top right of the interface. Give it a name and OK it. Next click Run Pipe link at the top center of the interface. You can see the pipe I made here.


Open the pipe by clicking the link above. Click Clone link at top and a copy of this pipe will be added to your Yahoo Pipes. Click Edit Source link and it will open in your interface just as shown in above diagrams. Then in the Fetch Feed Module paste in your Blog Feed url as shown in first step and you have your own pipe. Save it with your own title/name. Click Run Pipe and you will see the output of all posts sorted alphabetically from your blog.



At the top click the 'Get as Badge' link and in popup window click Blogger and the Add Page Element window will open and you can add this list to any of your blogs.

SORT LABEL POSTS ALPHABETICALLY

To sort Label Posts alphabetically paste the Label Feed url in the Fetch Feed module. See the Sort Label Posts Alphabetically Yahoo Pipe I made for the label Template in this blog. Clone it as shown above. In the Fetch Feed module text box replace 'betabloggerfordummies' and 'Template' with your blog name and label name to make your own label pipe.



Enjoy!

Change Post Formatting According to Author.

If you have a Team Blog made up of two authors you can change the formatting of the posts written by one author to differentiate them from the other author's posts. In a Team Blog the About Me Profile widget is replaced by a Contributors List widget. This lists the name of the authors linked to their profiles.



Note down the names since we will use one of them in implementing this hack...........

Step 1. DEFINE THE STYLE

The style of the text and the background color are defined in the CSS Part of the Template. So we will paste the following code in the Template (You can add more style parameters if you want to) :


#author1 p{
margin:.25em 0 0;
color:#CC3300;
text-decoration:bold;
background:#aad4ff;
}


Login at Blogger.com and click Layout link on Dashboard. On Page Elements tab click Edit Html subtab of Layout tab. In Edit Html tab click Download Full Template link to backup your Template to PC. Copy and Paste the code given above immediately above ]]></b:skin> tag in the Template Code box. Save Template.

Step 2. IMPLEMENT THE STYLE

First step here is to expand the Widgets Template. To do this click the Expand Widgets Template Checkbox on top right of the Template Code box. Scroll down in Template Code box to this code in the Blog Posts expanded widget code :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<div class='post-body'>
<p><data:post.body/></p>


CHANGE ABOVE CODE TO :


<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:post.author == "vin"'>
<div id='author1'>
<p><data:post.body/></p>
</div>
<b:else/>
<p><data:post.body/></p>
</b:if>


Instead of 'vin' put in the profile name of an author of the blog EXACTLY AS IT APPEARS ON THE CONTRIBUTOR's LIST WIDGET ON THE BLOG.



Save Template. Clear Cache and View Blog.

Different backgrounds in each post!

A background put in your blog serves as a sort of branding for your blog. For example if it is a travel blog a background picture of the Eiffel Tower can serve very well. You can also have transparent backgrounds in your blog over which the blog text scrolls.



What if your blog posts are on different topics? Then you can put a different picture as the background for each post.......

SOURCE THE PICTURE

First step is to search for an appropriate picture for your post. Use Google to search for copyright free images.

UPLOAD PICTURE TO FREE HOSTING

Next step is to upload the picture to a free web host and copy down the link. You can use Googlepages or Photobucket.com for this.

PUT CODE IN POST TEMPLATE

1. Login at Blogger.com.

2. Click on Settings link on the Dashboard.

3. Click on the Formatting subtab of the Settings tab.

4. Scroll down in the Formatting tab to the Post Template at the bottom.

5. Paste this code at the top of the box :

<div style="background:url(LINK_OF_PICTURE) no-repeat;">

and paste this code at the bottom of the box :

</div>

6. Save Settings.

7. Click on Posting tab at the top.

8. The Post Editor will open with the code already in it.

9. Replace 'LINK_OF_PICTURE' with actual link of the picture uploaded to your free host. If you do not want the picture to repeat delete the "no-repeat" in the code line.

Type in your post before the </div> tag at the bottom, give it a Title and Publish.


See the example in this post.

Enjoy!!