How to add a translate to other languages with flags | Nice Translation Widget

In what language do you blog, read and write? Well, I blog in English. English written blogs can be read by only those readers who understands english. But don't you want to share your writtings to those who don't read English? I think you'd love to. Then here is a solution I got from http://www.blogging.robertosblogs.net/. This script includes a large variety of languages with the flags of the country where the anguage is spoken. One can easily hover over the flag and translate an article to his intended language and enjoy reading your writtings in his own language. Isn't it cool? Okay, lets get started and add this script to your

blog so that non-english speaking people can also get benifitted from your blog.

First Log in to your Blogger Dashboard.

Go to Layout and add an HTML/Javascript widget to your blog. Copy the following code and paste it into the widget window. 

<form action="http://www.google.com/translate">
<script language="javascript" type="text/javascript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script>
<noscript><input value="http://YOUR BLOG URL/" 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 title=" Afrikaans | South Africa | Afrikaans " value="en|af"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/StLizqawtEI/AAAAAAAAAhk/aGuY6R70tNw/s320/South+Africa+af_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>
<input title=" Shqip | Albania | Albanian " value="en|sq"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/SulXteeOTLI/AAAAAAAAApU/zzVdH9EYg3Q/s320/Albania+sq_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>
<input title=" &#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577; | Saudi Arabia | Arabic " value="en|ar"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#1041;&#1077;&#1083;&#1072;&#1088;&#1091;&#1089;&#1082;&#1072;&#1103; | Belarus | Belarusian " value="en|be"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/StRavKvYSqI/AAAAAAAAAic/Mf3R1Dx51CY/s320/Belarus+be_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; | Bulgaria | Bulgarian " value="en|bg"
src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiXtQx-uLI/AAAAAAAAG6I/RuLPDhnFMXY/s320/Bulgaria+-+bg_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Català | Andorra | Catalan " value="en|ca"
src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-fM7vwhSI/AAAAAAAAHl0/ZoZkfhEb01M/s320/Andorra+-+Catalan+-+ad_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#20013;&#25991;&#65288;&#31616;&#20307;&#65289;| China | Chinese (Simplified) " value="en|zh-CN"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#20013;&#25991;&#65288;&#32321;&#39636;&#65289; | China | Chinese (Traditional) " value="en|zh-TW"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Hrvatski | Croatia | Croatian " value="en|hr"
src="http://1.bp.blogspot.com/__v4nth5_ki0/SMhVoigYF0I/AAAAAAAAG5s/naE3NObTVZs/s400/Croatia+-+hr_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#268;eština | Czech Republic | Czech " value="en|cs"
src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiX9aMIL3I/AAAAAAAAG6o/4-RYadolKWQ/s320/Czech+Republic+-+cs_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Dansk | Denmark | Danish " value="en|da"
src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiX9nD1NZI/AAAAAAAAG6w/ZnIBEtLIHEw/s320/Denmark+-+da_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Nederlands | Netherlands | Dutch " value="en|nl"
src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZWUAFSOI/AAAAAAAAG74/lsNT2NI_oFI/s320/Netherlands+-+nl_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Eesti | Estonia | Estonian " value="en|et"
src="http://2.bp.blogspot.com/_AKSZkmXmrnc/StT4ASM2ZsI/AAAAAAAAAis/PmQSwtOQNLc/s320/Estonia+et_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Suomea | Finland | Finnish " value="en|fi"
src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZwsOFndI/AAAAAAAAG8w/VlBr_zN32q8/s320/Finland+-+fi_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Français | France | French " value="en|fr"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Galego | Galicia | Galician " value="en|gl"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/StfhOOzBp9I/AAAAAAAAAks/qinFZhMlyd8/s320/Galicia+gl_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Deutsch | Germany | German " value="en|de"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#917;&#955;&#955;&#940;&#962; | Greece | Greek " value="en|el"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPND1C34DYs94463HLf6roZBdxiaROSQ50FgDWmdlYnp_5sZCAyhYfRDLdD3d_q49FnHlfBbLzt-bzjFHblECS4LSDAv29LZ3JVlIGz7myLdP1yatXoQ_HupNZt6E_8kcl3MD7TfoXdKRW/s320/Greek+Flag+36x24.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Kreyòl ayisyen | Haiti | Haitian Creole " value="en|ht"
src="http://2.bp.blogspot.com/_AKSZkmXmrnc/TBhgm6fUYbI/AAAAAAAAB4o/DidcfgV9A7o/s1600/Haiti+Creole+ht_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#1506;&#1489;&#1512;&#1497;&#1514; | Israel | Hebrew " value="en|iw"
src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-fNBP-7LI/AAAAAAAAHmE/fJeA_Sbl9w4/s320/Israel+-+il_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#2361;&#2367;&#2344;&#2381;&#2342;&#2368; | India | Hindi " value="en|hi"
src="http://4.bp.blogspot.com/__v4nth5_ki0/SMiYu9muwaI/AAAAAAAAG7Y/lO6YgNdyHM4/s320/India+-+hi_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Magyarország | Hungary | Hungarian " value="en|hu"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/StRtqlXKToI/AAAAAAAAAik/R38R7O52aDU/s320/Hungary+hu_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Íslande | Iceland | Icelandic " value="en|is"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/SteuRylaOeI/AAAAAAAAAkc/eRI7XsLEz34/s320/Iceland+is_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Indonesia | Indonesia | Bahasa Indonesian " value="en|id"
src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-fNKvGgZI/AAAAAAAAHl8/UESh2PimM5U/s320/Indonesia+-+id_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Gaeilge | Ireland | Irish " value="en|ga"
src="http://2.bp.blogspot.com/_AKSZkmXmrnc/SugR7i9pedI/AAAAAAAAAoU/HG7Sod0eQdQ/s320/Ireland+ie_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Italiano | Italy | Italian " value="en|it"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#26085;&#26412;&#35486; | Japan | Japanese " value="en|ja"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Kiswahili | Kenya | Kiswahili " value="en|sw"
src="http://2.bp.blogspot.com/_AKSZkmXmrnc/Sugd4gdlhQI/AAAAAAAAAok/Pyselb6uWtE/s320/Kenya+ke_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#54620;&#44397;&#50612; | Korea | Korean " value="en|ko"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Latviešu | Latvia | Latvian " value="en|lv"
src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNX2rCXI/AAAAAAAAHmM/1LRWqh7YQBA/s320/Latvia+-+lv_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Lietuviškai | Lithuania | Lithuanian " value="en|lt"
src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-fNrJizVI/AAAAAAAAHmU/kdaran4uffk/s320/Lithuania+-+lt_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#1052;&#1072;&#1082;&#1077;&#1076;&#1086;&#1085;&#1089;&#1082;&#1080; | Macedonia | Macedonian " value="en|mk"
src="http://1.bp.blogspot.com/_AKSZkmXmrnc/SumJcBVBZpI/AAAAAAAAApk/kY7CqDLy-Y4/s320/Macedonia+mk_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Bahasa Melayu | Malaysia | Bahasa Malay " value="en|ms"
src="http://4.bp.blogspot.com/_AKSZkmXmrnc/StVfgdeTNAI/AAAAAAAAAjE/7Vcnxzvy0eE/s320/Malaysia+ms_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Malti | Malta | Maltese " value="en|mt"
src="http://1.bp.blogspot.com/_AKSZkmXmrnc/StVnV4GqUAI/AAAAAAAAAjM/UUE5FAHZdyA/s320/Malta+mt_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Norsk | Norway | Norwegian " value="en|no"
src="http://2.bp.blogspot.com/__v4nth5_ki0/SMiZWYWSvEI/AAAAAAAAG8A/7sOoou7far0/s320/Norway+-+no_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#1601;&#1575;&#1585;&#1587;&#1740; | Persia | Farsi / Persian " value="en|fa"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/Sul5V-oc-6I/AAAAAAAAApc/1YIKlfK7L70/s320/Iran+fa_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Polska | Poland | Polish " value="en|pl"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuQXctexUstUuwY7g004n6RvlBoi2t_CpdDC5a7zAAPtFNctasXgQ3LRIIj7rWbDDsUKdeCvHND4RyuNMUF7VOgkaV1YIN7EmMzz0V9cULl9OitXc68MMQd6WamwcK52_4X0bATdsHUtNt/s320/Polish+Flag+36x24.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Português | Portugal | Portuguese " value="en|pt"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Român&#259; | Romania | Romanian " value="en|ro"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QSnOhMtexvSu_D31hpVFCgflye-dTg0ZYCbTHbzSVgAXdYHSqYsj1g2jaMeBw-mzyrccbOBxwQk455aHZWIjwBz3ns0yuLMQkg9UxZYmeB3xZKhW-uH1fmSJNf11ZDvofjJO_27dd4IQ/s320/Romainian+Flag+36x24.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#1056;&#1091;&#1089;&#1089;&#1082;&#1086;&#1084; | Russia | Russian " value="en|ru"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" C&#1088;&#1087;&#1089;&#1082;&#1080; | Serbia | Serbian " value="en|sr"
src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f7_imioI/AAAAAAAAHmk/ytbpoyJHbmo/s320/Serbia+-+si_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Slovenský | Slovakia | Slovak " value="en|sk"
src="http://4.bp.blogspot.com/__v4nth5_ki0/SP-f79KzfyI/AAAAAAAAHms/-I315jcpHN0/s320/Slovak+-+sk_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Slovensko | Slovenia | Slovenian " value="en|sl"
src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f8P0fwiI/AAAAAAAAHm0/Lzeh8mXiWvE/s320/Slovenia+-+si_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Español | Spain | Spanish " value="en|es"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Sverige | Sweden | Swedish " value="en|sv"
src="http://1.bp.blogspot.com/__v4nth5_ki0/SMiZwrYspyI/AAAAAAAAG8o/uVUWBAyZkVc/s320/Sweden+-+se_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Tagalog | Philippines | Tagalog " value="en|tl"
src="http://1.bp.blogspot.com/__v4nth5_ki0/SP-f7gyN2aI/AAAAAAAAHmc/x_LSaXlHtCs/s320/Pilipnas+-+ph_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618; | Thailand | Thai " value="en|th"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/StKoTKbCsMI/AAAAAAAAAg8/JfICxQ5m6yk/s320/Thailand+-+th_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Türkçe | Turkey | Turkish " value="en|tr"
src="http://2.bp.blogspot.com/_AKSZkmXmrnc/StLWW4Zyu6I/AAAAAAAAAhU/FU5iu_D0TLQ/s320/Turkish+-+tr_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" &#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1080;&#1081; | Ukraine | Ukrainian " value="en|uk"
src="http://3.bp.blogspot.com/__v4nth5_ki0/SP-f8Bg1AMI/AAAAAAAAHm8/b4jhQQPSvj4/s320/Ukraine+-+ua_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" ti&#7871;ng Vi&#7879;t | Vietnam | Vietnamese " value="en|vi"
src="http://2.bp.blogspot.com/__v4nth5_ki0/SP-gZakjpuI/AAAAAAAAHnE/fwfNZkisDOA/s320/Vietnam+-+vn_flag.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

