Gadgets for Blogger Dynamic Views

Blogger has introduced 6 awesome Gadgets for the Dynamic Views/Dynamic View Templates. The Widgets appear as a Floating Dock and expands when the user hovers over it.  These Gadgets matches up with the look and feel of the CSS3 powered Dynamic Views.

 

These are the list of Gadgets that Blogger has added to Dynamic Views

1. Blog Archive
2. Followers
3. Labels
4. Profile
5. Link List
6. Subscribe

You would already be familiar with the first 5 gadgets, but these are pretty different from the normal Gadgets. These are interactive and open up when the user hovers over the dock thereby saving some valuable space. The last gadget in the list(Subscribe) is a new Dynamic View Gadget which would be shown if you have added the Follow by Email or Subscription Gadget.

How to add these Gadgets to Dynamic Views ?

You just have to go to the Layout Page and add these Gadgets as you normally do. The docked gadgets will appear on your Dynamic view template or on your Blog’s Dynamic View .

I’m not using a Dynamic View Template, but you can see the new Gadgets in action on my Blog’s Dynamic View Pages. You can check out the demo at

http://www.bloggerplugins.org/view

If you want to see how these would look like on your blog. just append view to your blog’s main URL.

e.g : http://www.bloggerplugins.org/view

If you are still new to Dynamic Views, do check out this video

Source: http://www.bloggerplugins.org/2012/03/gadgets-for-blogger-dynamic-views.html

Recent Posts Widget with Thumbnails

At least some of you would be familiar with My "Recent Posts with Thumbnails" Gadget for Blogger. I had got so many complaints that the Gadget fails to load or has some issues. So I decided to make a Widget version of the same.

Why the other Gadget fails at times?

The other gadget is made using the Gadget API. The API renders the gadget as an iFrame with all the parameters appended to the iFrame URL. When the iFrame url becomes too big, browsers have issues rendering the gadget. This primary reason behind this is that the API appends so many style parameters to the iFrame URL thereby making it pretty lengthy.The current page url is also a parameter.That is why some people complain that it is working on the home page, whereas it doesn't work on some of the post pages. The reason is that your home page url is shorter in length than your post page url. So it is almost impossible to make the gadget error free.

So What now?

This new Widget doesn’t rely on the Gadget API, and is not loaded as an iFrame. This is a plain JavaScript widget, and will work across all browsers.

What’s special about this new Widget?

If you are good at CSS, you can make the widget exactly as you want. There is no limit in customizing this Widget. This doesn’t mean that it is useful only to those who are familiar with CSS. The Widget by default will inherit your Blog’s Styling. So it should look pretty neat with the default Styling

Options in the Widget Installer

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. Number of Posts – The number of posts displayed in the Widget
3. Maximum title Length – This option can be used to chop off really long Post Titles. If a post title is longer than this length, the widget will chop off the rest of the title
4. Show Thumbnail – It’s pretty much obvious from the name
5. Show Default Thumbnail – If this option is selected, and your post doesn’t have an image, then a default image will be displayed.
6. Thumbnail Dimension – The gadget can generate square thumbnails of any size. Use this option to set the dimension of the thumbnail.
7. Float Thumbnail to – This option can be used to align the image thumbnail to the left or to the right
8. 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)
9. Show summary
10. Summary size – If summary is more than this length, then the widget will chop off the rest
11. Show post date
12. Show Comment Number
13. Show Read more Link
14. Read More Text – This is the Text Shown on the Read More Link
15. Use Full Feed – By default the Widget will use the Blogger Summary feed which is smaller in size. If you select the Full Feed option, it will use the Full Feed which is bigger in size, and hence the Widget would get slower. The advantage is that, you would get thumbnails of YouTube videos that you have posted.
16. Sorting – Helps you in displaying the recently published posts or recently updated posts.

Now that you are clear with the options, use the below button to add the Widget to your Blog.

Advanced Options:

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/AVvXsEj7FMd9dkP8OQDazVTyjwp2_J3mobeb1bGOFA0QgnX2lHQ-E_liEHPRhTdf9pPEmdtI_GFa3xIsgmZaJ5TN3k0jaAzJsidonuJ0IkmpTU6vQLfZBnUOAWipI8upnabslbryIPLu_5HGIHw/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 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 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.

