How to Install a custom template in Blogger?

1. Download a template file (Zip/Rar) and unzip. (Screenshot 1)

2. Log in to Blogger.
3. Go to "Layout" under "Dashboard". (Screenshot 2)

4. Click "Edit HTML" under "Layout". (Screenshot 3)

5. Don't forget for backup your old template. (Screenshot 4)

6. Find and Upload the new Blogger template. (Screenshot 5)

7. If a warning: Your new template does not include the following widgets, click "KEEP
WIDGETS". (Screenshot 6)

8. Finish, Enjoy your new blog design.

How to Show or Hide "Navbar Blogger"

Before erasing navbar blogger (Navigation Bar), it’s better if I inform that this method is one of the Blogger
TOS violation. If you still want to erase it, you can use the script below:

Hide Navbar:
#navbar-iframe { display:none}

Show Navbar:
#navbar-iframe { display:block }

Auto Hide:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

How to do:

In the Edit HTML page, put the code above under the code <b:skin><![CDATA[/* and then save template.

How can I edit the Navigation Menu link of my template?

1. Most templates have a menu that can only be changed from the HTML (Dashboard à Layout à Edit
HTML). In many cases the code to look for is:

Just find the similar code like this:

<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Post RSS</a></li>
<li><a href='#'>Comment RSS</a></li>
<li><a href='#'>Edit</a></li>

For set link on Menu, your just find a code like this href='#' and change symbol # with link what you
want.
 Or, if you find the similar code like this:

<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts
RSS</a></li>
<li><a expr:href='data:blog.homepageUrl +
&quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>

There you can change the expr:href='#' with your own links: href='mylink'. Also see the
instructions in your template for more information.

2. Some templates include a gadget to edit the menu directly from the Dashboard (Dashboard à Layout à
Page Elements).

How to Set SEO for Meta Title, Keyword and Description

Find This Code:

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

And Change with this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<title><data:blog.pageName/> | (example: ZoomTemplate)</title>
<b:else/>
<title><data:blog.pageTitle/> | (example: ZoomTemplate)</title>
</b:if>
<meta content='your description here' name='description'/>
<meta content='keyowrd1, keyowrd1, etc..' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

How to display the last Posts or Comments on the sidebar?

1. Enter the administrator page elements (Dashboard à Layout).
2. Add a new feed widget, with the following URL’s:
To show the recent posts:
http://BlogName.blogspot.com/feeds/posts/default

To display the latest comments:

http://BlogName.blogspot.com/feeds/comments/default

How do I add my feed of Feedburner to my blog?

On the menu: Many templates show the feed in the top menu, to change the default feed for feedburner, go
to your template code (Dashboard à Layout à Edit HTML) and search for:

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>

Replace this with:

<a href='URL del feed en Feedburner'>

Now, in the settings panel of the feed ( Dashboard à Settings à Site Feed) also add your Feedburner URL.

How to add the comment form to my template?

Blogger recently added the Comments Form within the same template, below the individual posts, if your
template does not have the form there, you may need to manually add it or activate it.

To add it manually:

1. Enter in the code of your template (Dashboard à Layout à Edit HTML) and search for:

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

2. Replace that code with the following:

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

To activate it:

1. Enter the options panel comments (Dashboard à Settings à Comments).

2. And in the "Comment Form Placement" section, select: Embedded below post.
Adding "Read More" to Blogger Posts
'Read More' expandable post hack is one of the most popular blogger hacks. By default Blogger shows all
the contents from your post on your blog homepage. Having everything on your homepage will make your
blog homepage load slower. This might result in getting lower page views as your readers can read all your
posts on a single page. So, it's better to give a summary of your posts on your blog’s homepage and then
add a 'Read More' link below that post summary. Now, if a someone likes that post, he will click on that
‘Read More’ link and will get redirected to the original full post.

I would recommended this blogger trick to everyone. This will allow your readers to have a look on your blog
contents quickly. Your page will get loaded faster, you will get more page views and your blog will look nice &
organized.

Here are the steps to add "Read More" hack on your blogger blog.

1. Login to your blogger account.

2. Select "Layout" option from your Dashboard.
3. Now choose "Edit HTML".
4. Backup your current template.
5. Now click "Expand Widget Templates".
6. You will see your "Edit Template" Code box.
7. In that Template Code find ( CTRL + F )

]]></b:skin>

8. And just after that,add these code lines:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

9. Now again find this code

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

10. And after this add these code lines

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

<a expr:href='data:post.url'><div style="text-align: right;"><img
src='http://lh5.ggpht.com/_Kv5tIcZAMKY/S-
6d4DdKBII/AAAAAAAAAYY/spRXv_SuKwU/s400/readmore.jpg'/></div></a>
</b:if>
11. Now save the template.
12. Leave "Layout" and go to "Settings".

Select "Formatting", at the bottom of the formatting page you’ll find Post Template form, just copy and
past the next code into it.

Post Before "read more"

<span class="fullpost">
And here is the rest of it
</span>

13. Go to posts and try to post new post and you'll find the next code into post body:

Post Before "read more"

<span class="fullpost">
And here is the rest of it
</span>

put the part of the post that you want it to appears at your blog index and archive pages instate of:

Post Before "read more" and put the rest of the post instate of: "And here is the rest of it"

click Publish Post and Enjoy.

Expand image on mouse hover in blogger post

This is a simple script who wants to expand an image on mouse hover. This initially display images at a
reduced size and it dynamically expands when mouse is rolled over it.

Instructions to add this widget to your blog:

Step 1:
Download the file: expando.js

Step 2:
Now go to www.sigmirror.com and upload the file. And copy the DIRECT LINK to the file.

Step 3:
Log in to Blogger
Go to "Layout" à Edit HTML
and find (CTRL+F) this in the template code :

</head>

And immediately BEFORE/ABOVE it, paste this code:

<style type="text/css">

/*expand images - www.bloggertheme.net*/

img.expando{ /*sample CSS for expanding images*/
border: none;

vertical-align: top; /*top aligns image, so mouse has less of a change of moving out
of image while image is expanding*/
}

</style>

/* Expand images - www.bloggertheme.net */

<script type='text/javascript'>
//<![CDATA[
/* Expando Image Script ?2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};
 expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

Step 4:
Now save the template.

Step 5:
Now whenever you want to show this effect to any of your post, you have to modify the linking code like this:

Normally the code you use, to link any image will look like this:

<img src="Link_of_image.jpg" />

If you want to add the Expand Mouse Hover Effect to the image, then add this simple code (in BOLD) to it,
like this:

<img class="expando" border="0" src="Link_of_image.jpg" width="100" height="100">

(or simply)

<img class="expando" src="Link_of_image.jpg" />

In the above code the red color text indicates the extra function we had added to the image code. And src
represents the original link of your image.

How To Add "Author Box" in Blogger

Author Box is always nice to have on your Blogger blog, not only because it looks good, but it gives the
reader a chance to connect with and promote yourself in one or two lines.

Style 1:

Step 1:

Login to Blogger
Go to Design and select Edit HTML tab
Then Click Expand Widget Templates.

Step 2: Now find [CTRL+F] this code:

]]></b:skin>
And BEFORE/ABOVE that paste this code

/*-----Author Box------*/
#author-box{
float:left;
padding:10px;
width:500px; /* Width of Author Box */
background:#E2F3FB;
margin:0 0 0 -30px;
position:relative;
-moz-box-shadow:3px 3px 5px rgba(190, 200, 211, 0.5);
box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
-webkit-box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
z-index: 100; /* the stack order: foreground */
}
.author-corner{
background:url(http://2.bp.blogspot.com/_0s-
GnnHKfng/TGaCypFvG8I/AAAAAAAAAa8/Wn2hgcv7ZAA/s1600/corner.png) no-repeat left top;
bottom:-13px;
height:12px;
left:2px;
position:absolute;
width:12px;
}
.author-avatar{
float:left;
margin:0 20px 0 0;
}
.author-avatar img {
border: 3px solid #fff;
}
.author-text{
float:left;
width:350px;
}
.author-text p{
margin: 0;
padding: 0;
}
.author-text h3 {
font-size:17px;
}

Step 3: Now find (CTRL+F) this in the template:

<data:post.body/>

And AFTER/BELOW that paste this code

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='author-box'>
<div class='author-avatar'>

<img alt='' height='50'

src='http://2.bp.blogspot.com/_0ncb0g2iwsc/TFbIBWkgBgI/AAAAAAAABEo/H9fKD1n7E2Y/s1600
/grav.png' width='50'/>
</div>
<div class='author-text'>
<p><h3>About The Author : <a href='#YOUR LINKS HERE' title='Posts by admin'>Your
Name</a></h3>
 Write something about yourself here. You can follow him on <a
href='http://twitter.com/your link' target='_blank' title='Follow
@Twitter'><b>Twitter</b></a> and you can connect with him on <a
href='http://www.facebook.com/your link' target='_blank' title='Find me in
Facebook'><b>Facebook</b></a><br/>
</p>
</div>
<div class='author-corner'/>

</div>
</b:if>

§ Replace Red Color Link with your image link

§ Replace Blue color with your Twitter, Facebook and Homepage Links
§ Replace Green Color Link with Your Name and description

Now Save The Template.

Style 2:

Step 1:

Login to Blogger
Go to Design and select Edit HTML tab
Then Click Expand Widget Templates.

Step 2: Now find [CTRL+F] this code:

]]></b:skin>