<input title=" Cymraeg | Wales | Welsh " value="en|cy"
src="http://4.bp.blogspot.com/_AKSZkmXmrnc/SugQR0g60cI/AAAAAAAAAoM/rmVA-1LvU4g/s320/Wales.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>
<input title=" &#1497;&#1497;&#1460;&#1491;&#1497;&#1513; | Jewish | Yiddish " value="en|yi"
src="http://3.bp.blogspot.com/_AKSZkmXmrnc/SupeM9if5gI/AAAAAAAAAp8/1gp_kA_Mhnk/s320/Yiddish_Star.png"
onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;"width="30" name="langpair"/>
</form>

Change http://YOUR BLOG URL/ to your own blog URL in Line 7 of the code. Save your widget and you are done. Visit your blog to see the changes. Enjoy blogging.

Read More...

How to add a floating share bar with facebook, twitter, stumbleupon etc. buttons to your blog

This is another sharing plugin to your blog. Many big names are using this type of sharing bar in their website. People always like to share things which attracts them and they think that this might be useful to my friends too. The bar floats with your page contents. The bar contains facebook like, Google plus, twitter tweet buttons and stumble upon, digg share buttons. It looks great and easily attracts your visitors to share the content they like. I recommend you try this widget with your blog and you should see a bit increase of traffic to your blog with the sharing facility. Here is a step by step guide to activate the share bar on your blogger blog.

