Google translation Flags Widget for Blogger Blog

Now with Google translation widget you can translate english to 24 other languages like Arabic , Bulgarian , Chinese ( simplified and traditional) , Croatian , Czech , danish , Dutch , Finnish , French , German , Greek , Hindi , Italian , Japanese , Korean ,Norwegian , Polish , Portuguese ,Romanian , Russian , Spanish and Swedish. I hope no one might have seen such a huge list anywhere. This Widget is powered by Google. This Google translation Widget helps your readers to read the article in their own regional language.

You can add this widget either in sidebars or below each post.

Code for Google Translation Widget :

<div style="padding:10px 10px 10px 10px;text-align:center;">

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Car&hl=en&ie=UTF8'); return false;" title="Translate English to Arabic"><img border="0" style="cursor:pointer; cursor:hand;" alt="Translate English to Arabic" width="24" src="http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png" height="18" title="Translate English to Arabic"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Translate to Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_chinese_s.png" height="18" title="Translate to Chinese (Simplified) BETA"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cbg&hl=en&ie=UTF8'); return false;" title="Translate English to Bulgarian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Arabic" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Bulgarian_Flag.png" height="18" title="Translate to Bulgarian"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-TW&hl=en&ie=UTF8'); return false;" title="Translate English to Traditional Chinese"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Arabic" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Mandarin_Flag.png" height="18" title="Translate to traditional Chinese"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Chr&hl=en&ie=UTF8'); return false;" title="Translate English to Croatian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Croatian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Croatian_Flag.png" height="18" title="Translate to Croatian"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Ccs&hl=en&ie=UTF8'); return false;" title="Translate English to Czech"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Czech" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Czech_Flag.png" height="18" title="Translate to Czech"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cda&hl=en&ie=UTF8'); return false;" title="Translate English to Danish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to danish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Danish_Flag.png" height="18" title="Translate to Danish"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cnl&hl=en&ie=UTF8'); return false;" title="Translate English to Dutch"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Dutch" src="http://i40.photobucket.com/albums/e208/winglord01/nederlands.gif" height="18" title="Translate to Dutch"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfi&hl=en&ie=UTF8'); return false;" title="Translate English to Finnish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Finnish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Finnish_Flag.png" height="18" title="Translate to Finnish"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Translate English to French"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to French" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_fr.gif" height="18" title="Translate to French"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Translate English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to German" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_german_s.png" height="18" title="Translate English to German"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cel&hl=en&ie=UTF8'); return false;" title="Translate English to Greek"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Greek" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_gr.gif" height="18" title="Translate to Greek"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Chi&hl=en&ie=UTF8'); return false;" title="Translate English to Hindi"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Hindi" src="http://i323.photobucket.com/albums/nn467/techbookmark/hindi.png" height="18" title="Translate to Hindi"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt=" Translate English to Italian" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_italian_s.png" height="18" title=" Translate English to Italian"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://i187.photobucket.com/albums/x307/Mafishioso/_japanese_s.png" height="18" title="Translate English to Japanese BETA"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title=" Translate English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Korean BETA" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_korean_s.png" height="18" title="Translate English to Korean BETA"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cno&hl=en&ie=UTF8'); return false;" title="Translate English to Norwegian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Norwegian" src="http://i536.photobucket.com/albums/ff328/pmhrid/norway_flag.png" height="18" title="Translate to Norwegian"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cpl&hl=en&ie=UTF8'); return false;" title="Translate English to Polish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Polish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Polish_Flag.png" height="18" title="Translate to Polish"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cpt&hl=en&ie=UTF8'); return false;" title="Translate English to Portuguese"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Portuguese" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_pt.gif" height="18" title="Translate to Portuguese"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cro&hl=en&ie=UTF8'); return false;" title="Translate English to Romanian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Romanian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Romansh_Flag.png" height="18" title="Translate to Romanian"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Translate English to Russian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Russian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Russian_Flag.png" height="18" title="Translate to Russian"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title=" Translate English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Russian BETA " src="http://i263.photobucket.com/albums/ii150/mohamedrias/_russian_s.png" height="18" title=" Translate English to Russian BETA "/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Translate English to Spanish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Spanish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Spanish_Flag.png" height="18" title="Translate English to Spanish"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Csv&hl=en&ie=UTF8'); return false;" title="Translate English to Swedish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Swedish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Swedish_Flag.png" height="18" title="Translate to Swedish"/></a>
<div style="display:none;">
<small><a href="http://www.techieblogger.com" target="_blank">Grab this widget</a></small></div>
</div>

