Sunday, October 31, 2010

How To Add Auto 'Read More' Feature with Thumbnails

This nice trick will automatically create post summaries with thumbnails.You don't need to add any extra code in every blogger post that you make.

1.Log in to your dashboard-> layout-> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add below code just before </head> tag.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
<script src='' type='text/javascript'/>

Note: You can change above value as your choice.

5.Now Scroll down to where you see this:


6.Replace above code with below code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div expr:id='&quot;summary&quot; +'>
<script type='text/javascript'>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade more >></b></a></span>

7.Now save your template and you are done.


How to make "breadcrumb-navigation" in Blogger

If you are an observer of revolution theme created by Brian Gardner, you might have seen a simple row of navigation above the title of an article that you’re reading, like the following screenshot:


The navigation like above is known better by the name of “breadcrumb-navigation”. With the “breadcrumb-navigation” the readers can easily know the position of an article that’s being read and also can search the articles in the same category.

Can “breadcrumb-navigation” be installed in blogger? The answer is of course, it can. With a few modifications of your template code, then the “breadcrumb-navigation” will be yours soon. Below are the ways:

1. Please log in to blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Click Download Full Template and please back up your template first
5. Please check the small box beside Expand Widget Template


6. Find the code ]]></b:skin>
7. Copy and paste the code below exactly above the code ]]></b:skin>

padding:5px 5px 5px 0;
border-bottom:4px double #cadaef;

8. Find the following code in your template :

<div class='post hentry uncustomized-post-template'>

9. Copy and paste the code below exactly below the code <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:if> &#187; <data:post.title/>

10. Click Save Template button
11. Wait for a while until your template saved
12. Open your blog, click the title of an article, see the result
13. Finished.

If your steps are correct, the “breadcrumb-navigation” will be like this:


Happy trying!


Thursday, October 28, 2010

Change the Title Tags in Blogger for More Search Engine Traffic

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

Why Change the Titles?

It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.

Example Google Search Results:

You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.

How to Change the Titles:

1. Go to Layout>edit HTML in your Blogger dashboard.
2. Search for this tag: <title><data:blog.pageTitle/></title>
3. Replace this tag with the following code:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

4. Save your template and you should see the results in your web browser as depicted in the images below.
5. It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!


Trick to Add AdSense, AdBrite and Other JavaScript Ad Code Directly to Blogger HTML Template

Advanced users of service may have tried to insert and put Google AdSense ad code which is actually a Java script directly into the blog pages by manually editing the XML-based template HTML coding interface. Actually, it’s possible add any ad code by using HTML/JavaScript page element within the Blogger new XML template system, but the place where you can place the new block is rather limited, i.e. above or below the post body, header, footer, within sidebar or between blog posts. In case you want to put the ads inside the post, or align the ads to float and wrap around the text, or just within the single individual article content view, you will have to edit directly the HTML coding of Blogger template.

If you try to insert any Google AdSense, AdBrite, AdEngage and any other JavaScript based ad code, or client-side components such as counter, tracker, form, snippet, effect, date and time, etc which is JavaScript based, the following error message may be returned when saving ore previewing:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching “[xX][mM][lL]” is not allowed.


Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The reference to entity “zs” must end with the ‘;’ delimiter.

and many other different XML error message.

The problem is caused by incorrect dynamic interpretation of Blogger XML template when it generates the HTML webpage for the blog page that is requested, probably due to the fact that the AdSense ad code or other code is not a valid XML, coupled with the fact that some ASCII characters have special meaning and reserved functions, confusing Blogger blogging engin.

The resolution to the JavaScript based coding does not work in Blogger HTML template error can be solved by replacing special characters or symbols in the script to HTML code. Check out the list below for which ASCII characters that need to be replaced with their corresponding HTML code. Using HTML code will ensure that Blogger render the character correctly when serving the page to the viewer.

< = &lt;
> = &gt;

Above two is enough to make Google AdSense works in Blogger template. For other scripts, such as AdBrite ad code, you will need to replace more characters such as those listed below.

& = &amp;
” = &quot;

For example, a Google AdSense code should become looks similar to code below:

&lt;script type="text/javascript"&gt;&lt;!--
google_ad_client = "pub-XXXXXXXXXXXXXXX";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "000000";
google_color_text = "000000";
google_color_url = "000000";
&lt;script type="text/javascript"

While an AdBrite ad code will became the similar code to the below:

&lt;script type="text/javascript"&gt;
var AdBrite_Title_Color = '0000FF';
var AdBrite_Text_Color = '000000';
var AdBrite_Background_Color = 'FFFFFF';
var AdBrite_Border_Color = 'FFFFFF';
&lt;script src=";zs=3330305f323530" type="text/javascript"&gt;&lt;/script&gt;
<div><a target="_top" href=";afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>