1. Log in to your Blogger Dashboard.

2. Go to Layout and add a HTML/Javascript Widget.

3. Copy the following code and paste it into the widget. 

<!-- floating share bar from www.learnatleisure.blogspot.com -->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from BloggerSentral.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.learnatleisure.blogspot.com/">This</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar by www.learnatleisure.blogspot.com End -->

4. Click Save. You are done. The next time you visit your blog, you will see the share bar in the right side of your blog.
You can add more sharing options using Addthis sharing bar. This will enable you to provide your visitors with more than 200 social sharing and bookmarking websites. The bar will look like the above mentioned, but it will contain more options. You need to replace the code in step 3 with the following:

<!-- AddThis Button brought to you by www.learnatleisure.blogspot.com BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51356f4c646f3551"></script>
<!-- AddThis Button brought to you by www.learnatleisure.blogspot.com END --> 

To add more customized sharing gadgets, go to https://www.addthis.com/get/sharing and choose the one you like most. Enjoy blogging.

Read More...

How to add social sharing buttons to your blog post

Social sharing button helps your readers easily share the content of your blog with their friends through social networking and social bookmarking websites. Hence it helps you getting a bit more traffic to your blog. So, placing social sharing icons in your blog post is a good idea to engage your readers sharing your content. If someone likes your post then they simly share it with their facebook, twitter, linkedin friends. How cool is that? In this post I am going to tell you how you can put social sharing button into your blog post. You can either put them just after the post header or at the end of the post. Just follow these steps.
1. Log in to your blogger Dashboard.
2. Go to Template> Edit HTML and hit Proceed.
3. Press Ctrl+f and put <head> in the search box. When you find <head> in your template, copy the following lines and paste it just before the <head> tag.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "f68cf65b-e48d-44e4-9a9d-73dc0722cfb9", doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>

