Recent Posts with thumbnails for blogger

What is special about this gadget?
1) Like many other recent posts widgets this one also displays your recent posts with summaries comment numbers etc..but yea with a greater degree of customization

2) Image thumnails - Many of you might not have heard of MediaThumbnails. When you add some image to blogger,blogger automatically generates a thumbnail image of a small size 75 x 75. You wont see this small image anywhere but we are using this small sized images for post thumbnails.As i said this is somthing unique.All the recent post widgets till now(till the time i made this post lolz..) uses the original big images and scales them down using css.This means that your computer will have to fetch all of those big images.But with this widget we are fetching the media thumbnails.The media thumbnails as i said are of small resolution and hence very less size(somehere between 1kb-10kb)
The advantage of using media thumbnail is that out widget will load much much much faster than the other ones available till now.

3)You can display the recent posts of any blogger blog on your sidebar using this widget(display is not limited to your blogposts alone)

4)Highly customizable. (you can understand that when you actually install it.. :)

5)This is all that i have to say about the widget.. You can checkout more of its features by intsalling it onto your blog..Actually i now feel that it has too many options.. ;)

How to Install this new Advanced Recent Posts Gadget ?

Method 1 Gadget Using the new Gadget API

Related Posts Widget For Blogger

The related posts widget will show a new related posts section below your post page.The related posts are fetched from the those posts having the same label as the current post.

To implement the related posts widget you will have to follow 2 simple replacement steps.

1.Login to your blogger account and get into your Dashboard

2.From there goto Template > Edit HTML and expand your widget templates(option on the right)

3.Now find this line of code

</head>

and replace it with

<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxYTVnIz2-iVzqaqDsEkdAC3HwHXVs-Fnkn8IUYPgmiMl-aVkOqEatflh2GTez8oRfKrdmXSA-5YK-XROO8oY5V55DG7tto-dicxufmgu1yi5fFicbJs-f3aM2pW9DWpSzF-t9vU-NvA/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
b:if>

head>

If you want to change the title of your widget you can edit this line of the above code 

var relatedpoststitle="Related Posts";

If you want you can edit the blue and black colors present in this code

4.Now find this line of code

<div class='post-footer-line post-footer-line-1'>

 If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

 Now immediately after any of these lines(whichever you could find) place this code snippet

        <!-- Related Posts Code Start-->
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast != &quot;true&quot;'>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html' style='display:none'>Related Posts Widget</a>
        <script type='text/javascript'>
        var currentposturl=&quot;<data:post.url/>&quot;;
        var maxresults=5;
        removeRelatedDuplicates(); printRelatedLabels();
        </script>
        </div>
        </b:if>
        <!-- Related Posts Code End-->

var maxresults=5;

this line determines the number of related posts that are displayed..and by default 6 posts are fetched from each label.
Now you should have a working related posts widget on your blog.If you want to customize the look and feel,then you can alter the CSS rules.
source : http://www.bloggerplugins.org/

Related Posts Widget with Thumbnails for Blogger

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

</head>

and replace it with

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
b:if>

head>

 3.Now Find

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

Now immediately after any of these lines(whichever you could find) place this code snippet

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>b:if>b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger'http://www.bloggerplugins.org/' style='display:none;'>blogger widgets

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

To change the colors and all you will have to modify the CSS
source : http://www.bloggerplugins.org/

Blogger Releases the new version of the Label Widget

Blogger,as a part of its 10th Birthday celebrations, has now released a new version of the label gadget.This one is much better that the old version.

What is new?

1. It comes with a Label Cloud.
2. It lets you choose which labels are to be displayed.
3. You can customize it further using CSS.

Drawbacks

1. The cloud just has 5 variations.All labels will be divided into 5 classes depending on the usage of these labels.
2. It would have been better if there was a bigger number of classes.

How to Customize?

You can customize the looks further by using CSS..As i said it has 5 classes of clouds..You can add CSS styles to each of them.

