Many blogger users informed me they are facing a problem when try to share blogger post in Facebook(when using my templates).So I decide to give a tutorial for fix this problem with in few seconds.If you are facing a problem like the picture below when share your blogger post in Facebook, follow the instruction given here to fix this problem.

Note : I have fixed this problem for my latest templates.

Before doing this change,I highly recommend to backup your blogger template first.

1.Login to your Blogger Dashboard --> Design --> Edit HTML.

2.Click on "Expand Widget Templates".

3.Now find below code in your template.(some part of the code can be different,according to your template.but you can find this code easily.)

<script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
 if(s[i].indexOf(">")!=-1){
  s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
 }
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

4.Now select and cut(using CTRL+X) this code.

5.Find </head> tag of your template and paste this code just before the </head> tag.

6.Now also add this code just before the </head> tag.

<style type='text/css'>
.postdate{margin-bottom:2px !important;clear:both;}
</style>

7.Save your template. Now your facebook share feature will work correctly.Look at the picture given below.

I have fixed this problem for my latest templates.

More my template users told me their Google Friend Connect gadgets are not displaying correctly.So I tried to fix this problem and finally I found the solution for this.If your Google Friend Connect gadget is not displaying, then follow the simple steps given below:

Login to your Blogger dashboard --> Design --> Edit HTML.

Scroll down to where you see the </head> tag of your template.

Now copy below code and paste it just before the </head> tag.

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

JSON.extend({
parse: function(string) {
return JSON.decode(string);
},
stringify: function(obj) {
return JSON.encode(obj);
}
});

//]]>
</script>

Save your template and you are done.

Update :

If your problem is not solved yet, add above code just after </b:skin> tag.

Also already if you can see above code in your template, cut it and paste it just after </b:skin> tag.

When your problem is fixed, please don't forget to leave a comment.

Before doing this change, I highly recommend to backup your blogger template first.

Login to your Blogger Dashboard → Design → Edit HTML.

Now find below code in your template.(there can be some changes in the code according to your template)

<p><script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>

Now replace it with below code:

<p><data:post.body/></p>

Save your template.

In this tutorial,I am going to explain how to configure a navigation menu of a template.This tutorial Not Only for below navigation menu configuration,But Also this will helpful to configure any CSS navigation menu.

For example lets look at how to configure below navigation menu.

Login to your Blogger account → "Template" → "Edit HTML" of your blogger blog.

Find the word "Advertise".(using Ctrl+F keys)

You can see like this code:

Change the name "Advertise" if you want.In this example I do not change the name "Advertise",Because I have a advertise URL.

Replace "#" mark with the URL you want to go when click on the name "Advertise".

My Advertising URL is "http://buysellads.com/buy/detail/24170"

So I replace "#" mark with the my Advertising URL.After doing this it will look like this:

Now I have configured "Advertise" link of above navigation menu.Other links (Contact,Support,About) configurations are also same to this method.So you can configure all navigation links very easily.

Look at the example below:

Note : You do not need to change "Home" URL,because it is automatically linked to your homepage.

After doing this changes save your template.

I think this easy tutorial will helpful for you.

First download your new blogger template to your computer. If the template is contained in a zip file, ensure you have extracted the XML template.

1. Login to your Blogger Account.

2. Click on your blog name.

You can see overview of your blog.

3. Click on "Template".

4. Click on "Backup / Restore" button.

"Backup / Restore" window will appear.

5. Browse your template file (XML file) and click open.

6. Finally click on "Upload" button.

You are done.

Go to "Layout" to rearrange your widgets positions correctly.

2.Click on "Design".

3.Click on "Edit HTML".

4.Click on "Download Full Template".

Now you can save your current blogger template to the hard disk.

You are done.