Customizing the code to your language : In this widget i wrote coding to translate WebPage in English to other languages. If you want to use this widget to translate your regional language to other foreign Language , then you need to customize the script.

I am going to explain How to change text from Arabic to English. Do the same to translate from one particular language to other languages.

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Car&hl=en&ie=UTF8'); return false;" title="Translate English to Arabic"><img border="0" style="cursor:pointer; cursor:hand;" alt="Translate English to Arabic" width="24" src="http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png" height="18" title="Translate English to Arabic"/></a>

The Text in green represents your web page language code. Since My Blog is in English i am using en ( english ) code. You need to change that code to your blog Language.

Language Codes :

Arabic = ar ; Bulgarian = bg ; Chinese Simplified = zh-CN ; traditional Chinese = zh-TW ; Croatian = hr ; Czech = cs ; Danish = da ; Dutch = nl ; Finnish = fi ; French = fr ; German = de ; Greek = el ; Hindi = hi ; Italian = it ; Japanese beta = ja ; Korean = ko ; Norwegian = no ; Polish = pl ; Portuguese = pt ; Romanian = ro ; Russian = ru ; Spanish = es ; and lastly Swedish = sv .

The text in red represents the language to which the web page is going to be translated. So put the respective language code there.

Add Google Translation hack as a Widget

Login to your Blogger Account then navigate to Layout section of your blog . then add a HTML / Javascript page element and copy and paste the code above there. And save the widget.

that's it you have successfully added the Google translation flag in your Blog.

Adding Google translation Flags below Blogger posts

To Add Google translation Widget below each post in blogger , Login to your blogger account and navigate to Layout section of your blog. then go to EDIT HTML subtab and put a check on Expand Widgets box.

Now search for this code <p><data:post.body/></p> and paste the following code below that line.

<div style='border: 1px solid rgb(153, 153, 153); padding: 5px; margin: 15px; background-color: rgb(255, 248, 175);'>

<span style='color:#000000;font-size:14px;text-transform:uppercase;font:georgia;margin-bottom:5px;'> Translate This post to your regional Language </span><br/>
&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Car&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Arabic&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; alt=&quot;Translate English to Arabic&quot; width=&quot;24&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate English to Arabic&quot;/&gt;&lt;/a&gt;


&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cbg&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Bulgarian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Arabic&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Bulgarian_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Bulgarian&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Czh-CN&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate to Chinese (Simplified) BETA&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Google-Translate-Chinese (Simplified) BETA&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_chinese_s.png&quot; height=&quot;18&quot; title=&quot;Translate to Chinese (Simplified) BETA&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Czh-TW&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Traditional Chinese&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Arabic&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Mandarin_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to traditional Chinese&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Chr&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Croatian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Croatian&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Croatian_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Croatian&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Ccs&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Czech&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Czech&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Czech_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Czech&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cda&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Danish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to danish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Danish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Danish&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cnl&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Dutch&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Dutch&quot; src=&quot;http://i40.photobucket.com/albums/e208/winglord01/nederlands.gif&quot; height=&quot;18&quot; title=&quot;Translate to Dutch&quot;/&gt;&lt;/a&gt;


&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cfi&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Finnish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Finnish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Finnish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Finnish&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cfr&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to French&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to French&quot; src=&quot;http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_fr.gif&quot; height=&quot;18&quot; title=&quot;Translate to French&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cde&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to German&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to German&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_german_s.png&quot; height=&quot;18&quot; title=&quot;Translate English to German&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cel&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Greek&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Greek&quot; src=&quot;http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_gr.gif&quot; height=&quot;18&quot; title=&quot;Translate to Greek&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Chi&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Hindi&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Hindi&quot; src=&quot;http://i323.photobucket.com/albums/nn467/techbookmark/hindi.png&quot; height=&quot;18&quot; title=&quot;Translate to Hindi&quot;/&gt;&lt;/a&gt;