4. Now search for data:post.body tag. There will be more than one such tag. Find the first one and copy the following code and paste it above the <data:post.body/> tag. If you want the sharing icons display at the end of the post, paste the code you copied after the tag.

<span class='st_sharethis_vcount' displayText='ShareThis'></span>
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
<span class='st_linkedin_vcount' displayText='LinkedIn'></span>
<span class='st_pinterest_vcount' displayText='Pinterest'></span>
<span class='st_email_vcount' displayText='Email'></span>

5. Now Click 'Save' to save your Template. You are done. You should see the sharing icons in your blog post as shown below. Enjoy blogging!!

Read More...

Disable Right Click on your blog with JQuery | Prevent copying content from your blog

Do you want that no one can copy content from your blog? You write valuable content and

work hard to write your blog and someone can easily steal your words. This can harm your search engine reputation too. So you need a solution to protect your contents on your blog. Well, you can do it using a simple JQuery. This will disable right mouse clicking on your blog page, so viewers will not be able to copy text or save your webpage. Just follow the below steps and you will know how to do that.

Step 1: Login to your blogger Dashboard.

Step 2: Go to Template and Click Edit HTML and choose to Proceed.

Step 3: Scroll down to where you see &lt/head> tag . Alternatively press Ctrl+f and type &lt/head> to find the tag. Step 4: Now copy below code and paste it just before the &lt/head> tag .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
    return false;
});
});

//]]>
</script>

Step 5: Hit 'Save' to save your template. Now you are done. Right clicking will be disabled in your blog page. Check yourself. Enjoy blogging.

Read More...

How to show Current Time in Title bar of your blog

I found a javascript somewhere over the Internet, whis is used to display Current Time in the Title Bar along with the Title of your blog. I am going to share with you how you can show time on title bar easily. Follow these steps:

Step 1: Certainly you need to Log into your blogger account. After loging in, go to your Dashboard.

Step 2: Go to 'Layout' tab and add a HTML/Javascript widget anywhere in your template design.

Step 3: Copy the following javascript code and paste it into the widget window.

<Script Language="JavaScript" Type="Text/JavaScript">

var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;

</script>

Step 4: Hit Save. Save your Template. You are done. 

You can view your blog typing the blog url in a new tab to check whether the time is showing properly or not. Hope you did it. 

Read More...

How to add animated flying twitter bird to blogger

Have you ever seen a small twitter bird flying in a webpage? When you scroll down and up in pages, the bird flies and moves its position to your new screen. When you hover your mouse cursor to the bird, it says 'Follow me' or something, clicking where you end up to a new twitter page where you can follow the author of that website. It is really cool. Here is a simple trick using which you can also add a flying twitter bird into your blog which will give your viewrs to follow you on twitter. Here is how you can do it: 

Step 1: Sign in to your blogger account. Go to Blogger Dashboard. 

Step 2: Go to Design tab and click on 'Edit HTML' and Proceed.

Step 3: Now hit Ctrl+f and put </body> in the search box. When you find </body> , copy the following code and paste it just above </body> tag. 

<script type="text/javascript">
var twitterAccount = "YOUR TWITTER ACCOUNT NAME";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by LaL' href="http://learnatleisure.blogspot.com" target='_blank'></a></span>
<!--  animatedTwitter Bird Widget for Blogger by www.learnatleisure.blogspot.com -->

Step 4: You need to do a small editing in the piece of code. In place of YOUR TWITTER ACCOUNT NAME put Your Twitter Username. 