And BEFORE/ABOVE that paste this code

/*-----Author Box------*/
#author-box{
float:left;
padding:10px;
width:500px; /* Width of Author Box */
background:#E8E8E8;
margin:0 0 0 0px;
position:relative;
}

.author-avatar{
float:left;
margin:0 20px 0 0;
}
.author-avatar img {
border: 3px solid #fff;
}
.author-text{
float:left;
width:350px;
}
.author-text p{
margin: 0;
padding: 0;
 }
.author-text h3 {
font-size:17px;
}

Step 3: Now find (CTRL+F) this in the template:

<data:post.body/>

And AFTER/BELOW that paste this code

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='author-box'>
<div class='author-avatar'>

<img alt='' height='50'

src='http://2.bp.blogspot.com/_0ncb0g2iwsc/TFbIBWkgBgI/AAAAAAAABEo/H9fKD1n7E2Y/s1600
/grav.png' width='50'/>
</div>
<div class='author-text'>
<p><h3>About The Author : <a href='#YOUR LINKS HERE' title='Posts by admin'>Your
Name</a></h3>
Write something about yourself here. You can follow him on <a
href='http://twitter.com/your link' target='_blank' title='Follow
@Twitter'><b>Twitter</b></a> and you can connect with him on <a
href='http://www.facebook.com/your link' target='_blank' title='Find me in
Facebook'><b>Facebook</b></a><br/>
</p>
</div>