&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cit&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Google-Translate-English to Italian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot; Translate English to Italian&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_italian_s.png&quot; height=&quot;18&quot; title=&quot; Translate English to Italian&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cja&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Google-Translate-English to Japanese BETA&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Google-Translate-English to Japanese BETA&quot; src=&quot;http://i187.photobucket.com/albums/x307/Mafishioso/_japanese_s.png&quot; height=&quot;18&quot; title=&quot;Translate English to Japanese BETA&quot;/&gt;&lt;/a&gt;


&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cko&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot; Translate English to Korean BETA&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Korean BETA&quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_korean_s.png&quot; height=&quot;18&quot; title=&quot;Translate English to Korean BETA&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cno&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Norwegian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Norwegian&quot; src=&quot;http://i536.photobucket.com/albums/ff328/pmhrid/norway_flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Norwegian&quot;/&gt;&lt;/a&gt;
&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cpl&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Polish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Polish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Polish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Polish&quot;/&gt;&lt;/a&gt;
&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cpt&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Portuguese&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Portuguese&quot; src=&quot;http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_pt.gif&quot; height=&quot;18&quot; title=&quot;Translate to Portuguese&quot;/&gt;&lt;/a&gt;
&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cro&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Romanian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Romanian&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Romansh_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Romanian&quot;/&gt;&lt;/a&gt;
&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cru&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Russian&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Russian&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Russian_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Russian&quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Cru&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot; Translate English to Russian BETA &quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Russian BETA &quot; src=&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/_russian_s.png&quot; height=&quot;18&quot; title=&quot; Translate English to Russian BETA &quot;/&gt;&lt;/a&gt;

&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Ces&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Spanish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Spanish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Spanish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate English to Spanish&quot;/&gt;&lt;/a&gt;