Hmmm at the moment, I’m a little lazy to create a Demo Blog. You can expect that sometime soon.

If you have any doubts or questions or suggestions, feel free to comment here and I will try my best to reply to each of your comments.

I know that many bloggers are having issues in using the old Gadget. So kindly help others by sharing this new post :)

Source: http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html

Featured Posts Widget for Blogger with Thumbnails

This Widget Displays posts from a particular Label on your  blog’s Sidebar. The display can be customized just like the Recent and Random Posts Widgets. The Widget includes resizable Post Thumbnails.

I have made two different versions of this Widget:

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/AVvXsEj7FMd9dkP8OQDazVTyjwp2_J3mobeb1bGOFA0QgnX2lHQ-E_liEHPRhTdf9pPEmdtI_GFa3xIsgmZaJ5TN3k0jaAzJsidonuJ0IkmpTU6vQLfZBnUOAWipI8upnabslbryIPLu_5HGIHw/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 :)

Source: http://www.bloggerplugins.org/2011/09/featured-posts-widget-for-blogger.html

Popular Posts & Blog's Stats widgets for Blogger

It has been almost 2 months since Blogger introduced the “Stats” feature. Now they have gone a step further by introducing 2 Gadgets related to the “Stats”. Blogger has now got a “Popular Posts” Gadget and a “Blog’s Stats” Gadget.(These are currently available only on Blogger in Draft).

Popular Posts Gadget

Blogger has always lacked such a gadget. There used to be some Yahoo Pipe based widgets, which list out the most commented posts. But these were pretty slow and inefficient. Now Blogger has got this Official Popular Posts Gadget.As the name indicates, the Gadget displays a list of popular posts on your blog.  Here is a Screen Shot of the Gadget Options

 

Blog’s Stats Gadget

The Blog’s Stats Gadget displays your Blog’s stats in one of the different graphical(or textual) formats. The Gadget Options will give you a better idea

 

How to add these Gadgets to your blog?

These Gadgets are not available in your regular Dashboard. So login to Blogger in Draft at http://draft.blogger.com . Now Go to Design > Page Elements and Click on the “Add a Gadget Link” and you will see the 2 new Gadgets

What do you think of the ne Gadgets?

Source: http://www.bloggerplugins.org/2010/09/popular-posts-blog-stats-widgets.html

Random Posts Widget for Blogger with Thumbnails

The Random Posts Gadget will  display a list of Random Posts(from your blog) on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs. The Gadget inherits styles from your Blog. But you can override the colors if you want(this was done to support third party templates which doesn’t have the skin variables properly designed).

About the Various Options

Maximum Length of Post Title – Your post titles can be too long. In that case you can limit the title to x  number of characters using this parameter.

Snippet Style – You can display the snippet with Post Summary, Post Thumbnail , or both or none. 

Feed – The default Option “Summary Feed” will scan your post summary feed. This is the faster and efficient option and i would advise you to opt this one. If you choose  “Full Feed” , the gadget will be slower but you will get YouTube Thumbnails also.
Note:- If you want to grab the images or YouTube thumbnails, then you should have “Site Feeds” set to Full. If you opt for the Media Thumbnail only, then the short feed will be used by default.

Thumbnail Dimensions – Size of the Thumbnail in pixels. The gadget doesn’t generate any Thumbnail. It just uses the media thumbnail,YouTube thumbnail , or any image in the post and scales it to the specified dimensions

Summary Length  -  If you have opted to display the post Summary, then you can control the length of the summary(in characters)

Post Meta Style – You can display the Post Date, Comment Count and a Read More Link.You can choose any combination of these three.

Font  and Font Size– By Default, the container’s font  and Font Size is inherited into the Gadget. But if you are using a 3rd party template, then these might not be properly inherited. In that case you can use this Option to over ride these parameters.

Extra Styling – Allows you to specify the position of the Thumbnail, and whether to underline the links or not.

Border Color – You can either opt for No Border, or select one of the 140 available colors. If you  are not sure about how these colors look like, then take a look at this color chart at W3Schools - http://www.w3schools.com/html/html_colornames.asp 

Link Color and Text Color – By default , the colors will be inherited from your Blog. If you want to override this , you can choose one out of the 140 different colors.