Here is a sample Style which will give a bluish look for the cloud.

.label-size-5 a {color: #2789ce; /*color of a label of class 5*/
font-size: 3em;

text-decoration: none;
   }
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
   }
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
   }
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
   }
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
   }
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
   }
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
   }
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
   }
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
   }
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
   }
  

Here all of these CSS styles are customizable.You can change the colors and font sizes of each of the 5 classes.

color: #2789ce; is responsible for the coloring of each of the classes.You can change it appropriately with some other hex color code or something like color:red;

You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class.. (em is a unit of font size just like px)

You can remove those comments if you want(eg: /*color of a label of class 2 on hover*/ is a comment)

]]></b:skin> 

If you are not impressed by the customizability of this blogger label cloud,try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger

Social bookmarking elements after each blog post

Update:-Facebook Icon Added

Social Bookmarking Icons for Blogger - The social bookmarking blogger widget will add neat social bookmarking icons below each of your posts so that your readers can bookmark your posts at various social bookmarking sites like digg,stumble,magnolia,delicious,google,yahoo etc..

 To get this working on your blog do the following steps

1. Goto Blogger Template>Edit HTML back up your template and expand the widget templates.
2. Now in your template replace

<head>

with

<head><script src='http://files.bloggerplugins.org/simpletricks.js'></script>

    3. Now find

 <p class='post-footer-line post-footer-line-3'>

Or if that is not there then find 

<div class='post-footer-line post-footer-line-3'>

 and place the code from the following code just below any of these lines[whichever is present in your template].