&lt;a target=&quot;_blank&quot; rel=&quot;nofollow&quot; onclick=&quot;window.open(&#39;http://www.google.com/translate_p?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=en%7Csv&amp;hl=en&amp;ie=UTF8&#39;); return false;&quot; title=&quot;Translate English to Swedish&quot;&gt;&lt;img border=&quot;0&quot; style=&quot;cursor:pointer; cursor:hand;&quot; width=&quot;24&quot; alt=&quot;Translate English to Swedish&quot; src=&quot;http://i166.photobucket.com/albums/u106/language_forum/Languages/Swedish_Flag.png&quot; height=&quot;18&quot; title=&quot;Translate to Swedish&quot;/&gt;&lt;/a&gt;
&lt;div style=&quot;display:none;&quot;&gt;
&lt;small&gt;&lt;a href=&quot;http://rias-techno-wizard.blogspot.com&quot; target=&quot;_blank&quot;&gt;Grab this widget&lt;/a&gt;&lt;/small&gt;&lt;/div&gt;
</div>

Change the line in red to suit your Tempate.

Now you can see a beautiful Google translation Widget in your blog below each post.

I hope this hack will be very useful for all bloggers. if you need any help , please ask me in comment section. i can even provide help through google talk. Add mohamedrias1103@gmail.com to your gtalk account.

Google translation Widget for Blogger - Translate any website in English to 25 other languages

Now with Google translation widget you can translate english to 25 other languages like Arabic , Bulgarian , Chinese ( simplified and traditional) , Croatian , Czech , danish , Dutch , Finnish , French , German , Greek , Hindi , Italian , Japanese , Korean ,Norwegian , Polish , Portuguese ,Romanian , Russian , Spanish and Swedish. I hope no one might have seen such a huge list anywhere. This Widget is powered by Google. This Google translation Widget helps your readers to read the article in their own regional language.

You can add this widget either in sidebars or below each post.

Code for Google Translation Widget :

<div style="padding:10px 10px 10px 10px;text-align:center;">

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Car&hl=en&ie=UTF8'); return false;" title="Translate English to Arabic"><img border="0" style="cursor:pointer; cursor:hand;" alt="Translate English to Arabic" width="24" src="http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png" height="18" title="Translate English to Arabic"/></a>



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cbg&hl=en&ie=UTF8'); return false;" title="Translate English to Bulgarian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Arabic" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Bulgarian_Flag.png" height="18" title="Translate to Bulgarian"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Translate to Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_chinese_s.png" height="18" title="Translate to Chinese (Simplified) BETA"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-TW&hl=en&ie=UTF8'); return false;" title="Translate English to Traditional Chinese"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Arabic" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Mandarin_Flag.png" height="18" title="Translate to traditional Chinese"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Chr&hl=en&ie=UTF8'); return false;" title="Translate English to Croatian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Croatian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Croatian_Flag.png" height="18" title="Translate to Croatian"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Ccs&hl=en&ie=UTF8'); return false;" title="Translate English to Czech"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Czech" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Czech_Flag.png" height="18" title="Translate to Czech"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cda&hl=en&ie=UTF8'); return false;" title="Translate English to Danish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to danish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Danish_Flag.png" height="18" title="Translate to Danish"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cnl&hl=en&ie=UTF8'); return false;" title="Translate English to Dutch"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Dutch" src="http://i40.photobucket.com/albums/e208/winglord01/nederlands.gif" height="18" title="Translate to Dutch"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfi&hl=en&ie=UTF8'); return false;" title="Translate English to Finnish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Finnish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Finnish_Flag.png" height="18" title="Translate to Finnish"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Translate English to French"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to French" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_fr.gif" height="18" title="Translate to French"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Translate English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to German" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_german_s.png" height="18" title="Translate English to German"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cel&hl=en&ie=UTF8'); return false;" title="Translate English to Greek"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Greek" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_gr.gif" height="18" title="Translate to Greek"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Chi&hl=en&ie=UTF8'); return false;" title="Translate English to Hindi"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Hindi" src="http://i323.photobucket.com/albums/nn467/techbookmark/hindi.png" height="18" title="Translate to Hindi"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt=" Translate English to Italian" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_italian_s.png" height="18" title=" Translate English to Italian"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://i187.photobucket.com/albums/x307/Mafishioso/_japanese_s.png" height="18" title="Translate English to Japanese BETA"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title=" Translate English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Korean BETA" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_korean_s.png" height="18" title="Translate English to Korean BETA"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cno&hl=en&ie=UTF8'); return false;" title="Translate English to Norwegian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Norwegian" src="http://i536.photobucket.com/albums/ff328/pmhrid/norway_flag.png" height="18" title="Translate to Norwegian"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cpl&hl=en&ie=UTF8'); return false;" title="Translate English to Polish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Polish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Polish_Flag.png" height="18" title="Translate to Polish"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cpt&hl=en&ie=UTF8'); return false;" title="Translate English to Portuguese"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Portuguese" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_pt.gif" height="18" title="Translate to Portuguese"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cro&hl=en&ie=UTF8'); return false;" title="Translate English to Romanian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Romanian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Romansh_Flag.png" height="18" title="Translate to Romanian"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Translate English to Russian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Russian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Russian_Flag.png" height="18" title="Translate to Russian"/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title=" Translate English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Russian BETA " src="http://i263.photobucket.com/albums/ii150/mohamedrias/_russian_s.png" height="18" title=" Translate English to Russian BETA "/></a>

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Translate English to Spanish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Spanish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Spanish_Flag.png" height="18" title="Translate English to Spanish"/></a>


<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Csv&hl=en&ie=UTF8'); return false;" title="Translate English to Swedish"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Translate English to Swedish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Swedish_Flag.png" height="18" title="Translate to Swedish"/></a>
<div style="display:none;">
<small><a href="http://www.techieblogger.com" target="_blank">Grab this widget</a></small></div>
</div>

Customizing the code to your language : In this widget i wrote coding to translate WebPage in English to other languages. If you want to use this widget to translate your regional language to other foreign Language , then you need to customize the script.

I am going to explain How to change text from Arabic to English. Do the same to translate from one particular language to other languages.

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=en%7Car&hl=en&ie=UTF8'); return false;" title="Translate English to Arabic"><img border="0" style="cursor:pointer; cursor:hand;" alt="Translate English to Arabic" width="24" src="http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png" height="18" title="Translate English to Arabic"/></a>

In the above example , the text in red is used to open links in new page.

text in green is your language code ( web pages language ).

Arabic = ar ; Bulgarian = bg ; Chinese Simplified = zh-CN ; traditional Chinese = zh-TW ; Croatian = hr ; Czech = cs ; Danish = da ; Dutch = nl ; Finnish = fi ; French = fr ; german = de ;
Greek = el ; hindi = hi ; Italian = it ; Japanese beta = ja ; korean = ko ; Norwegian = no ; Polish = pl ; Portuguese = pt ; Romanian = ro ; Russian = ru ; Spanish = es ; and lastly swedish = sv ;.


