Featured Posts Widget for Blogger with Thumbnails

Demo: 

1. Featured Posts Gadget Using the Blogger Gadget API

This Gadget is much easier to configure. The screenshot shows the various options available in the Gadget

I will explain a few of the Options

Name of the Featured Label – This is the name of the label from which the Gadget should pull posts from. This field is case sensitive, and if you don’t fill this properly, the Gadget wont work.

Maximum Length of Post Title – If the post title is more than this length(in characters), then the rest of it will be chopped off.If you don’t want to show the post title, set this to 0

Summary Length – The Gadget can display a excerpt of the Post. If the excerpt is longer than the summary length, then the rest will be chopped off.

Feed – Summary Feeds will be faster. You can change to Full Feed if you need YouTube Thumbnails, but it would be slower.

I need a Grid Layout. What should I do?

Use these Settings:

1. Maximum Length of the Post Title : 0
2. Snippet Style : Thumbnail Only
3. Post Meta Style : None
4. Extra Styling : Float Image to Left
5. Border Color : No Border

The other options can be set according to your needs.Use this button to add the Featured Posts Gadget to Blogger

2. HTML/JavaScript Widget for Featured Posts

This is the HTML/JavaScript Version of the above Gadget. This one has greater customizability and will properly blend with your Blog styles.

This has a Few Extra Settings:

1. Blog URL: This should be the URL of a blogger Blog. If you are installing the Widget on the same blog then you can leave this field blank . This field is useful for those who have multiple blogs..
2. Show Default Thumbnail – If this option is selected, and your post doesn’t have an image, then a default image will be displayed.
3. Thumbnail Margin – You can set a 5px margin to the image, so that the thumbnail stays apart from the post summary. You can override the margin by selecting No.(You can then manually style it using CSS)
4. Sorting – Helps you in displaying the recently published posts or recently updated posts from the featured Label.
5. Grid Layout – This button will automatically adjust the settings to give you a grid like layout.

Other Fields are similar to those in Method 1, or are self explanatory..Use this button to add the Featured Posts Widget:

 

Advanced Options for the HTML/JavaScript Featured Widget:

1. Default Thumbnail

If the Widget is unable to find an image in the Post and if Options 4 and 5 are checked, then the Gadget will use the following image by default

If you want to change this default thumbnail, then you will have to first upload the Thumbnail somewhere. The best place to upload is blogger. So create a new post(or edit an existing one) and add the image to the post. Now Switch to the Edit HTML view of the Post Editor. There you will find a URL which contains “/s1600/” in it. Copy that URL. Change /s1600/ to /s72-c/. So finally you will get some URL like

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHR-9SzBq0biaDGj_f_XWIK5_RT8zWlmkUcAAktsxEEjzYKrO5WHR5uRR7JSfoYhgeM9X8XSEN433tRQ6dPgAdXCxXRS5WwSM4xx7DYEbTm_-9C_LDPBMFaxS31psnEpQ88Tqa6luBKMM/s72-c/default.png

This is your default Thumbnail's URL. Now it’s time to tell the script to make use of this Image. For that Edit the HTML/JavaScript Widget(Recent Posts) and add the following variable:

var feat_defaultImage=”THUMBNAIL_URL_WHICH_HAS_/s72-c/_IN_IT”;

(Off course you will have to edit the above line)

If you are not sure where to add the variable, then add it just before

var feat_numberOfPosts

Save the Gadget and you are done.

2. CSS Styling:

If you are using CSS Styling, make sure that the Thumbnail Margin is set to None. You can also set the Thumbnail Float to None. This will prevent the Widget JavaScript from adding any Styles to the Post List.

You can add your CSS at Template Designer > Advanced > Add CSS

Some Sample CSS snippets are there in the comments.

3. Tracking the Widget Usage

I have appended a utm_src parameter to the recent post URLs.This will help you in tracking the widget usage from your Google Analytics account(Traffic Sources > Campaigns).

4. Remove the Powered By Link

If you can’t stand the powered by Link at the bottom of the widget, then you can hide it. To do that Add this CSS snippet :( :(

.bp_footer{display:none;}

If you don’t know how to add CSS read the CSS Styling (2) part in these Advanced Options.

If you like this Gadget, please share it with other Bloggers :)

Related Posts Widget for Blogger with Thumbnails

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails

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

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {float:center;
:none;
height:100%;
text-transfor
mmin-height:100%;
padding-top:5px;
 h2{
font-size: 1
padding-left:5px;
}

#related-post
s.6em;
font-weight: bold;
color: black;
oman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
font-family: Georgia, &#8220;Times New 
R
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfwUUJPCJyl3DPtKxphMJ_i38-5uSXtvg3GK4dO9kocAgDfSqjHw7LCAGx9FngB2uyejMgtpPLA7F_eDEg_nxkypbckeht2IlKKnKOiIyywAoB27qTCv59UCLqLo8B7XiZt0PLDdGGK4/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</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

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

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

var maxresults=5;

you will also have to edit the posts per label(it should ideally be one more that maxresults)

max-results=6

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

var relatedpoststitle="Related Posts";

6.To change the default thumbnail, you can edit this line of code

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfwUUJPCJyl3DPtKxphMJ_i38-5uSXtvg3GK4dO9kocAgDfSqjHw7LCAGx9FngB2uyejMgtpPLA7F_eDEg_nxkypbckeht2IlKKnKOiIyywAoB27qTCv59UCLqLo8B7XiZt0PLDdGGK4/s400/noimage.png";

7.To Change the Colour of the Splitter Line , edit

var splittercolor="#d4eaf2";

To change the other colours and all you will have to modify the CSS

If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.

that is lines

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

and

<!-- remove --></b:if>