Google Talk Widget For Blogger / BlogSpot

Google Talk is one of the most popular IM clients on  the Web. The Google Talk Widget for Blogger will help you in adding an elegant Google Talk badge to your Blogger / BlogSpot Blog.
The Google Talk Widget comes in 2 varieties. You can add any of these two widgets.Both of them are different and work differently :)

1.Google Chat Back Gadget – This gadget allows your visitors to IM you without revealing your Gmail address.you can chat with your blog visitors like what you normally do with your IM buddies. The only difference here is that your identity wont be revealed.

How to Install the Google Chat Back Gadget?

1. Login with your Google Account at Google Talk Badges
2.Copy the HTML Code generated by Google
3.Now login to your Blogger Account and Navigate to Layout > Page Elements Page
4.Click the Add Gadget Link and Opt to add an HTML/JavaScript Gadget
5.Paste the HTML code(that we copied) into the Gadget and Save it.
6.Now you should see the Google Chat Back Widget on your Blog’s sidebar.
Here is a Screenshot of what the Google Chat Back Widget will look like

2. Google Talk Gadget – This Gadget is just like the Google Talk Interface within your Gmail. This will allow your  blog visitors to login to Google Talk. It is better to say that, once you add this gadget, your blog can serve as a Google Talk IM Client. This Widget wont allow the visitors to chat with you. If the visitor logs into his Google Talk account(via this Google Talk Gadget), he will be able to chat with his Google Talk Buddies and not with you(the blog owner)unless you were already on his buddy list :)
You can add this Widget easily using this One Click Installer. It will Add the Widget to your Blog’s Sidebar.

Permalink : Google Talk Widget for Blogger

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

</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;
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/AVvXsEikB5XL1rp2GSuiA3NLfapWoKhpU9A90-s_mPMd9K4IgnxGwZeAMCl6TSaF-d3G8KDC9iOM6Sao2IS02srPfxmbFCTTzxiGYBcjNAMG7iCajPQkyhs8S0UItTDq-Xcf1h6Iaf3JUzRtqoE/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

<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/AVvXsEikB5XL1rp2GSuiA3NLfapWoKhpU9A90-s_mPMd9K4IgnxGwZeAMCl6TSaF-d3G8KDC9iOM6Sao2IS02srPfxmbFCTTzxiGYBcjNAMG7iCajPQkyhs8S0UItTDq-Xcf1h6Iaf3JUzRtqoE/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>

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

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.

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/AVvXsEgHSl05AYoyoTLmpoZRIuQ_7ubVU1nOmeOC2nec6tVX2CDlJHXGINBW8zaLTiAZpBd1IGWTdpTIDUT167TukH2zcss1fSyy_jRiG8sT3uqhWNqsPtpV1MQw16-aj8K6be_Y5fc1VSx9Aok/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 :)

Change Blogger Favicon Easily Without any Code Changes

The new Blogger Dashboard allows you to change your blog’s favicon with a few clicks. . The feature has been around for a while now and most of you might already be using it.This tutorial is for the ones who don’t

If you are not sure, what a Favicon is then refer this image:

The default Blogger Favicon looks like this : You can replace it with some other icon of your choice.

How to change the Blogger Favicon without any Code Edits

1. Login to your Blogger Dashboard and navigate to Design > Page Elements.
2. Click on the Edit link next  to the Favicon element

3. Click the Browse button and select the appropriate favicon which you already have on your computer.

4. Once it is uploaded, you will see the Favicon and a Remove link next  to it. Click on the Save button

5. Save the Changes and you are done.

Common Questions

1. I changed the favicon, but it is still showing the old favicon.Why?
Just clear your browser cache, and reload your blog once or twice. It should now work.
2. Does it support only icon files?
You can use other images as well. Blogger will automatically resize them and convert them into the icon format. But the image should be less than 100kb.
3. Where can I download Favicons from?
http://www.iconspedia.com/ Just download the .ico version of the icon. You can download the 16x16 version of the icon if available. You will find lots of similar sites if you do a Google Search.