please replace the text in green to your language. My blog is in English so I have kept " en " there.

text in Red :

Text in red is the language code to which you are going to translate. Please change the code in red to your destination language.

Text in violet :

It's the title tag , when we hover over the images the title tag will shown.

I hope i have explained everything in the code.

How to Add this to Sidebar

If you want to add this widget in your sidebar please login to your blogger account. Navigate to Layout section of your Blog. Add a HTML / Javascript page element and paste the code above there.

That's it you have successfully added Google translation Widget to your sidebar.

Adding Google translation widget below Each post in Blogger

To add Google translation Widget below each in blogger . Go to EDIT HTML page. There put a check in Expand Widgets box. now search for this code <p><data:post.body/></p> now add the Google translation Code below that line.

Now you can see a beautiful Google translation Widget in your blog below each post.

Related Posts Widget For Blogger - Bugs fixed

Many of my readers are asking help to add Related Posts Widget . I was confused because i have added all the code correctly then why my friends are not getting this hack working. So i looked the templates of all those who sent me error message . All their templates are of same structure ( labels line is appearing below post , see the screenshot below)

But the script i have included in the post is for those who have Label line below post title like this.

Bloggers with the above format are not getting this related posts hack because the script loads earlier than the Labels line. We can fix this error in Three methods.

Method One :

Login to your blogger account and navigate to Layout section of the blog. Then go to edit HTML page and check expand widgets box.

Now search this line : <div class='post-header-line-1'/>

Now please copy and paste the code above that line.

<span class='meta'>

<b:if cond='data:post.labels'>
categories :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> &#187;<b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> &#187;</b:if></a>

</b:if>


</span>

you can customize the text in red to display as many results you want.

Now add the below CSS code above ]]></b:skin>