Simply use the text editor to parse the code and then replace the characters. Don’t worry about violating AdSense TOS or other terms and conditions, as once the blog’s web pages are rendered and presented to the viewers and visitors, the code will be exactly same as the original code before any replacement!


How to Change the Favicon in Blogger

Blogger supplies every blog with the standard orange "B" blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.

What is a Favicon?

A favicon is a small 16X16 image located at the top of your browser in the url bar.

How to Change your Favicon

  1. First go to Layout >Edit HTML in your Blogger Dashboard.
  2. Backup your existing template before making any changes!
  3. Place the code below directly below the </head> tag in your template.
  4. <link href='' rel='shortcut icon' type='image/' /> <link href='' rel='icon'/>
  5. Now save your template.
  6. Once your template is saved view your blog and make sure to refresh the page and delete your cookies.

Creating your own Favicon

  1. Replace the image URL (2X) with your own 16 pixel by 16 pixel image hosted on the internet.
  2. You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; etc.
  3. Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!


Blogger Search Bar Form

Add a search engine in the sidebar of your blogger blog. This searches all the posts on your blog, and displays them by latest posts first. Inside the search bar you will find the text "Search this Site", this can easily be changed to any text you desire. Such as "Search my Site", "Search", "Type and Hit Enter", etc. Just simply replace the code. You can also change the text "Go" on the button to something like "Search", "Find", etc.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>


Wednesday, October 27, 2010

How to Remove and Hide Blogger NavBar (Top Navigation Bar)

When browsing Blogger powered weblogs hosted on domain or custom domain, there is always a NavBar (Navigation Bar or Banner) that appears on top of the blog. The Blogger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger.

No many visitors nor bloggers themselves may find it useful though. It’s possible to hide and remove the NavBar with a little CSS hack. The trick will not interfere or mess up with the custom layouts that webmaster has designed, and pretty safe and easy to implement. In fact, if you’re publishing the Blogger blog to own custom domain with FTP or SFTP, it’s possible to turn off NavBar.

Turn Off and Disable NavBar in Blog Published by FTP or SFTP

  1. Sign in to Blogger.
  2. On the Blogger Dashboard, click on the Layout link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Layout

  3. Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.

    Edit Blogger HTML

  4. Search for the following line of code:


    Before the line, add in the following line of code:

    #navbar { display: none; }


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

  5. Click on SAVE TEMPLATE to make the change effective.