Step 5: 3. Save Your Template. That's It. Now You're Done. Now visit your blog and you should see a twitter bird which will fly accross the page when you scroll up or down. Did you see it?? You are a genious. Enjoy!!!

Read More...

How to Add Google Translate to your Blog

Adding a Google Translate button to your blog will definitely increase your blogs reader, because translating your blog will enable non-english readers to read and enjoy your blog. Also it will help you gain more traffic, because the search engines will show up your blog in search results whenever someone quaries in another language also. Here I am going to illustrate how you can add a Google translate gadget to your blog. Follow these steps:

1. Login to your blogger account and go to your Dashboard.

2. Click on 'Layout', then 'Ad a Gadget' link to add the gadget wherever you want.

3. From the pop-up window, select 'HTML/Javascript' to add a HTML/Javascript widget.

4. In the widget window, paste the following code copying from here:

<script type="text/javascript">
function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
</script>

<style>

 .google_translate img {
margin: 10px 20px 0px 20px;
    height: 24px;
    width: 24px;
        }
        .google_translate:hover img {
filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }

.more {
    display: none;
a.showLink, a.hideLink {
    text-decoration: none;
    color: #0880C4;
    padding-left: 18px;
    background: transparent('down.gif') no-repeat left; }

a.hideLink {
    background: transparent url('up.gif') no-repeat left; 
color: #0880C4;}

a.showLink:hover, a.hideLink:hover {
color: #0880C4;
 }

 </style>

 <div>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBhU5V_UTlCa0Ptri_-3HkYJm2TivGy9eu61owbU4il0xVryIDrc8ZxoM_wvT14e8NVQcHQvjrVoGYclMuUlBdgtmj7zRsWNIp5cKK55qhyeCRmrzHBgVKc5dLL5KQGlu867vm0K4TBr7B/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmD-kUAihRqOYl2KzU_uEbTbCFkCZ_7Gwo912XomWD9E6D6fnta5anG8d0IFofbry0XFUnikWqwU-bimdffHRWHkU78Si_Pjlofg8HgH4qyQwYujLnVX9WjLxh5m4A-HlwuOCYqHhv1fnp/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5LLdAW1KfSLkHs3E0FyJXhuACRNkYjE9JbwAi8yDPYlYf227Q_NLfxEOq5wnlI6eADXBF7Xor4WneaanOJC5vekc_EgPPrTFwSj_5tq94jVBsy41FSwm1cNjwScQIUXU4vqxgaTXruzTE/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzSLBbuL4rXA4aB8tL0Vw2iLMQIngWrvFcWDzSqyw_Bq1bRPLWdTsOf9CW9ZacmGv6bF02QbkCLqxXwu7zIX8KFMUb6KrPIcG-PMCjumnHytuUkcWO4hCLvQ6Q8Xzk6QL4gC59IGtaOoaO/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink" 
onclick="showHide('example');return false;">More</a>
<div id="example" class="more">
 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxr9rFS1MD1S_1LWMguAJOf3r3CaCIBzVmZnVcft7DJ2TlZ_GeSwzlbfAX4FjvIQ_oZsJy6R0kbR-f1vwfQvWzbOD7ZX8sffcBlF6LyIFKgv0Tm7dc1ZL4hGFsyxHOacUFk6EpvF4hPE-n/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y6_FTvssS2QZEW7uLVIJlPVD888IPS2z_pLnIAd-9E8cO1cshiwUWk0JNPAo07O4QR9NLkmF_96NDAG0plI_tLKF4E8xEjFxM4Mp61kJOQ631ADBtmOwI5FCyA4yrgTEYhCMzBOIc6d-/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYSXrfSEzBuZmpiZstfrwVlVDoKh-WZvXpGzEfcRIfAgZ1Ouxy-cnO_rDfq1RLHgRx67z2-HiDv4tw0xyTgtx_fUSXcRLEWWf9FMh10llVeAbfvRarJzMDOf7NfxJEbnsbdFnAfmaL7yG/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDzCg_-Fky9SefBJBSskdWH0-7qc2xhEds0Ewa98mhwvG9SZkk3oH4qUh2BW1c4EBSNwAN1YkK8fGgAulQPeKMATGAksnjaipap-OW11SRJ8sS5L6rEsbZX4V02sjFpr_rzy3okF2dgKfe/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br />
 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwvbpDO3VmL9OLtm9mH9e5oI4zDgAykUSZdy0I5cQkInPpnGeRNynd8srjJZpCWDnVGl13k4pWkfrVDcX0VHP0_POJU_QIcSd28b18SUAnivvqmlMVRlZ0lr-XzRN_ny3m3PVSakdrH6X/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaL-fufURlz-fPotwsRVSr9v2nDOVyChWbZ2dddm0EiD8iL2mZN8K7II0cfg4GfCo_39ekxuhsu-r7ks0OQH4kI5PtUcBjMYqX3Ty5ncyxl37YWnibdXqrHULjJMlu5DnHZQ8v68qyzKbY/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cVffIpB6AhNz9wkrHV1OjFra9b9ygQD0RYrZykzn8olrfBHtzDGprq-dED3asVIBpj87nGu9O6b0bACSE1t-GzVVszKo2YGZRhMVFCUwu9QE2eu_vIStLoISQD4sGD16PX0XyRFy7cg4/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCzVRtsdPuYXSXswquke_nSrZgh9stwy4YfQTZQ1xMdPCCNjarHkmJYjMf5NC9JsbZFuBmoTcCJDIVWLrrbMVbHfEv771dczoKGkJpbkF6iHyJfDVF_ufDixPY0yaSglb5TpI1vFV_IKLk/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
    <p><a href="#" id="example-hide" class="hideLink" 
    onclick="showHide('example');return false;">Hide / </a><a href="http://helplogger.blogspot.com"><font size="1px">Get this widget</font></a></p>
</div>
     </div>

5. Click 'Save'. You are done. Now you will see the Google Translate widget in your blog. It was quite easy, isn't it? Enjoy blogging!! 

Read More...

How to Add Image Icons Next To Hyperlinks in Blogger

Even wondered how they show up an image or an icon next to a link in their blogs? I was also thinking about that. I tried to put image alongside the hyperlink, but it did not appear properly or it was not rendered properly at all. So, I started crawling the web to find a solution, and learned some useful information about the same. i am going to share these info with you, so that you can also implement it in your blog or website. Here is how you can do this in following steps:

Step 1: Login to your blogger account. Go to your Dashboard. Click on your appropriate blog, where you want to apply this. Click on Template tab.

Step 2: Then Click on Edit HTML and Click Proceed. (You can do this by following Blogger > Design>  Edit HTML in older interface of Blogger.)

Step 3: Check the "Expand Widget Templates" Box and when expanded, search for the following (you can press Ctrl+f as a shortcut to search a string),

]]></b:skin>