.meta{float:left;width:480px;padding:3px; color:#111; font-size:12px; margin-bottom:8px; line-height:20px;border-bottom:1px dotted #cccccc;}
.meta a{color:#cc0000;}
.meta a:hover{color:#000000;}

Please edit the text in red to suit your template.

After this you need to add the CSS code and javascript i provided in this post " Related Posts Widget with custom CSS ".

Now add the script below this line <p><data:post.body/></p>

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts</h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><div style="display:none;"><a href="http://www.techieblogger.com">Techie Blogger</a></div>
</div></b:if>


Thats it , now you will have related posts widget in your blog.

Method 2 :

If you follow step one then you will have two meta lines in your Blog. One below post title and one below post content. If you are happy with first method then stop or else do these steps to add related posts hack. ( don't do both)

step 1 : First of all add the below code above </head>

<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 none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") 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 type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

step 2 :
Now search this text

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

Now replace the above text with this code

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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>

Now scroll down still you can find ending tag for either </div> or </span> . Now paste the following script below the ending div / span tag.


<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts</h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

That's it now you will have related Posts hack in your blog.

Third Method :

In my Blog I am using this method . It's very simple. First do the step 1 from method 2 . ( adding script above </head> ) .

Now add the following tag below <p><data:post.body/></p> .

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on<div style="display:none;"> <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></div> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

Now you will have related posts widget of my style.

I hope one of the above method will help you to add related posts widget to your Blog. Still if you have problem then please contact me through contact form.

Outbrain Post Rating Widget for Blogger

Today I am going to write about an interesting Post Rating widget developed by Outbrain.com . This Post Rating Widget is available for all blogging services like Wordpress.com , blogger , typepad , drupal , etc . A Similar Post rating widget is developed by draft.blogger.com and is found here at Star Rating Widget

**********************************************
This is a very simple hack developed by Draft Blogger. To add Post Rating / Voting Widget developed by Draft Blogger please visit this this page " Post Rating Widget for Blogger " .

Advantages of this Post rating Widget :

1. Know your readers opinion about the post

2. Drive More traffic ( Outbrain has a feature called Recommended Posts which is embedded within rating Widget , So outbrain users who have enabled this feature will show your post . )

3. We can also display Most Popular posts with this post Rating Widget.

How to Add This Widget to your Blogger Blog ?

It's very simple . Visit http://www.outbrain.com and register an account ( to track traffic and details ). While registering , check this box (Yes - I want to install the outbrain widget and/or access my blog's reports ) .

After this step , claim your blog by filling your blog Details and click continue. A new tab/ window will open and just choose your blog . outbrain will install the widget automatically.

Configuring Post Rating Widget

Sign-in to your Outbrain account and click manage Blogs tab on left side and then navigate to Setting sub-tab.



Now customize the widget to your wish. If you check ( Best Recommendations box ) you will get posts from other blogs below your Post Rating Widget like this .




If you choose Most Popular Posts box then the widget will Most rated Posts above the rating Widget.

I hope I have given you much details on Adding this Outbrain Post rating Widget for blogger. If you have any problems let me know. Very soon I will post how to add this Outbrain Post rating Widget Manually , without registering Outbrain .

Thanks for reading...........

Page Navigation Menu Widget for Blogger

Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing Blogger Template.

Let us see how to add this Page Navigation Menu Widget :

step 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Page Element link there.



Step 2 : In that Page Element window , choose HTML / JAVASCRIPT .

Step 3 : Now add this Javascript in that window.

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my blog I have put that value as 2 . In each page you can see only 2 posts .


2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.

For example :

In my blog I have chosen 3 , then 3 pages will be shown.

Now save your template .
That's it now we have added Page Navigation menu widget to our blog successfully .

I hope you guys will feel this method is easier than the last one.

Add Search form to Blogger Beta Template

At first Adding search form to blogger was difficult but now Blogger Accessories has made it easier. We can add search form to blogger in three method . But in this post I am going to concentrate only on Adding custom search form . Custom search form means you can modify the search form look by adding simple CSS style.

Step 1 : Log in to your blogger template and go to Layout section .

  

Step 2 : Now click Add Page Element , in the List select Add HTML / JAVASCRIPT  and paste the below code thereand save .

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

Now see your blog , there you can see a beautiful search form widget like this ,

I hope you like this hack . you can also add custom search submit buttom , background , etc.





I will tell you How to add Custom CSS to this search Form tomorrow in my next post .

Navigation Menu or Drop Down Menu for Blogger

Here is an easy tutorial to add Navigation Menu or Drop Down Menu in Blogger. With this navigation Menu widget you can display most important links or categories in drop Down Menu format. This navigation Menu is very tiny and you can display as many links you want.

Let us see how to add this Navigation menu widget in Blogger :

Here is the Default code of Navigation menu :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Type your Navigation Menu Title Here! </option>
<option value=" Url of your Link here "> Title of your link </option> </select></form>

in this above code , you need to edit the text in red to add links .

The text in green color is meant to open links in new window. If you want the links to be opened in same window then replace the text in green to this blank . ( that is delete _ )

if you want to add more links then add the last three lines in violet repeatedly as many times you want.

Look At My code below so that you can get an idea :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blogger Accessories- </option>

<!-- change the links with your own -->

<option value="http://bloggeracs.blogspot.com/2008/07/jumong-three-column-blogger-template.html">Jumong Blogger Template</option>

<option value="http://bloggeracs.blogspot.com/2008/07/show-date-before-each-post-in-blogger.html">Show Date before each post</option>

<option value="http://bloggeracs.blogspot.com/2008/07/related-posts-widget-for-blogger.html">Related Posts Widget</option>

<option value="http://bloggeracs.blogspot.com/2008/07/hide-navigation-bar-in-blogger.html">Hide Navigation menu bar in blogger</option>

</select></form>

the result is :

- Blogger Accessories- Jumong Blogger TemplateShow Date before each postRelated Posts WidgetHide Navigation menu bar in blogger

How to Add this Navigation menu / Drop down Menu To my blog ?

It's very simple . First edit the code according to your wish and copy the code .

* Go to Layout section of your template .

* Click Add PageElement tab in sidebar

* Select HTML/JAVASCRIPT subtab

* Paste the Navigation Menu code you copied before there and save .

that's it now you can see a beautiful Navigation Menu in your blog.

See you soon with a new hack .

Star Ratings Widget for Blogger

One of the disadvantages for authors who use blogger is that there is no rating/voting widget . Because of that authors don't know how much the visitors liked their posts. After a longtime , now draft.blogger has found a trick . They recently posted that bloggers can now add Ratings widget on their blog through draft blogger .Let us see how to add ratings widget for Blogger,

Step 1 :

In layout section , under body layout click edit . A new pop-up window will open like this , here you need to check the

Show Star Ratings

If you are using template provided by blogger then you can see the widget after doing step 1. If you are using some other custom template then you need to add the following code below <div class='post-footer-line post-footer-line-1'> or similar .

<span class='star-ratings'> <b:if cond='data:top.showStars'> <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/> </b:if> </span>

by adding this code there , the star ratings widget will appear below each post. If you want to add it below the post title , then add the above code immediately below <div class='post-header-line-1'/>let's see how it looks ,

you can also add that code anywhere you want. if you want to add style CSS like padding , color , etc add

<div style='padding-left:50px; and other CSS part '>

star- ratings code

</div>

Thats it , hope you guys will like this new star ratings widget. See you soon with a new widget .For future updates , subscribe to my blog

Related Posts Widget For Blogger with CSS

Related Posts Widget for blogger is what everybody is looking for, In Most of the sites we will find only javascript code and HTML tag for related posts widget. After adding the code to your blog , you can see just a list of related posts without any arrows or style css. So i wanted to embed both in order to make the widget links looks beautiful.

First let's see the usual javascript and HTML Tag. Step 1 : Add the following Javascript code below ]]></b:skin> , thats between ]]></b:skin> and </head> .

<script type="'text/javascript'">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length &amp;&amp; i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Step 2 : Check expand widgets and search for <b:loop values='data:post.labels' var='label'> , Now copy and paste the following code in blue between <b:loop values='data:post.labels' var='label'> and </b:loop>

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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>

customize the text in green to show as many links you want.

Step 3 : Now paste the following script the code just below <p><data:post.body/></p> .

code :

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

Thats it , now look at the page , it will look like this

You can see there is no styling , I wanted to make it look beautiful . So i made the following changes . Both step 1 and 2 are same , just in step three make some changes .

<b:if cond='data:blog.pageType == "item"'>
&lt;div id=&quot;related-posts&quot;&gt;
<h2>Other Recommended Posts</h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>



now its time to add css part for this div section .

/*-- (Related posts widget -below posts) --*/
#related-posts {
float:center;
width:450px;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
background-color:#fff
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#A10000;
}
#related-posts a:hover{
color:#A10000
}
#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(http://img152.imageshack.us/img152/3756/bulletzc2.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}

Now look at the page again ,


You can even customize the link color , arrow style , font-size , etc I hope you liked this related posts widget , see you soon with another widget or hack.

Related Posts Widget For Blogger with CSS

Related Posts Widget for blogger is what everybody is looking for, In Most of the sites we will find only javascript code and HTML tag for related posts widget. After adding the code to your blog , you can see just a list of related posts without any arrows or style css. So i wanted to embed both in order to make the widget links looks beautiful.

First let's see the usual javascript and HTML Tag. Step 1 : Add the following Javascript code below ]]></b:skin> , thats between ]]></b:skin> and </head> .

<script type="'text/javascript'">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length &amp;&amp; i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Step 2 : Check expand widgets and search for <b:loop values='data:post.labels' var='label'> , Now copy and paste the following code in blue between <b:loop values='data:post.labels' var='label'> and </b:loop>

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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>

customize the text in green to show as many links you want.

Step 3 : Now paste the following script the code just below <p><data:post.body/></p> .

code :

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

Thats it , now look at the page , it will look like this

You can see there is no styling , I wanted to make it look beautiful . So i made the following changes . Both step 1 and 2 are same , just in step three make some changes .

<div id='related-posts'>
<h2>Other Recommended Posts on This Category</h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><
/div>

now its time to add css part for this div section .

/*-- (Related posts widget -below posts) --*/
#related-posts {
float:center;
width:450px;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
background-color:#fff
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#A10000;
}
#related-posts a:hover{
color:#A10000
}
#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(http://img152.imageshack.us/img152/3756/bulletzc2.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}

Now look at the page again ,


You can even customize the link color , arrow style , font-size , etc I hope you liked this related posts widget , see you soon with another widget or hack.