Remove and Hide NavBar in Blogger Classic Template

  1. Login to Blogger.
  2. On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

    Edit Blogger Template

  3. The Edit HTML page under Template tab should be loaded. If not, go to the tab.
  4. Search for the following line of code:


    Then, add the following line of code before that line:

    #navbar-iframe { display: none; }

    The Blogger Classic Template uses iframe to load the NavBar, and styles it with ID named navbar-iframe. The name actually also works for new Blogger Widget Template too.

  5. After hiding the Nav Bar in Blogger using Classic Template, there tends to be a gap that replaces the navigation bar. The gap may be white, red, green, blue, or black in color, depends on what is your background color. To remove the gap, find the following code (normally near the top of the HTML):

    body {

    Add in the following like of code after the body tag:

    position: relative;
    top: -32px;

  6. Click on SAVE TEMPLATE CHANGES button when done.
Tip: To display and show NavBar again, just remove and delete the additional codes that have been added.


Submit Blogger Sitemap To Google Yahoo And Bing

How to submit blogger sitemap to different search engines.I hope most of us have done it with there blogs but most still would be not knowing on how to do it.But this post is for all bloggers even if they have submitted there sitemaps as i would share some method to remove some errors while you are getting in indexing all blog posts in search engines.

How to Submit Blogger Sitemap to Google.

Follow the simple steps to add blogger blog to Webmaster Tools

1. Login to Blogger Dashboard.
2. At the end of the page, under Tools and Resources box – Click on Webmaster Tools.You will Be asked To Enable Webmaster Tool Enable It.
3. If asked, enter username and password again to Login.
4. After Logging in Click Add A site Button.

5.Now Enter Your Blog Address And Continue.Dont Forget To Include '/' At the end of your blog address.Like this .
6.Now you will be asked to verify your blog Just verify it as they say.

7. Inside Webmaster tools, click on Submit a Sitemap and add the following code inside the box :


8. If you have more than 200 posts then replace value 100 by something bigger number like 500.If they are more than 500 then add sitemaps in this format.


As Labnol has developed the tool for it also. Just visit the tool page here to get submit blogger map to google yahoo and bing also.For More Help you can read this post also on how to use this tool with an video tutorial.


Code for New Blogger Tag Cloud / Label Cloud

Post edited and rewritten Jan. 1 2010

Instructions for creating a multi-colored tag cloud on Blogger.

First you obviously have to have a blog on Blogger, and you MUST be using the layouts templates,
(this isn't available for classic templates, or FTP published blogs ) and you must have some posts labeled already. (There needs to be at least ONE label with more than ONE entry or the scripts hit a bug - so have at least one label with more than one entry before starting).

Make sure you backup your template before making any changes!

Log into Blogger and go to your layouts section. On the 'Page Elements' setup page
make sure you have a label widget already installed where you want it (it can be moved around
later). Then go to the Edit HTML settings and leave the widgets NOT exapanded. It will make
things easier to deal with.

Now the code comes in 3 parts. A section for the stylesheet, a configurations section,
and then the actual widget itself.

The first part to put in is the stylesheet section. The following code needs to be copied
and inserted into your stylesheet, which in the layouts is marked out by the <b:skin> tags.
Easiest thing to do is find the closing skin tag


and place the code right BEFORE that.
Here it is, copy and paste without modification right now. I'll explain what can be tweaked

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

This next section is the configuration section for the Cloud. It also goes in the head
of the template, but outside of the stylesheet part. Easiest thing to do again is to find
the closing stylesheet tag


But this time place the code right AFTER that line, but BEFORE the </head> tag. Here it is.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

All of these settings can be changed but I'll explain them in a moment. The defaults will work for now.

Now the widget itself. Scroll down and find the label widget in your sidebar. It should look
something like this.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Copy the following code (from beginning widget tag to ending widget tag) and replace
the line above with it.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>

  <div class='widget-content'>
  <div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from
function s(a,b,i,x){
          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
      return v

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<>&quot;;
ts[theName] = <data:label.count/>;

for (t in ts){
     if (!labelCount[ts[t]]){
           labelCount[ts[t]] = new Array(ts[t])
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] &lt; cloudMin){
    for (var i=0;3 &gt; i;i++) {
         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
         li = document.createElement('li'); = fs+'px'; = '1';
         a = document.createElement('a');
         a.title = ts[t]+' Posts in '+t; = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
         a.href = '/search/label/'+encodeURIComponent(t);
         if (lcShowCount){
             span = document.createElement('span');
             span.innerHTML = '('+ts[t]+') ';
             span.className = 'label-count';
          else {
         abnk = document.createTextNode(' ');

    <b:loop values='data:labels' var='label'>
        <b:if cond='data:blog.url == data:label.url'>
          <a expr:href='data:label.url'><></a>
    <b:include name='quickedit'/>


Now if all has gone well, and you have posts already labeled, then if you preview the
blog you should see some form of the Cloud appearing. If it doesn't appear, then something
went wrong. You should probably back out and try it again from the start.

Update : I've found 2 things to check for first if the label cloud isn't showing. First make sure that at least one of your labels has more than one entry. A bug in the script causes it to fail when all the labels have only one entry.(As soon as any label has more than one entry, then it should be ok from then on) Also, make sure that none of your labels contain quote marks " . Apostrophes or single ticks ' are ok. ------

Most likely the cloud with it's default settings won't be what you ultimately want. But all
the colors and sizes are configurable to match your tastes. If the cloud is appearing in preview
then you can go about changing some of the variables so they suit.

The settings in the Variables section will be where you make most of your adjustments. Here I'll
explain what each setting does.

var cloudMin= 1;

This setting you can use to limit the number of labels shown (for example if you have a lot of labels). Leave the setting at 1 to show ALL labels. If you enter in a higher number, then only labels that have at least that number of entries will appear in the cloud.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

The lines for


do what you may think they do. The first one sets the size (in pixels) of the label with the
most amount entries. The maxColor sets the color of that entry (in RGB format). Similiar with
the next two


Just these are for the label with the least amount of entries. Again the size is in pixels,
the color is in RGB format. Any labels between the two will get their color/sizes based on
how many labels they are, and where their entry count falls, giving the much desired cloud

From my experimenting, there are many factors that make up a pleasant looking cloud. From
color/size choice, to the number of actual labels, to how well dispersed the entries are amoung
the labels. 3 Labels don't make a good cloud as there isn't much to work with. You just have
to experiment around to see what looks good with your setup.

IMPORTANT, when change the color settings, Keep them in the format supplied. In between the [ ] and
the numbers separated by commas. The default colors are BLUE for the max and BLACK for the min.
You can select any valid RGB color combination. If you don't know what RGB colors are, don't
worry. It's just a way of defining a color. You can use many charts on the Internet to
get the correct RGB value for the color you want to try. Here's one that is fairly good.

RGB Color Code Chart

Remember, if you get the 3 sets of numbers to enter them in correctly. Inside the [ ] separated by

Also experiment with different font sizes. Again it depends on how many entries, how dispersed
they are, and how much room for the cloud is available as to what looks good.

The last variable there is


This can either be false (default) or true. All this does is turn off/on the post count displayed
next to the label. Usually in a 'traditional' cloud the count isn't used. But if you go to a
'flat' listing then it's sometimes useful to turn it on.

Now to the CSS section. Most people won't need to tweak these much, and it's not necessary to
understand what all those entries are for. Most are just to make sure that other styling
elements from the rest of your page don't inherit in and ruin the cloud. But there are a few
that you may want to change to suit.
The first line

#labelCloud {text-align:center;font-family:arial,sans-serif;}

You could change the fonts used in the cloud here if you wanted.
Also, the text-align statement can also be changed. I have it set to center by default but you
could use


If those suit better.

The next line

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Well don't worry about most of it unless you are a hardcore CSS'er. The only one of real
importance is the first entry


You can change that to


To get the 'Flat' (each entry on it's own separate line) listing of the weighted entries.
Usually if that is set to block you would probably want to change the sort frequency from
alphabetical to frequency. You do that by editing the widget from the Page Elements tab in

And the last bit I'll mention is the line

#labelCloud .label-count

If you set the lcShowCount variable to true to show the post counts, you could change the
color/size of those numbered entries with that line.


Show Only Post Title In Blogger Label-Archive-Home Pages

How to Show Only Post Title In Blogger Label page,Archive Pages or even on home page of your blog.You sure would have seen many blogs using this trick to show only there post title in any page they want.Wordpress blogs easily do this using various plugins available but we bloggers also now can make it work in our blogs as its very simple tutorial to implement.
Here is an hack how to show post title in any desired page of an blog.

Please Read this tutorial very carefully as it is very easy but i am telling you two ways of doing which have different results.You can use one way at time or both ways at time but results will be different.I will try to make it very simple for you with what would be the result to the blog with each step, so read carefully.

1.Login to Blogger
3.Then Click On Edit HTML
4.Check Mark Expand Widgets
5.Press Ctrl+F

Now search For below code:

<b:include data='post' name='post'/>

And Replace it with Below Codes:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:include data='post' name='post'/>
<b:include data='post' name='post'/>

Now open your blog and click on the label or archive page of your blog it will show only post title . For demo check the category page of this Blog.

I hope you will be satisfied with it.This is one way.

Now there is another way of doing it but the results are different.

If you want to show only title of posts in your blog home page also,then only follow this way and implemet it.If you want only label page to show post title just get stoppd after reading first way only.

Now the second way to show only post title in blogger home page too.

1.Login to Blogger
3.Then Click On Edit HTML
4.Check Mark EXpand Widgets
5.Press Ctrl+F

Now search for this line:


After finding this line replace it with below codes:

<b:if cond='data:blog.pageType == "item"'>

This will show only post title on all pages of blogger including homepage label and archive pages.
One of my reader asked to show post title only in archive pages so i am placing code for him
Just use these codes to replace the above red line in place of above codes.

<b:if cond='data:blog.pageType == "index"'>

And if you dont want to use post titles in archive pages use archive in place of index in above codes that's the only word making basic difference between the codes.

*Note-If you are using read more hack in your blogger you will get above red line twice.So replace only the line that appears first in your blog html code and leave second one as it is.

And then preview your template,if its ok. Save It.

The result would be like this in your blog.


Thursday, October 21, 2010

FIFA 2010 CD Key ( Serial )

  1. MZAS-XLY6-J8W4-Q104-1911
  2. HLVV-NZF5-R7I8-D7R5-1911
  3. FAUC-7LNL-Y7V2-H3F2-1911
  4. REUL-RQDZ-L2G1-Z4F8-1911

Wednesday, October 20, 2010

How to Set Up Your GoDaddy Domain with Blogger

Do as the following steps:
  1. Go to and login to your account
  2. On the left , under My Products click on Domain Manager

  3. Click on domain name that you want to set up with blogger

  4. On the bottom click on link Total DNS Control

    Then under CNAMES (Aliases) click edit icon for www

  5. Edit Points To Host Name to

  6. (Forwarding domain) Return to domain manager , click on domain and then click on link Manage

  7. Type your domain name and select forward with masking

  8. Login to your blogger account and go to Settings -> Publishing and click on link Custom Domain

  9. On the right you’ll find link Switch to advanced settings , click on it

  10. In input box,  type your goddady domain name and click on Save Settings

Ok, Now you done it, Congratulation! : )

Thursday, October 14, 2010

Useful Urls

  1. Download and update any antivirus
  2. Money maker discussion
  3. 30+ blogger widgets and plugins
  4. Widgets for free
  5. Blogger tip and trick
  6. Free tutorials in all web development technologies
  7. Search for icons
  8. Search for free web hosting services

Free Download Websites

Happy to find free stuffs here...