(The colors were provided in the Dropdown(and not as text fields) to tackle a problem with the API)

Read More Text – This field was intentionally added to help blogs which are not written in English. Initially i used  “More »” as the Read more text without taking any user Input. Seeing this on a non- English Blog is a little awkward. So i added this new field :)

Add The Gadget to your Blog

Check out the Demo and Sample Configurations to see what  the Gadget can do. 

Credits:Thanks to Kannan of http://cre8tivenerd.com/ for the gadget image

Waiting for your Feedback and Suggestions :) . If you like the gadget, share it and spread the word :)

Update:

just updated the recent posts and random posts gadgets. Some blogger methods were deprecated(not sure if it is temporary) and so an update was necessary. these gadgets are cached on to the blogger servers and so may take time to reflect onto your blogs. If you can't wait then remove the gadgets and add them using the following links
Random Posts - http://go.bloggerplugins.org/r​andom2
Recent Posts - http://go.bloggerplugins.org/r​ecent2

Source: http://www.bloggerplugins.org/2010/09/random-posts-widget-for-blogger.html

Decorate your Blog for Christmas

It's Christmas time and here is a Blogger Widget to decorate your blog For Christmas. You can see the demo here in this my blog. The Christmas Bells and the Snow Fall are a part of this Widget.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-www-GzoY6xQwIAE7vhFaoARp1ePM2kjmi_AIFqmgsP4j8u3uFfd4wpJM7G6GTPq7JhabuvvQ3gFopnZQOamdkWQeIgoS4h4REk5GeYwyAqWABNAiO0zXql3ac5mcQgy7_fUCi1I2LOc/s1600/christmas-bells-icon.png' style='position:absolute; top: 0px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjA5cyJfYFt-xtdXmBQ_dipG9ArR6KB0yDrX8uzTmR5SB51-HJvk59leIGIW70o6_j0-meQwUoe-59KtueBr21bTSMmlg1ygE7dAekl1Ia8Lb3uYsOO1s3m21KNwnEokUoyfUHDq8U4u0/s1600/christmas-bells-icon-right.png' style='position:absolute; top: 0px;right:0px;border:none;'/>")); </script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script> </script>
value="<b:includable id='main'><data:content /></b:includable>" />

 

After Adding the Gadget, drag it to someplace in your Footer(This will improve the page load speed).

Click the  SAVE button

If you want to remove the Widget, you can click on the Edit Link on the Gadget and click on the Remove button

I will try to add some more Christmas Gadgets to this post if I get time. :) If you have any suggestions, please drop them in.

 

Credits : jQuery SnowFall Plugin

Bell Icon Courtesy : http://mohsenfakharian.deviantart.com/

Source: http://www.bloggerplugins.org/2010/12/decorate-your-blog-for-christmas.html

Facebook Like/Fan Box For Blogger

This tutorial is for everyone who has already created a Facebook Fan Page. If have not created one, try making one. A Fan Box or Like Box allows your Blog visitors to like your Facebook fan page, without leaving your blog. It can also display faces of the “likers” on your blog. To add the fan box to blogger, follow these steps:

1. Find out your Facebook Fan Page URL. To do that, just visit your Facebook Fan Page, and copy the url in the address bar.

In my case it is http://www.facebook.com/bloggerplugins (The url which you see in the address bar when you visit your fan page.) .Copy this url from your address bar.

2. Visit This page http://developers.facebook.com/docs/reference/plugins/like-box

You have already copied the Facebook fan page url. Paste this into the Facebook Page URL field

Select the choices appropriately and you can see a live preview of the Like/Fan box.

3.Once you are satisfied with the looks of the Like Box, Click on the “Get Code” button

4. Copy the xfbml code which gets generated.

5. Now login to your Blogger account and go to Design > Page Elements

Click Add a Gadget Link and Add an HTML/JavaScript Gadget

6.Paste the generated code as the Gadget’s Content

and Save the Gadget.

7.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, Go to Design/Template > Edit HTML and find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

8.Save the Template and you should see the Fan/Like Box on your blog’s sidebar.

Another variation

If you need a simpler Like button, without any extra decorations, then visit http://developers.facebook.com/docs/reference/plugins/like . In the code generator, paste your Facebook Fan Page’s url as the URL to Like and follow steps 3 to 5. Now you will get a simpler Like Button with count.

