PosRama

Add Language Translator/ Flags Images Widget To BlogSpot Blog

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

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

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

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

*source - Google

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

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

<center><table border="1">

<tr>

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</form></td>

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

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

How to show Top Commenters/Commentators widget on BlogSpot Blogs

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

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

Now copy and paste this code in to it:

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

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

Create a Google Look-Alike Logo For Your Website or Blog

Here's a small post for those webmasters and bloggers or anyone who is a Google fan, and want to have his name, or his blog's, website's or company's name in the way Google Logo appears. As you can see in the image, I have made a logo for my blog's name.

Just visit this website:
GogLogo.com

Enter the text, and hit Enter, that's it !

Although you cannot save the final image as it is, because it is made by combining different letters, so to save the logo, take a screenshot [PrtScr] from your keyboard, go to Microsoft Paint (MS Paint), and paste and save it !

Send Your Blog Updates (Feed) to Twitter Automatically

If you have 100's of followers in Twitter, then you can easily invite them to your blog by tweeting your blog posts. But tweeting every time when you write a new post may not be so easy. So how about automatic tweeting of all the blog posts ?

Twitterfeed has made this very easy for you!
Just register and now onwards, every new post published on your blog will be straight away displayed in your Twitter updates...

NOTE: You don't have to register with a new name at TwitterFeed, use your OpenID to Sign In. For bloggers using Blogger.com as their blogging platform, they can use the url (******.BLOGSPOT.COM) of their blogs to sign in.
Then click on "create new feed" fill out the form and that's it....now your life will be more easier :)

Simple Recent Posts and Recent Comments Via Feeds Blogger

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

To add the widget, follow these steps:

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

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

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

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

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

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

How To Add "Rating" and "FeedBack" In Blogger

Many of the visitors, usually do feel like leaving a comment on your posts, but finally due to laziness or no-time, they don't. If you still like to get a quick feedback from them too, then it is a better idea to place a "rating" system below all your posts, and also you can put a one-click poll like "feedback" system.

It is very easy to activate any/both of these options in your blog.
Firstly go to Draft.Blogger.Com instead of Blogger.com, (Draft.Blogger.com is the beta version of Blogger). Now log in, and go to "Layout" section. Then in the "Blog Posts" widget click on "Edit" link

Now in the new window that opens, you can activate the "Reactions" and "Ratings" options. Yau can even edit them before saving.

How To embed Flash And Javascript Files In HTML Posts

If people say "Pictures speak a thousand words", then it would not be wrong to say that "Flash and JavaScript speak a million words".

To make a successful and attractive blog, instead of plain and simple HTML of 1980's you should occasionally add flash(.swf) files and of course must include javascript files to your posts and sidebars.
The process is very simple, almost as simple as adding an image in HTML, the only difference is there are a little more lines of code to remember/copy :)

For embeding Flash Files:
First of all embed the flash content (file), to your Googlepages.com account or anywhere which gives a direct hotlink to the file, and of course also offers a good amount of bandwidth. That is why I prefer Googlepages.com fro this because Google never sets restriction on bandwidth, although web space available per account is limited to 100MB.

Paste these code lines, where ever you want to embed the flash file.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700"
height="322">
<param name="movie" value="Name_Of_File.swf">
<param name="quality" value="high">
<embed src="http://DIRECT_LINK_OF_YOUR_FLASH_FILE.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="700"
height="322"></embed>
</object>

Note: Replace everything in the bolded color, with appropriate links and values.
In case your visitors do not have flash installed/enabled in their browser, they will be promted for installing it from Adobe.com

Note: In the code above there is both an <embed> tag and an <object> tag. This is because the <object> tag is recognized by Internet Explorer, and Netscape recognizes the <embed> tag and ignores the <object> tag.

For embeding Javascript Into HTML posts:
JavaScript code is typically embedded into an HTML document using the SCRIPT tag.

<script language="JavaScript">

</script>

The LANGUAGE attribute is optional, but recommended.

<script language="JavaScript1.2">

Another attribute of the SCRIPT tag, SRC, can be used to include an external file containing JavaScript code rather than code embedded into the HTML:

<script language="JavaScript" src="DIRECT_LINK_OF_JAVASCRIPT_FILE.js">
</script>

Back Up Your Blog Posts And Comments