<!-- Social Bookmarking Icons Start  www.bloggerplugins.org-->
<style type='text/css'>
.bookmark img { border: 0;
padding:0px; }
.bookmark a:hover {
position: relative;
top: 1px;
left: 1px; }
</style><span class='bookmark'><table align='left' border='0' cellpadding='0' width='100%'><tr><td style='vertical-align:middle' valign='middle' width='30%'><div expr:id='"sbtxt"+data:post.id'>Bookmark this post:<span style="display:none"><a href="http://www.bloggerplugins.org">blogger widgets</a> <a href="http://www.bloggerplugins.org/2007/09/social-bookmarking-elements-after-each.html">Social Bookmarking   Blogger Widget</a></span></div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script></td><td><a rel="nofollow" expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' target='_blank'><img alt='StumpleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-kDDYsqJUhp1jukXtMdriUED-YdX6oylvoIKmnM3klKK5xqQ9CThXBT0gJFycDyg9LCSecpUyjyOMbVT_SIhdHZqjK_jOpJPsnM947cyOk2Y-0Hf2cpog59uD2PjDdsKSgDXljx4kJQ/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://digg.com/submit?phase=3&amp;url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' target='_blank'><img alt='DiggIt!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyiyX3mg8SGmMQ_wGFpH_gaSko1U7CkMoSJ436OuRBGU2x6253S23_4ppcvhcEnANkls2Vmi4hTg2WpqXcqvOcq5XDQ-DEjlACL7AWfFjRmLWxOjehuNrMtVCQLmVoXChcJ1CXpO9eWSw/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Del.icio.us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDhhCQeOXQaMhzQaAfbqECN0cMuYI39YkSflkpZPsIS062q5xIQcAmneF3NcoqfLInEXDvx5D9M9LD2nDy7k4vYa58wq1FcDRfFVDcwgXh7mTM8P1LNa1BGxdKfD3h7vo-i7LXd1W0pc/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' target='_blank'><img alt='Blinklist' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzcY0MDbqH6AGqMFZkRD3sEZ9u2N1j2i1LcrKhSI__ymKp-EmvNs5hcxJdeF4MZbPreqARU94cnwd_jT5EIQvU8h0iv_yQD6I2m3NCsf-CVXSTq04QzHW2I3iEtHWM07HXk6jhaZHCw4/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZhuxNfW9cPYo_AShJmU8EtHb0U5yBwZx27GnhSuNj0rZaooYrHuQ2Sjtk7E8R60OwQLup18vYTawzvnk6QJ1okRmKUdh9ReykQtXcZc7ciD66RW6hYQlZueY3xFOYEn0F9V1BgYvFyvg/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' target='_blank'><img alt='Furl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHyFVgq8V-2gjqjppbgutoU1CWVrD1j2OiAmH799RAAr2lkkiy-pUCX3Om2s3T6Xrkl0RyIpFSPZHkreBJd3qp29Xv_KpQ5YvsIwPxSktukj8zjJmL051Qf4MSzX0bqk9t3hVSExAk8s/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIh63niVuaW84ZbqVkY1nZm3obAMMZYV2Ie69pCnDIVd_74WvH1n0wRkZKHtlHWH4EdEKEYyhkgp-uApbejjhQPOE7k0orLZFPh7JrDGkGVtgdX7RhZe60cbzd3Y9drGIEjV_snRwzb4/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank'><img alt='Simpy' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK-VvUTPPOz6wKZWSo2CMkCwtHSyWvXv224OUK735Okb5Vp291qk74RlajTuc6wVGSRu8tjNxGDUxc7TYXFGZxWRoK0CSWsvWXKWE-MNj2iKrnGlmLAeHxZPXLYxCjwcjOazD5lucF1rA/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;title=" +  data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' target='_blank'><img alt='Spurl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA89ZlHqvpO__c3F5x4OHWKqBnn6ZJom0WNeH8L49OMPOWUfn5ro2rtHTEHXng9hOz5iOfFvuuN6vpA_2THuOhxVaD8dCRE3YSepq4qhIcL5oFBC7yjUMf191A6Jeut6rSxMIZURQ7vLk/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",17);"' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0QZkg3bSmvFWztowhU3Bc4gvb9MNMkl8gES9h6p_FWgtI1obnmp9nkwDH0sI5mm8Wu8LQkileGO_D5CnjDvgrfSsZEdsTaYWGkNGshj8k5o8cfzvQ7SCRPU7HCkZigREW7pnPZp5bQM/?imgmax=800'/></a> <a rel="nofollow" expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url +  "&amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",20);"' target='_blank'><img alt='Google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTloWfNfYw3haBgMsW1gll1TegZlWBPJsNPXAR1CzoWA_1rsdy_oSyduIhyphenhyphenKRuFTshjPzHF6tCZR7pic56_l8RxeIQUZXGg2UqND0sw48HwiGLqW4mA6wMCJOZh0ROAVI2fEU6CrQ9OI0/?imgmax=800'/></a> <a expr:href='&quot;http://tools.bloggerplugins.org/twitter.php?url=&quot; + data:post.url +  &quot;&amp;title=&quot;+data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPXij-rIiL9tgr3uE47PoFlxn3TYwNhYWR5u_cCFi9yTUn7yWQCRPkCUcBmJBr9fdiLqlTKCxDonH56azNozS6GItbLLI9NoIlsxzkAhY8fpfZFy3Fj38Wq1B5nMu1N-ADjH6MdPDS45A/?imgmax=800'/></a> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,22);&quot;' rel='nofollow' target='_blank'><img alt='FaceBook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJczjSkXNEfCHq833WQulgAuNiEjIo2y5v6dCkVISt_T9HyDk9LOK6Qmtms5fS39hxtY_B96gaTOH1uweJA8_DoTF3rGFqRE4rlnllea-AXPyUx76AgQ1uR_QUxLGWdillShBPmhCuxl0/s400/fbicon.png'/></a>
</td>
</tr>
</table><br/>
</span>
<!-- Social Bookmarking Icons End http://bloggerwidgetbox.blogspot.com-->

if every thing went correctly this is what you should get

Bookmark this post:

 
and also some mouse over animation as you see on the icons below this post.. Now you can remove the unwanted buttons by removing the corresponding <a expr:href=....</a> tag.
You can also change the button images if you like.