Source: http://www.bloggerplugins.org/2011/01/facebook-like-fan-box-for-blogger.html

Follow By Email Gadget for Blogger

Some of you might have already noticed the new “Follow by Email” Gadget on your “Add a Gadget Page”. The gadget is pretty simple and easy to install.

 

To add this Gadget, Follow these simple steps

1. Login to your Blogger Dashboard, Navigate to Design > Page Elements tab and click on the “Add a Gadget” Link

2.On the next window click on the plus sign, and you will be taken to the gadget options page.

3. Click the save Button and you are done.

You are done now!! :) Wasn’t that simple?

Some  Insight!!

You can track your subscription information from your FeedBurner Panel.

Though this gadget has got a simple easy to use interface, the gadget is really intelligent, and does  lot of background work and synchronization. It checks if you have already burnt your blogger feed, and if you have, then it retrieves  your Feed burner URL automatically. If you have burnt  the feed but  hadn’t enabled the Email Subscription option for your Feed, then it automatically enables the same.

If you haven’t even used FeedBurner before, then it automatically burns your blogger feed, and retrieves the new FeedBurner url of the new feed that was generated.

Oh!! I hate the url that FeedBurner gave me.

If your blog has a very common name, then there is every possibility that you will end up with a  non-pretty FeedBurner url like http://feeds.feedburner.com/blogspot/qOAyP . Most of  you might not give a damn about this url. But if you really want to change it, then you can easily do that as well.Follow these Steps

1. Login to http://feedburner.com and Click on the Feed For your Blog

2. Click on Edit Feed Details

3. Change the Feed Address to something pretty!

4. Click on Save Feed Details button

What do you think of this new Gadget from the Blogger Team and what tweaks would you like to see on this gadget?

Source: http://www.bloggerplugins.org/2011/03/follow-by-email-gadget-for-blogger.html

Link to me widget for blogger

This is a nice little widget which can find its place in your blog’s sidebar.You might want to let your readers link back to you in an easy way.We will now make a new Link To Me Widget which will display the code needed for a reader to link back to your blog.We will also provide a Add link using Blogger Button.

This button will work like a widget installer,which makes it easier for your readers to add your link.They can link back to you easily by adding your link to me widget.

How to make the Link to me Widget?

1.First of all Make a Small Logo of your blog,which can easily fit into any blog sidebars.It should be small and pretty :P

2.Now upload this image somewhere.[You can use blogger to upload the logo if you want or you can opt for some service like tinypic.com]

3.Now note the url of this uploaded image

4.Ok now you Copy the following Code into a Text File

<p>If you like this blog,then link back to me.<br/>
This is what you will see.</p>
<div style="text-align: center;">
<a style="border:0px;text-decoration:none;" href="Your_Blog_URL" title="Your_Blog_Title">
<img alt="Your_Blog_Title" style="border: 0px;" src="Url_of_a_Small_logo_of_your_blog"/>
</a>
</div>
<textarea rows="3" cols="30">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea><br/>
<br/>

Optionally use this Widget installer to add this link to your blogger blog.

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input style="display: none;" value="My Favourite Site" name="widget.title"/>
<textarea style="display: none;" name="widget.content">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea>
<br/>
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/>
</form>

5.In this code replace all occurrences of Your_Blog_Title with the Title of your blog

6.Replace all occurrences of Your_Blog_URL with the url of your blog.

7.Replace all occurrences of Url_of_a_Small_logo_of_your_blog with the url of the logo that you uploaded.

8.Now your code is Ready!!

9.Copy out the modified code from your text editor.

10.Now Goto Blogger > Layout page

11.Choose to add a gadget and Opt for HTML/Javascript

12.In that widget paste the modified Code and Save.

Now you should have a link to me widget on your blog.If you want to test the Add Link With Blogger Button,Then try adding the widget to your blog itself.[You can remove it after testing!]

With Slight Modifications to the code,you can change this to a text link instead of an image link.

If you need some help in Customizing this widget, then drop in a comment or better contact me via a topic at the Blogger Forum

Source: http://www.bloggerplugins.org/2009/08/link-to-me-widget-for-blogger.html