Blogger offers free blogging to anyone with a gmail account, moreover it offers more than one free blog for a person. We know it for sure, that our blogs are safe with Google (or call it Blogger).
But chances are there, that suddenly you may lose the content of the blog, which includes all the posts and the comments, like this case from Blogger-Help group :
brandyjolly (Nov 29, 6:45 pm)

I need help!
I was using blogger to present my masters project for my final
semester and found out that before it could get graded, the blog was removed. but my computer doesnt have a back-up because it broke a few weeks ago so now I'm left with seemingly nothing. Is there any way to recover my lost blog. There was no message other than it had been removed.

Please help!!!!!!

brandy

http://groups.google.com/group/blogger-help-troubleshoot/browse_thread/thread/4a5ea72246c863f5

Now as in the above case, once the blog gets deleted, it is very difficult to recover the content (although you may try Google cache method, explained in the end of this post, incase your blog has been indexed by Google)

So, to avoid all those head aching tweaks, simply you should take frequent backups of your blog's content, comments and widgets whenever possible.
This method is just like backing up your blogspot template, the only difference is that, you have to log into Blogger Beta, and after completing the process, you will get an xml file containing all the blog posts with comments, which can be then uploaded to any other blog with any other template. Save that file on your computer, and somewhere online too.

Follow these steps:
First you have to log in to Draft.Blogger.Com and not into Blogger.com
Then go to Settings section
Now click "Export Blog", then click on "Download Blog". Downloading time depends on the number of posts and comments.

That's it. Now you can upload this file by a similar process to any new or old blog, while uploading you have to click on "Import Blog" in the settings section of the new blog, instead of "Export Blog", and upload that previously downloaded file. And finally you'll have all your blog content shifted to a new blog.

*Update: Another method to back up your content is to subscribe to your own blog through email/FeedBlitz. By this way, all new posts written by you will be delivered to your email inbox.

In case you are here, for a complete recovery of your blog's content, then it is only possible if your blog has already been indexed by Google. Go to Google.com and type this
cache:BLOG_NAME.BLOGSPOT.COM
Then immediately save those pages.

Or you have to request Blogger for your blog's content !

How to Add Related Posts Below Every Post

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

First of all download this file:
relatedPosts_ForBlogger2.js

Zipped File*

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

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

</head>

And just BEFORE/ABOVE this code, paste this:

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

6. Now search for this code line:

<data:post.body/>

And after that line, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>

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

How to Hide/Remove Navbar

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

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

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

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

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

It will look like this now :

So open and see a Navbar free blog !

Add Favicon To Blogger/BlogSpot Blog Easily

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

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

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

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

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

</head>

And immediately ABOVE?BEFORE it, paste this code:

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

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

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

Verify Technorati Claim Token

Verifying your Technorati claim token is very easy. Here are the steps:

#1 Make a new post
#2 Paste your claim token on the post content
#3 Publish post
#4 Go to your Technorati account and click on “Check Claim”

As a proof, this post was the post I made to verify my blog on Technorati.
My Technorati Claim Token : MNCAHSXDFAAT

Getting Started With Technorati - A Begginers Guide T0 Technorati

What is Technorati?

Technorati is an almost in real time search engine focused primarily on blogs, but really it picks up anything with an RSS feed that has been "claimed" in Technorati.

How do I claim my blog in Technorati?

It's a very simple process; in fact, I've claimed two blogs now with nary a fuss. Just go to the Technorati Claim Your Blog page and follow the directions.

How does Technorati benefit me?

If you own a blog or website, and would like other people to find you, Technorati is an excellent resource to drive targeted traffic. First, you'll need to understand a little bit about Technorati Tags.

What are Technorati Tags?

Tags are basically just a way to categorize something. You can tag your blog postings, images, links, etc. with any tag you want. When other people search for something within Technorati, say "cheese", all the posts, images, links, etc. that have been tagged with the word "cheese" will show up.

Now, there is a bit of coding involved with this, but it's very non-scary. Go to the Technorati Tags page to get the code format that you'll need to use for your tags, or, you can check out a few of the Technorati Tools to automate the tagging process.

How does all this Technorati stuff fit together?

Okay! Here's what it all looks like:

