Add Language Translator/ Flags Images Widget To BlogSpot Blog

If you are having a blog and receiving visitors from various countries and cities of the world, then they may or may not be comfortable with the language of your blog. So adding a translator button or a widget is always useful.
If you do not know the location of visitors coming to your blog, then you should first read my post on track your blog's visitors.

You have two options to add a translator:
1. By this method, you will get a compact translator, with a drop-down menu. And the method is really simple too.
You can see this translator in action in the sidebar of this blog.

To add a widget/gadget do this:
Log in to Blogger
Go to Layout and then Add a Gadget -> HTML/Javascript
Now copy and paste this code in to it:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

*source - Google

Although by this method you will get a compact translator widget, but if you do not want to show the link to Google, and rather you would like to show some flags of different countries, like this one:





To get these flags translator buttons, you have "Add a new Gadget" -> HTML/Javascript
then copy and paste this code:

<center><table border="1">

<tr>

<td><form action="http://www.google.com/translate">

<script language="javascript" type="text/javascript">

<!--

document.write ("<input name=u value="+location.href+" type=hidden>")

// -->

</script><input value="http://YOUR_BLOG_ADDRESS" name="u" type="hidden"/>

<noscript><input value="http://YOUR_BLOG_ADDRESS" name="u" type="hidden"/></noscript>

<input value="en" name="hl" type="hidden"/> <input value="UTF8" name="ie" type="hidden"/> <input value="" name="langpair" type="hidden"/>



<input onclick="this.form.langpair.value=this.value" title="Andorra / Catalan" value="en|ca" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-fM7vwhSI/AAAAAAAAHl0/ZoZkfhEb01M/s320/Andorra+-+Catalan+-+ad_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="العربية / Arabic" value="en|ar" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title=" България / Bulgaria" value="en|bg" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiXtQx-uLI/AAAAAAAAG6I/RuLPDhnFMXY/s320/Bulgaria+-+bg_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="中文（简体） / Chinese (Simplified)" value="en|zh-CN" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="中文（繁体） / Chinese (Traditional)" value="en|zh-TW" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Hrvatska / Croatian" value="en|hr" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMhVoigYF0I/AAAAAAAAG5s/naE3NObTVZs/s400/Croatia+-+hr_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Česká Republika / Czech Republic " value="en|cs" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiX9aMIL3I/AAAAAAAAG6o/4-RYadolKWQ/s320/Czech+Republic+-+cs_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Danmark / Denmark" value="en|da" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiX9nD1NZI/AAAAAAAAG6w/ZnIBEtLIHEw/s320/Denmark+-+da_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Suomi / Finnish" value="en|fi" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZwsOFndI/AAAAAAAAG8w/VlBr_zN32q8/s320/Finland+-+fi_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Français / French" value="en|fr" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Deutsch / German" value="en|de" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Ελλάς / Greek" value="en|el" type="image" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4X8NyqedwFRfQIUmVtrbGxgVGSlL1BAq3vQOJ_8K_aBHjKi3LBxHm9JwYeTHAfTYBRFAk6zyfIYavetkHXEkB0ztNeVkrSkXF70-4mEb_c7AX8hyphenhypheng57eV6NY70Gg0faqMjCWDVCL7bLo/s320/Greek+Flag+36x24.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="ישראל / Hebrew" value="en|iw" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-fNBP-7LI/AAAAAAAAHmE/fJeA_Sbl9w4/s320/Israel+-+il_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Hindi / India" value="en|hi" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiYu9muwaI/AAAAAAAAG7Y/lO6YgNdyHM4/s320/India+-+hi_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Bahasa / Indonesian" value="en|id" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-fNKvGgZI/AAAAAAAAHl8/UESh2PimM5U/s320/Indonesia+-+id_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Italiano / Italian" value="en|it" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="日本語 / Japanese" value="en|ja" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="한국어 / Korean" value="en|ko" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Latvija / Latvian" value="en|lv" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNX2rCXI/AAAAAAAAHmM/1LRWqh7YQBA/s320/Latvia+-+lv_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Lietuvos / Lithuania" value="en|lt" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNrJizVI/AAAAAAAAHmU/kdaran4uffk/s320/Lithuania+-+lt_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Nederland / Dutch" value="en|nl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZWUAFSOI/AAAAAAAAG74/lsNT2NI_oFI/s320/Netherlands+-+nl_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Norge / Norwegian" value="en|no" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZWYWSvEI/AAAAAAAAG8A/7sOoou7far0/s320/Norway+-+no_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Pilipinas / Philipines" value="en|tl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f7gyN2aI/AAAAAAAAHmc/x_LSaXlHtCs/s320/Pilipnas+-+ph_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Polska / Polish" value="en|pl" type="image" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-DXLaYwUUqKnnPqprgrfwdmV9FfEbd91FOAKkK2eAjNUufraBet-X5_Ne_BA30kkED2ZxB_kv_QxWzQ4ApiISk9O8OlNr0rO_fyyytNUILodbzrq6JUitQCL_jna74bqjLEhndGTj5xWJ/s320/Polish+Flag+36x24.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Português / Portuguese" value="en|pt" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="România / Romanian" value="en|ro" type="image" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcn4WmY5SqDfQMgfq_fRxb_PsJCt8RB5_J9fLnsjmyZW_690hLQFnjpzH9Iqh70ke97y_0P5Fp6trriyVe6cRj4mFCViL4rxB0Ou-wK5JsgODoU6yxFadm8psrlJX7FZTRbPFLGnepqWpL/s320/Romainian+Flag+36x24.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Русский / Russian" value="en|ru" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Србија / Serbia" value="en|sr" type="image" height="20" src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f7_imioI/AAAAAAAAHmk/ytbpoyJHbmo/s320/Serbia+-+si_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Slovenčina / Slovak" value="en|sk" type="image" height="20" src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-f79KzfyI/AAAAAAAAHms/-I315jcpHN0/s320/Slovak+-+sk_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Slovenija / Slovenia" value="en|sl" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f8P0fwiI/AAAAAAAAHm0/Lzeh8mXiWvE/s320/Slovenia+-+si_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Español / Spanish" value="en|es" type="image" height="20" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Sverige / Swedish" value="en|sv" type="image" height="20" src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZwrYspyI/AAAAAAAAG8o/uVUWBAyZkVc/s320/Sweden+-+se_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="Україна / Ukraine" value="en|uk" type="image" height="20" src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f8Bg1AMI/AAAAAAAAHm8/b4jhQQPSvj4/s320/Ukraine+-+ua_flag.png" width="30" name="langpair"/>