Related Posts Widget for Blogger with Thumbnails

Related Posts with Thumbnails for Blogger

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

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;
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, &#8220;Times New Roman&#8221;, 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMcyHT3jRdrOTzkMih7nvEPgdx2ILbBRijIg9BBPu-3IJHxYO1yj-CCBvc7ZacA1-v6kJhVzIAuxeAGXIze7Jr-rPm-d0AgIM8L9fxQSmMCn3wA9ZFjaAKD-Q2M-TPfiHTlHDqTQhH_No/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Now Find

If you cant find it then try finding this one

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.

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

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

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

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

and

Update 29/03/2012 : If the script is not working for you then please change http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js to http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

Sorry for the trouble :-)

Permalink: Related Posts with Thumbnails for Blogger

Source: http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html

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..Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).

.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 colours and font sizes of each of the 5 classes.

color: #2789ce; is responsible for the colouring of each of the classes.You can change it appropriately with some other hex colour 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)

I have commented the css codes(10 comments)..You can remove those comments if you want(eg: /*color of a label of class 2 on hover*/ is a comment)

These CSS style definitions should be placed above

]]></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

Source: http://www.bloggerplugins.org/2009/08/blogger-releases-new-version-of-label.html

Some Friend Connect Gadgets that you might not know

Most of you might be aware of the Google Followers gadget.Its just one of the different friend connect gadgets.

Where Can i get a Friend Connect Gadget?

1. Go to Google Friend Connect and on the left pane you will see a list of your blogs.If you don’t find it, then add your site there.

2.Click on your Blog Name from the Left Pane and Click on the button which says “Browse the gadgets gallery” .

3.Now you can see a list of gadgets.You can customize the colours and the Generate the Code.

4.Copy this Code . Now in your blogger layout page(of the same blog), add a new HTML/JavaScript Gadget and paste this code there and save.

5.Now you should have that gadget running on your blog.

Here is a list of some of the Popular Gadgets[Some of  them which can be demoed here :)]

1.Members Gadget – This is the same thing as what you see in a normal Followers Blogger Gadget

2.Cloud Gadget

Shows your followers as an animated Cloud

3.Sign in Gadget – This is also a followers gadget with a sign button like style

4.Interests poll Gadget - Ask your visitors questions relevant to your site via a poll that adds to their profile.You can see a sample of this Gadget on my Sidebar.

5.Newsletter subscription - Help members sign up for your newsletter by providing their email address if they haven't yet specified one.you can read more about this gadget at Creating a newsletter for your blog.

There are so many other friend connect gadgets like Recommendation Gadget, Comments Gadget, Ratings and Reviews Gadget and Lots More.The Recommendation gadget can be used as a popular posts gadget.so you guys better check out the big list of friend connect gadgets, available for you. And one most important thing. Don't forget to follow me using any of the Friend connect preview gadgets listed here ;)

Permalink: Some Friend Connect Gadgets that you might not know

Source: http://www.bloggerplugins.org/2009/10/some-friend-connect-gadgets-that-you.html

Google Ajax Search With Your Adsense Ads

All of you might have seen the New Ajax Search Gadget on your Layout > Add Gadget Page. This Ajax search gadget doesn't support adsense ads.But you can now have a Google ad supported Google Ajax search widget on your blog.The speciality of the Ajax Search is that it can search your blog, without actually leaving your blog.(no need to go to a new page.. it acts like an inline search)

 

The Ad supported Ajax search Code is available at Google Web Elements .You can see 3 options there.

1. Automatically Search My Site
2. Search my Site and use Adsense for Search
3. Use an existing Custom Search Engine

For showing adsense ads you have to opt for option 2 or 3 .If you choose to use the second option,then you will have to provide you Adsense publisher id(which looks like pub-xxxxxxxx).If you opt for the option 3, you will have to provide the Custom search ID, which will be present in your Google Custom search Code.[Code is generated inline when you enter any of these ids.]

 

After grabbing this code, just go to your Blogger > Layout page and add a new HTML/JavaScript Gadget and paste the Google Web Element Custom Search code there and save the gadget. The Gadget will look better if you drag it to above the Blog Posts Widget and save it.[that area has got enough space to display the ads :)]

 

Here is a preview of what you should see.