</div>
</b:if>

§ Replace Red Color Link with your image link

§ Replace Blue color with your Twitter, Facebook and Homepage Links
§ Replace Green Color Link with Your Name and description

Now Save The Template.

How to add Background Image for your Blog

Adding background image in Blogger is a great way to stylize your personal Blog, and make it stand out
among the others. This way, you can personalized it, and make it recognizable and unique.

And it's quite easy, really...

Steps to follow...
Step 1: Firstly, Log in to Blogger. Now go to "Layout" and then click on "Edit HTML" tab.

Step 2: Now find [CTRL+F] this code:

body {

The BODY code look like this

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
 font-size: /**/small;
text-align: center;
}

Now Replace the above red color ( background ) line with the below line

background: url('http://DIRECT LINK OF IMAGE') repeat;

Replace the blue color line with your direct link of your image

Step 3: Now save the template.

Label Cloud Widget For Blogger

A Tag cloud is a visual depiction of user-generated tags, or simply the word content of a site, typically used
to describe the content of web sites. This Tag Cloud was orginally develped by Compender.

Steps To Install Tag Cloud in Your Blogger Blog :

Step 1: Firstly, Log in to Blogger. Now go to "Design" and then "Page Elements".

Then Click "Add a Gadget" in the column you wish:

Then find the Labels Widget and that widget to your Blog

Step 2: After Adding the Label Widget go to "Design" and then click "Edit HTML" (Do not expand the widget
templates).

Now Find This Line ( CTRL + F )

type='Label'

It will look something like this :

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

Now Replace that with these lines

<b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false; // show counts? true for yes, false for no
var minCount = 1; // what is the minimum count for a tag to be shown? 1 for all

//Begin code:
var range = max - min;

//Build label Array

var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//Number sort funtion (high to low)

function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting

var sorted = counts.slice();

//Find the largest tag count

var most = sorted.sort(sortNumber)[0];

//Begin HTML output

for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >=
minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
 //Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a
href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] +
count + &quot;</a></span> &quot; );
}
}
</script>
</div>
</b:includable>
</b:widget>

Step 3: Now Save the Template.

NOTE: You must have already added labels to at least some of your posts, to see the widget in action.

Customizing Label Cloud

You can change Font Size by editing these Lines

var max =

and

var min =

To Show Widgets Only in Home Page or in Specific Page

When you add a widget to your blog, by default the widget would appear on all pages like homepage, index,
archive, post and static pages.But most of the Bloggers want to know how to show widgets only in the Home
Page or in Specific Pages only, the coding is so simple.

Follow these steps:

Create any widget, and place it where-ever you want, and save the template. Check if it is working
(displayed) in all the pages. Remember to give a TITLE to it, like Label,BlogRoll,Adsense, Or Unique word.

And then Go to Layout à Edit HTML à Click on the Expand Widget Template Box
Then find for that Title or Unique word (by CTRL+F).

It will be something like this:

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
WIDGET CODE
...
...
...
<div>
 <b:include name='quickedit'/>
</b:includable>
</b:widget>

Now Modify This as follows

To Show Widgets only in Home Page

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
WIDGET CODE
...
...
...
<div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To Show Widgets only in Post Pages

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
WIDGET CODE
...
...
...
<div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To Show Widget only in Archive Page

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
 WIDGET CODE
...
...
...
<div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To Show Widget only in Particular Page

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.url == "Particular Page URL"'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
WIDGET CODE
...
...
...
<div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Replace Particular Page URL with your post URL Address.

For Example : http://yourblog.blogspot.com/2010/o5/show-widget-on-specific-pages.html
To Show Widgets in Pages other than Particular Page

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.url != "Particular Page URL"'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
WIDGET CODE
...
...
...
<div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To Show Widget only in Static Pages

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
WIDGET CODE
...
...
...
<div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To Show Widgets only in Label Page

<b:widget id='HTML1' locked='false' title='WIDGET TITLE or UNIQUE WORD' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.url == "Particular_Label_Name_URL"'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
...
WIDGET CODE
...
...
...
<div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Replace Particular Label Name URL with your Label URL Address.
For Example : http://your_blog.blogspot.com/search/label/Label_Name

Source:
FAQ zoomtemplate.com & btemplates.com