<input onclick="this.form.langpair.value=this.value" title="tiếng Việt / Vietnam" value="en|vi" type="image" height="20" src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-gZakjpuI/AAAAAAAAHnE/fwfNZkisDOA/s320/Vietnam+-+vn_flag.png" width="30" name="langpair"/>

</form></td>

</tr></table></center>

NOTE: In that code, you have type your Blog's Address in the appropriate places [In RED colour]

How to show Top Commenters/Commentators widget on BlogSpot Blogs

If your blog has some loyal visitors and commenters, so one way to show your gratitude for them is to make your blog a "dofollow" blog, or you can add a top-commenters widget to your blog.

Adding a top-commenters is very easy, Just log in to your Blogger account.
Now go to Layout -> Add a Gadget -> HTML/Javascript

Now copy and paste this code in to it:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_HTTP://&num=10&filter=BLOG_AUTHOR_NAME" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://posrama.blogspot.com">PosRama</a></span>

Replace everything in BLUE, with the appropriate details of your Blog. You may write any visitor's name or your own name in filter=BLOG_AUTHOR_NAME (and this name will be deleted from the top commentators list). You may of course change the number of commentators to be displayed. (shown in red).

Simple Recent Posts and Recent Comments Via Feeds Blogger

Recently I have posted about showing Related Post Widget in your blog, and also a post about Adding Favicon To Blogger. Here's another widget to be added on your blog, which shows the posts where recent comments have been made.

To add the widget, follow these steps:

Log in to Blogger, Go to Layout -> Add a Gadget -> Feed widget

For Recent Posts via FEED, then in the feed field, paste this url:

http://YOUR_BLOG.BLOGSPOT.COM/feeds/posts/default

For Recent Comments via FEED, then in the feed field, paste this url:

http://YOUR_BLOG.BLOGSPOT.COM/feeds/comments/default

Replace red text with your blog URL and select the appropriate options and save it. 

How to Add Related Posts Below Every Post

To add Related posts/Similar posts widget below every post on your blog, follow these simple steps:

First of all download this file:
relatedPosts_ForBlogger2.js

Zipped File*

Although you do not have to use this file as I have already linked the file in STEP #5. So, store this file as a back up on your PC.

1. Go to Blogger.com
2. Now go to "Design", then to "Edit HTML" section
3. Back up your present template, by "Downloading it"
4. Now click on "Expand widget templates"
5. Find this code:

</head>

 And just BEFORE/ABOVE this code, paste this:

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium nonemargin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js' type='text/javascript'/><!--RelatedPostsStops-->

6. Now search for this code line:

<data:post.body/>

 And after that line, paste this code:

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

To change the number of similar/related posts to be displayed, change the code max-results=xx
Finally save your template, and you will see related posts after all your posts(Remember to add labels after your posts, during publishing them)

How to Hide/Remove Navbar

Follow these simple steps to completely hide the navbar in your blog :

1. Log into your Blogger account.
2. Select the Layout/Design tab (from your dashboard).
3. Go to Edit HTML section.
4. Under the Edit Template Box, 'copy and paste' the code from the green region below, exactly between the gray region (which will be already there in your blog) !

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Rounders
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
   display: none !important;
}

/* Variable definitions
  ====================
   <Variable name="mainBgColor" description="Main Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="mainTextColor" description="Text Color" type="color"
             default="#333" value="#333333">
   ...

It will look like this now :

So open and see a Navbar free blog !

Add Favicon To Blogger/BlogSpot Blog Easily

Create A Favicon For Your Website
Fastest, Easiest and The Best Method Available On Internet
(You may even directly use an animated *.gif image as a favicon)

his is the easiest way to create a Favicon (the small icon  of a website visible at the along the url in the address bar) for your website !

There are many favicon generator websites, where you have to first upload a picture, edit/crop it and finally you get a *.ico that you can not even easily open to see, before you use it. Moreover if you want an animated *.gif image, then it makes the process even more difficult.

So finally here's the most simple code, edit & add it in the "head" region of your blog/website.... thats it!
You will see a new favicon the next time you open your website.

Log in to Blogger -> Layout -> Edit HTML
Find this in your template

</head>

And immediately ABOVE?BEFORE it, paste this code:

<link href="http://YOUR_IMAGE_ADDRESS_HERE.gif" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>

Replace the link in bolded, with the DIRECT LINK to your pavicon URL.

To get the direct link, upload the desired image here first - Tinypic