Step 4:  Just above it paste the code given below:

.latl-hyperlink-1 { 

background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
padding:7px 0 0 25px; 


}

You need to change the ADD YOUR ICON LINK HERE to your hosted icons link. You can host your icon or image file to blogger itself or to picassa, photobucket or such free image hosting platforms. Then you copy the image link and paste in here.

If you wish to use three or four icons simply keep on adding the same CSS code given above by changing only the digit number i.e. 1, 2 , 3 , 4 like following:

.latl-hyperlink-1 { 

background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}
.latl-hyperlink-2 { 

peat 0px 0px; 
padding:7px 0 0 25px; 
}
.latl-hyperlink-3 { 
background: url(ADD YOUR ICON LINK HERE) no-r
e
background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
padding:7px 0 0 25px; 
}

g:7px 0 0 25px; 
}

.latl-hyperlink-4 { 
background: url(ADD YOUR ICON LINK HERE) no-repeat 0px 0px; 
paddi

n

and so on...

Step 5: Save your template and you are almost done.

How to do it?

As an example, suppose you wish to provide a link to your user to download a file from somewhere and you want to display an image next to the download link you are providing. To do so, you simply need to put the CSS class to the link i.e class="latl-hyperlink-1"  as shown below,

<a  class="latl-hyperlink-1" href="http://abcdzx.com/files/software.abc">Download The Software</a>

Remember that, you have to put do this in HTML mode when you are editing your post.After you do that, you will see the Icon appearing next to your link. Thats it. Voila! You are a genious!! Enjoy.... 

Read More...

HTML and Javascript Parser

HTML codes need to be parsed correctly if you want to place it in your blog or website and show it as codes. The code will not render correctly if you dont parse them and place them as raw code. This HTML parser tool will assist you parsing your HTML and javascript code correctly so that you can place them in your blog and showcase them as code snippet. To parse HTML or Javascript code, just paste your code to the first textarea and it will automatically parse your code in the second textarea. Just copy the parsed HTML and paste it where you want.

Enter HTML Code
(paste or write HTML in below textarea)

 
Parsed HTML Code
(copy the parsed HTML from below textarea)

Read More...