1) Sign up for a Technorati account.
2) Once you sign up, you'll be asked if you have a blog to claim. Go ahead and complete this process.
3) Now that you're all claimed and good to go, you can start tagging your posts (see above for more discussion on tagging).
4) If you've claimed your blog and there's no problems (knock on wood), it should automatically update to Technorati without much help from you. However, if you'd like more of a say in the process, check out Technorati's developer center.

And that's it, at least, the very bare bones of getting claimed in Technorati and starting to learn how to tag your posts.

Want to learn more about Technorati? Check out Technorati Search Tips.

Technorati Search - Tips How to Search Technorati - Find Something Using Technorati

If you haven't already, check out my Beginners' Guide to Technorati to get the lowdown on signing up, claiming your blog, and the bare basics of tagging.

Searching Technorati

You have a few ways to search for what you're looking for in Technorati.

Search by keyword: Use the main search box and drop-down menu to search for a keyword in blog posts, in tags, or in the blog directory. If you want to search for a phrase, use quotes: "cheesey poofs."

Refine your search: Once you've initiated a search, you can further refine it with Technorati's stable of interesting search parameters: authority, languages, and related keywords (takes you to more topics that are related to your original search query).

Search a specific blog: You can use Technorati to search within specific blogs, much like Google Site Search. Just enter in the URL of the blog you'd like to search, and you'll be prompted to search within the blog (that's where you'd enter the keywords you're searching for).

Keep track of your Technorati searches: Is there a particular search that you'd like to keep getting updates from (without any help from you?) Then Technorati Watchlists are for you. In order to set up a Watchlist, just add a keyword or phrase or URL that you'd like to keep track of, and Technorati will update your Watchlist every time it finds an instance of your request.

Use Technorati Advanced Search: All of Technorati's search services are conveniently located on one page: the Technorati Advanced Search page. You can do all kinds of really complicated (or simple) searches here.

What Most People Search For - Which Are The Popular Keywords To Use

Every Blogger wants huge traffic to his/her blog. Although by using social networking websites like StumbleUpon and Digg, you may get many visitors, but this traffic usually doesn't last long and is mainly focused to any particular page.

So to get consistent traffic, the best option is always the major search engines like Google, Yahoo! and MSN. And even out of these search engines, the most preferred search engine is of course Google.com

So if you want to know, exactly which keyword to use, whether to use American English or UK English (as different people use different spellings like colours or colors), visit the link below to get all your answers:

(The tool helps people to calculate the worth of any word, by it's popularity in the global searches, but you can use it in another way too, that means, you can use those words which are mostly searched for, in your articles and posts.)

Google Adwords Tool

Type the words one-by-one then enter the captcha and click on get keyword ideas
So for the words entered by you, now the results will be displayed, along with similar phrases, and you will see how many people have searched for those phrases in the recent past.
In the Approx search volume(for last month), the numbers displayed tells you the approximate number of search queries matching your keywords that were performed on Google and the search network in the previous calendar month. This number is specific to your targeted country and language as well as your selection from the Match Type drop-down menu.

Another way to get huge traffic, is the utilization of Hot Trends tool, given by Google Labs, which displays the 100 Most searched words in Google by the people of United States.
Google Hot Trends (Although limited to US searches only)
By having a look at that page, you can see what word is being searched the most in the last 1 or 2 hours, and then quickly find out why, then present the whole story in a more better way so as to attract more people. And as the story behind the keyword spreads more, & so even more number of people will start searching for it.

The above mentioned tool is actually a part of "Google Zeitgeist", which means "the spirit of the times", and Google reveals this spirit through the aggregation of millions of search queries we receive every day. Several tools of Google give insight into global, regional, past and present search trends. These tools are available for you to play with, explore, and learn from. Use them for everything from business research to trivia answers.

Add your blog to Google Blog Search

If you are a blogger, but not using Google's Blogger (or Blogspot blog), even in that case, you can easily allow your blog to be shown in Google blog Search results. The process is very simple, just visit this page [Google Blog Search Ping Service], and enter your blog's url/address and click on the submit blog button.

Hide Sitemeter Tracker Button

In my previous post, I discussed about the most accurate visitors tracking websites. And as I said, some of the features provided by Sitemeter and Statcounter are only available to paid members, one of such feature is an invisible counter. Although from StatCounter, you can easily get the code for an invisible counter without paying a penny, but in SiteMeter, the code is only available for the paid members. So here is a simple method/trick to hide that meter button completely from your website, without upgrading your account.

Log in to your sitemeter account and click on "Manager" link. Now click on "Meter Style" green link in the left sidebar. Then click on the sixth radio button (For a display of numerical count of visitors).

Now when you click the "Select" button, you will be asked for selecting the background and font(digit) colors. So simply select both of them as "transparent". Select "Shrink width" and remove tick from the "Commas" option. Save it. That's all, go to your website, and the button will no longer be visible :)

How To Track Visitors And Optimize Your Website

If you haven't used Blogger in Draft (Beta-Blogger) till now, then do it right away. It is where, Blogger releases all its new features before officially adding the services to Blogger blogs. To access Blogger in Draft, instead of logging in to Blogger.com log in at draft.Blogger.com

The latest Beta add-on from Blogger is a "Stats" section in the Dashboard - to monitor and analyze your visitor traffic in near-real-time.

Tracking your visitors' activity on your blog is an important part of Search Engine Optimization (SEO). So, if you haven't yet accessed the "Stats" section of your Blogger-account - then do it right now. And as of now "Blogger Stats" is relatively new and limited in terms of the information these tools provide, so even now I advise everyone to sign up at the below mentioned websites/services, start tracking to give your visitors what they want (that's what SEO is all about)...

You would have seen many fancy and flashy visitor counters in hundreds or rather thousands of blogs, but simply counting the number of visitors or page views is totally of no use to any blogger or webmaster. Visitor-Tracking is a much more advanced and useful method as compared to those simple counters.

So here's a list of important tracking websites, providing free and fabulous features to all the bloggers...
The tracking reports and statistics from these websites mainly contain:

1. Of course, unique visits & page views, averaged and archived to weekly, monthly and yearly graphs. (And all the reports are in real time)

2. You can also view the details like, visitors IP addresses, time spent by them browsing your website, pages visited, and their returning visits. Moreover, you can even check the operating system your visitor is using, their screen resolution, their browser with version and whether Java or Flash is enabled on their system or not.

3. And the most important statistical-reports for you are of course related to Search Engine Optimization (SEO); these include the keywords through which they entered your site, list of search engines which referred visitors to your website.

You can easily track the activities of your visitors for completely FREE, by placing simple JavaScripts on your blog provided by websites like StatCounter and Google. Statcounter gives a simple script, which when placed in to your template starts collecting all the above mentioned information, which is then displayed to you. The stats are simple to browse-through and understand. Using these stats you can improve your blogs structure & content. You should also focus and improve the important posts of your blog which bring maximum traffic to you.

The most important tracking site of course belongs to Google. Being a blogger you cannot afford to miss this one: Google Analytics. Although it may take a little more time to understand all the statistical data displayed at G-Analytics completely and even more time to analyse the data and use it to effectively plan your SEO strategies, but being a Google product it will not only provide complete tracking details as provided by other similar services, but it does help a lot in Search engine optimization (SEO) too.

In Statcounter, to get some of the advanced features, including an increase in log size, a paid account or an upgrade is needed, but at Google-Analytics everything is free, rather they even have an advanced beta section for interested members.

And finally a must for everybody is an account in Google Webmaster Tools, where you have to simply submit your websites sitemap to access the most important SEO details.
The stats shown by GWT are not directly about your visitors, but are
You can see the number of pages indexed by Google, pages/articles deleted by you, pages restricted for Google. And you can even see how many website/webpages around the Internet have linked to your website (and to which specific page). How well are your internal pages are connected. And again, one of the most important, you will be shown how many pages of your website has high, medium, low or no PageRank.

So finally I will suggest you to get an account in:

(1) Google Analytics, (2) Google Webmaster Tools and (3) Statcounter

And just for fun, if you want to know how many people are online on your website at a time (real time), then put a widget from Amung.us, that doesn't even need you to register :)

How to add Separate Meta Tags for Individual Posts

Previously I have written on "Why and How to use Meta tags for Search Engine Optimization in Blogger". Now through that method, you can although add meta tags for your entire blog, but not separately for each and every blog post. As you know, Google and other search engines now rank each page (article) separately, so it is very much needed to gain PageRanks for every post you write.

So follow this easy method, to add meta tags and keywords to each of your important post.
Log in to your Blogger.com account and go to "Layout" section.
Then click on "Edit HTML", and then back up your present template first.

Then in the first 10-20 lines, find this :

<head>

Now immediately after this code, add these lines:

<b:if cond='data:blog.url == "http://URL_OF_YOUR_NEW_POST.html"'>
<META NAME="keywords" CONTENT="ENTER_KEYWORDS_SEPARATED_BY_COMMAS" />
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW"/>
</b:if>

If you want you can add description and author meta tags too, simple add these two lines along with those above:

<META NAME="description" CONTENT="WRITE DESCRIPTION HERE" />
<META NAME="author" CONTENT="YOUR NAME" />

Meta Tags - Importance and How To Use

For any website, a good percentage of traffic comes from search engines like Google, Yahoo, AOL, MSN Search etc. But when search spiders from these search engines come to your website for archiving and indexing, they may or may not pick those important keywords, words, phrases, information from your website, which you actually wanted to be indexed.
So you must guide those search engine spiders, what to be indexed and what should not, which can be done by Meta Tags.
Meta tags are placed in the <Head> region of any blog/web site. These tags mainly contain the Title of the website, general information, all keywords, pages to be indexed / left, author's name, e-mail, language of website, copyright information etc. These meta tags are optional, you may add all of them or some of them or even none. But for Search Engine Optimization, and better indexing, and to get more traffic from search engines, you must add meta tags to your website.

Here are the simple code lines to be added in the <Head> </Head> region:

<title>TITLE_OR_NAME_OF_YOUR_WEBSITE</title>
<link href="mailto:YOUR_EMAIL_ADDRESS_HERE" rev="made"/>
<meta content="ALL_KEYWORDS_HERE_SEPARATED_BY_COMMAS" name="keywords"/>
<meta content="YOUR_NAME_HERE" name="author"/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content="GENERAL_DESCRIPTION_HERE" name="description"/>
</b:if>
<meta content="SEE_BELOW" name="ROBOTS"/>

In the last meta tag, where "SEE_BELOW" is written, select one of these as per your requirement/choice.

- INDEX,FOLLOW Index this page and follow all links.
- INDEX,NOFOLLOW Index this page but do not follow or index links on this page.
- NOINDEX,FOLLOW Do not index this page but follow all links.
- NOINDEX,NOFOLLOW Do not index this page. Do not follow or index links on this page.

For any particular page, if you want to add any keywords or if you want to add "nofollow" / "noindex" tags to that page, you can add these code lines:

<b:if cond='data:blog.url == "URL_OF_THE_SPECIFIC_PAGE_WITH_http"'>
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW"/>
<meta content="ALL_KEYWORDS_HERE_YOU_CAN_ADD_MORE_LATER_TOO" name="keywords">
</b:if>

**UPDATE: The Description Meta Tag, if not modified, causes a serious error in Blogger/BlogSpot blogs, please read this post : Duplicate Meta Tags and Titles Issue - Solved to avoid the error.

Duplicate Meta Description and Titles Issues In Blogger

To add Meta Tag to your blog, refer to this post: Meta Tags - Importance and How To Use

Solution for the problems:
1. First of all, in the template (Blogger-> dashboard -> Layout -> Edit HTML) find (CTRL+F) the code for meta description tag, something like this:

<meta content="GENERAL_DESCRIPTION_HERE" name="description"/>

Now put that tag in an "if" condition, so that it will be displayed ONLY in the HOME PAGE:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content="GENERAL_DESCRIPTION_HERE" name="description"/>
</b:if>

2. For the second issue (duplicate titles); in the same page (Layout -> Edit HTML), click on "Expand Widget Templates".
Then find (CTRL+F) this code:

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>

Replace the entire code with this new code:

<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + "#" + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>

Swap Title Position

Swap the position of Blog's name w.r.t. the position of the post's title, like in the two pictures below:

Before:

After:

Follow these simple steps :

1. Log into your Blogger account.
2. Select the Layout option of the desired blog (from your dashboard).
3. Go to Edit HTML section.
4. Under the Edit Template Box, Find this code (in blue color) :

<title><data:blog.pageTitle/></title>

And replace it with this code :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

And then save it !
Open the blog to see the magic !

Pages