This post explains how to add numbered page navigation widget to blogger (blogspot) blogs:

What is Numbered Page Navigation ?

In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.



So, how to add this to your Blogger blog ?
(first backup your blog template before editing anything)

1. Sign into your Blogger account » Settings » Formatting
Choose the number of posts you want to display on homepage


2. Go to Design » Edit html » tick the expand widget templates

Scroll down to the bottom of the template code and find this


</body>


PASTE this code above that line


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[

function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}

//]]>

</script>
</b:if>
</b:if>




In that above code, Edit the part that I highlighted in red color according to Step 1. It determines the number of posts that to be displayed per page. (Make sure, the number you set is same like the one in Step 1)


3. Control + F and search for all the occurrences of this code

'data:label.url'


and replace it with this


'data:label.url + "?&max-results=5"'


Again, the number in the above line depends on the number you set in the STEP 1.

4. Now, the styling part.. I've made x styles.. you can choose the one you wish..


(i) Default



Code


.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;

}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
border-top: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}



Copy the above code. Find this line and paste that code ABOVE IT.


]]></b:skin>



Save the changes.

I've made a few more navigation styles.. I'll post them in a few min.. look for it.

Credits: Blogger Plugins

Continue reading »

Recently, Blogger released their new Share Buttons feature which makes it easier for your Blog visitors to bookmark, tweet, fshare, email ,etc your post.

But, if you're using any custom blogger template.. you may not see the widget appearing in blog..even though you activate it.

So, if you have that problem. here is how to fix it.
(before making any changes..first backup your template)

1. Sign into Blogger > Design > Edit html
(tick the expand widget templates)

2. Add this line anywhere you want the widget to appear

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


Normally, in most templates, you can add it after this line..

<p class='post-footer-line post-footer-line-1'>


If you don't find that above line in your template....
Find this one.

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


and add this code after that line..


<p><data:post.body/></p>
<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div>


Note: If you're using Magazine style blogger template, You can find the data:post.body line TWO TIMES.. So, try in both ways and find out which one is working..and remove the other one.

Finally..Save the template!

If you still don't see it in your Blog, Make sure..you activated it by going to
Blogger dashboard > Design > Click the 'edit' button of the Blog post section.

Continue reading »

As you know, millions of people use their mobile phones to access internet. The mobile internet speed is also very fast these days with 3G's , mobile apps,etc.

From this, we can say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.

So, here is how to make your Blogger (blogspot) blog mobile internet friendly..

Sign into your Blogger account > Design > Edit html

Find this line..



<b:include data='blog' name='all-head-content'/>

Paste this code below that line...



<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>



Save the Changes!

That's it! Now, your visitors can access your blogger blog through mobile phones with blazing speed...

Thanks to Gyms who let me know this first..

Continue reading »

This cool trick shows how to implement Google Adsense Revenue sharing feature in blogger(blogspot) blogs:

Do you run a blogger blog which is controlled by multiple authors ? Are you looking for an idea to share revenue with your co-authors? If so, then this nice Blogger trick solves all your problems.

First, What is Adsense Revenue Sharing ?

Suppose, you're the administrator of a blogger blog which has multiple guest authors. If you want to share the blog revenue with them, normally you divide the total revenue based on the Post count or Pageviews. But, most of the time it may not be accurate because CPC and CPM varies from post to post depending on the keywords,etc. So, it may not encourage the team members to post more stuff :(

But, with this cool trick, you can share the blog revenue with them more precisely because every author gets his own ad displayed in all the posts he/she does.

So, lets see how to add this feature to your blog..


For example, If your blog as 3 authors - John, Ricky and Britney

1. Sign into Blogger » Layout » Edit html

2. Tick the "Expand Widget Templates "

3. You can insert the ad anywhere you want in the post body.. In this example, I'll show you how to add it inside the blog post (between the post title and post body)

Find this line:

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

and Paste the below code above that line


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



<b:if cond='data:post.author == "John"'>

PASTE THE AD CODE OF JOHN HERE

</b:if>



<b:if cond='data:post.author == "Ricky"'>

PASTE THE AD CODE OF RICKY HERE

</b:if>



<b:if cond='data:post.author == "Britney"'>

PASTE THE AD CODE OF BRITNEY HERE

</b:if>



</b:if>

<br/>



Replace the Names with your Blog authors (Case sensitive)

4. Don't Copy and Paste the Adsense Code directly in the template. First, Go to this Blogger Ad Code Converter Page and paste your adsense code in the box provided and click on "Convert Ad Code".
Now, copy that code and paste it in the template.
(Look at the screenshot below)



and Finally, SAVE THE CHANGES.

From now on, Each member of your blog can monetize their posts with their own adsense ads... Happy Blogging :)

Note: You can use the same hack to put other advertising networks aswell.. like adbrite,bidvertiser,etc.

Continue reading »

Recently, Blogger launched the much awaited Blogger Pages Feature.
So, lets see how to Create Static Pages in Blogger.

1. Sign into Blogger Draft (draft.blogger.com)

2. Click on New Post as usual.



3. Select the Edit Pages from the top menu



4. Click on 'New Page' button.



5. Now, give your page a title and write the content and publish the page.



6. If you want to display the Pages list in your Blog sidebar, select the 'Blog Sidebar' option,or you can keep it as nav menu below header by selecting 'Blog Tabs' option.



Note: If You've Selected either 'Blog Sidebar' or ' Blog Tabs ' option and if you see any bx-error,.. then, come back to last page and select 'No Gadget' option.
This means,you have to add the links manually to your template.

Click on Edit Pages again and Right Click on View -> Copy link location (in firefox) and Add the link manually in your sidebar via Link widget or you can add the link in your navigation bar via template > edit html.



Thanks to Blogger for the Awesome feature.. :D


Edit: As of now, Blogger allows you to only create pages up to 10. But, you can hack blogger to create more pages. You can read that tutorial here.(by Switcher)

Continue reading »

This post explains how to host javascript(.js) files in blogger itself, so you don't need to worry about bandwidth limitations,etc:-

"How to host Javascript files for Free with unlimited bandwidth ?" is one of the most frequently asked questions in the blogger community. There are tons of hosting providers out there who can help you host your .js files for Free, but all have some bandwidth limitations and also they are not very reliable.

My friend Switcher previously explained how to use google sites to host your javascipt files for free in his blog (you can read that post here)... I used that method to host javascript files of my previously released magazine style blogger template ' Falkner Press '... but, the problem is even google sites have bandwidth limitations. So, if the bandwidth exceeds at a particular moment, the javascript files don't load which results in complete template mess up.

So, if you have those kind of problems, here is a simple trick.

I'll take Falkner Press template javascript files as an example.
If you look at the top of the template code, you see something like this:



So, as you can see, there are three javascript files (highlighted with colors) in the template. The files are hosted at google sites.


2. Copy each of those three links and paste them in your browser and download all those three files.

3. Now, open each file with Wordpad (not notepad) and copy that code.

4. Now, here is the trick...
Paste the code you copied (copied from first file) in your blogger template like this.


<script type='text/javascript'>

//<![CDATA[

PASTE THE JAVASCRIPT CODE HERE

//]]>

</script>






What about if you have 2 javascript files or three (like falkner press template) ? Simple! Just repeat the process again... like this..




5. And the Final and Most Important step... SAVE THE CHANGES ;)

Benefits of this trick:
» No file size limitations
» No bandwith limitations
» Super fast page loading (coz files are stored in blogger itself)


Like the trick ? comment.. :)

Continue reading »

This post explains how to post extra large images in blogger posts:-

This is one of the most wanted blogger hacks, which makes it possible to post big size pictures in blogger posts.
Normally, If you upload a large image to blogger(with large thumb size selected), it will automatically resize it and then post it as thumbnail . But, the image quality of the resized image is very poor. So, to make the image look more clean and sharper, this trick will come handy.

Normally Uploaded Image: (with large thumbnail selected)


Image after applying the hack:



So, lets learn how to do this..

1.First, calculate how much image size(large) you want to display ( normally, its just a bit less than your main body width). Suppose, take this blog as an example, the main body width is about 570px. So, the maximum width to post a large image is 570px. But, to make the image looks nice, we have to give some padding to it.so,choose the width which is a bit less than the post body width.. like 560px.

Now, Go to Layout » Edit html

Find this

]]></b:skin>

Add this before that line:


img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}


Change the value in red depending on the previous step.

Note: Do check if you have the img{ tag already in your template. If its there, just add the additional couple of lines to it.


max-width: 560px;
width: expression(this.width > 560 ? 560: true);




Save the changes.

2. Now, while doing your posts, upload the images normally like you did previously. Once the image is uploaded, go to Edit html tab, and the image code will look something like this


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>


All you have to do is Just remove that bolded text (width and height attributes) and replace s400 to s800.

So, the final code looks like this


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>


Done! Now, your uploaded image will look big in the post.

Continue reading »

Some people prefer not to display the label count in their blogs as it looks a bit unprofessional. Lets say if you have a label 'Funny sms' with 50 label count and another one ' Good morning sms' with 2 as label count... less people will show interest on clicking the second one.

So, lets see how to hide or remove the Label count in your blogger blog(s)...

1. Sign into Blogger dashboard » Layout » Edit html

Tick the expand widget templates and remove this line from the template..


<span dir='ltr'>(<data:label.count/>)</span>



2. Save the Changes and done!

Continue reading »

If your Blog has lot of long posts, adding a cool flying 'Scroll to Top' link makes it easier for your visitors to quickly navigate your pages.
Most of you have already known about how to add 'scroll to top' by adding simple '#top' to your links. But, this one uses Jquery which makes it really smooth ( you really like it for sure).
So, lets learn how to add it to your Blogger blog..

1. Go to Layout » Edit html
Find

</body>

Add before

<a href="#" id="backtotop">^ Scroll to Top</a>

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

<script type='text/javascript'>

/*-----------------------

*Scroll to top


-----------------------*/



$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});



$(function() {

$("#toTop").scrollToTop();

});

</script>


2. Find


]]></b:skin>


Add before


#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }


3. Save the changes!

Continue reading »

This article explains how to add music,mp3,audio to your Blogger (blogspot) Blog :

" Music expresses feeling and thought, without language; it was below and before speech, and it is above and beyond all words. ~Robert G. Ingersoll "

Adding a nice music track to your blog may enhance the pleasure of reading your blog or annoy your visitors depending on the kind of blog you have. For example, if you have a music blog, adding some nice song tracks to your blog sidebar can make your visitors to stay longer which benefits you.
So, let's learn how to add mp3 to your Blogger Blog:

Step 1 : First, upload the music file to any free file hosting servers on the net. There are tons of sites that provide free music file hosting. Just google "Free music hosting". Once you upload, they will provide you with a direct link to that music file.
ex: the file looks something like this :

http://---------- .com/yourmusicfile.extension

(extension can be .mp3 or .wav or .mid or any other audio extension).
I uploaded a sample mp3 file to my server..

http://myblogtalk.com/uploads/billu.mp3


Step 2 : Here is the code you need to add music to your blog


<embed width="250" height="50" autostart="false" src="MUSIC FILE URL"/></embed>

width : width of the music player
height: height of the music player
autostart : you want the music to start playing automatically ? or leave it to visitors choice..? (values : false or true)
MUSIC FILE URL : the direct link to your music file
In this example, MUSIC FILE URL is

http://myblogtalk.com/uploads/billu.mp3


So, if you add that code, the output will be like this
(I used the autostart: false, so you have to click on the play button to start playing music)
Click on the Play button to test



If you use the autostart value: true, the music automatically plays.. but, it annoys many readers

Few more attributes :
loop : true (or) false
If you want to continue playing the same track again and again until the visitor click on the 'STOP' button (or until he/she leaves your site), set the value to 'true'.
If you want the music to stop once the track is completed, use 'false'

playcount : n (n= any positive number)
suppose.. if you put playcount: 2 , the music will play two times and stop

If you want to use these two more additional features.. the code look something like this:


<embed width="250" height="50" autostart="false" loop="false" playcount="2" src="MUSIC FILE URL"/></embed>

Now What ?
You can add the music player anywhere you want in your Blogger blog..
Sidebar : If you want to add in sidebar, go to Layout » Add a gadget » html/javascript
and paste the code and save it.

Blog Posts :
If you want to embed music file to any specific blog post..
Paste the code in 'Edit html' mode and save it.


Related:
How to add Video clips to your Blogger Blog?

Continue reading »

Yesterday, a reader(Yakacha) asked me

Thanks for your beautiful templates.You r great.I want to ask u something. Do u know how we make separate unique title and meta tags for each posts in a blog? I have seen others doing that.

What's the use of adding different meta descriptions to different Blogger Posts?

So, how to add this?

For this to happen, you have to add some pieces of codes to the template.
First Sign in to Blogger dashboard » Layout » Edit html

and find this line


<b:include data='blog' name='all-head-content'/>

and add this code just below that line


<b:if cond='data:blog.url == "http://bloggertricks.com/"'>

<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/> </b:if>

So, the final code looks like this one


We now added meta tags to the homepage. Next, you want to add meta description for another post, for example : http://bloggertricks.com/2008/05/how-to-add-paypal-donate-button-to-your.html

Now, what you have to do is pasting the above three lines below the present code and changing the link,description and keywords.
So, the final code now looks something like


<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.url == "http://bloggertricks.com/"'>

<meta content='DESCRIPTION' name='description'/>

<meta content='KEYWORDS' name='keywords'/> </b:if>

<b:if cond='data:blog.url == "http://bloggertricks.com/2008/05/how-to-add-paypal-donate-button-to-your.html"'>

<meta content='How to add Paypal Button to your Blogger Blog, Adding Donations to your blog' name='description'/>

<meta content='Adding,Paypal,Donate,Button' name='keywords'/> </b:if>

Just like the above procedure, you can add different meta tags to as many blog posts as you can.

Try it out and share your experiences!

Continue reading »

Everyday so many readers leaving comments asking "How to install xml blogger templates?".
So, to make it easier for you, here is the complete tutorial on how to install blogger templates downloaded from this site..

1.First download the template and unzip the file using winrar or winzip. After extracting the file you will see a folder named Images(incase if you lost) and an xml file.

2.Now, sign in to Blogger dashboard and click on the layout.



3.Here is the important step, after uploading any new Blogger template, all of the previous widgets like your google adsense ads,text,profile,poll,etc etc will be lost.
So, to avoid this to happen, in this step click on 'edit' on all the widgets and copy the codes into notepad,etc.



4.Next, click on the 'Edit html' tab



5.You'll see an option to download the current template, so do it!



6.Just below that,there's an option of uploading new template.So, use the Browse button and upload the downloaded xml file(which we discussed in step 1).



7.Now, a message appear saying that your widgets are about to be deleted.Click on the Confirm & Save (no problem doing this because we already copied the widget codes in Step 3).



Now you successfully installed the template :)
Click on the 'Page elements' page now and add the codes that you copied in step3 using the 'Add a Page Element' option.

Note:The *Images(incase if you lost)* folder contains all the image files used in the template.
Daily thousands of template copies are downloading from this site.. so, in future if my server bandwidth exceeds, you may see images not loading in your sites.So, For this not to happen, Upload all the images to your own server..
Doing this is very simple, Click on the 'Edit html' and go through the template code and replace all the image links(starts with http and ends with .jpg or .gif or .png) with the direct image links you got after uploading the images to any Free image hosting service like photobucket,etc. and SAVE THE CHANGES.

Continue reading »

One of the reasons why so many people are switching to wordpress from Blogger is for the Comment form.The Blogger comment form sucks as people have to click on 'add a comment' then redirect to blogger and posting the comment... and most of the people are too lazy to do it (atleast myself).But, here is the good news...Blogger released this most awaited feature a couple of days ago... and let's learn how to add this to your Blogger blog (this works both for new blogger and classic blogger)here is the screenshot of how it looks:

Learn how to add this to your blog.. 1.First Sign in to Blogger Draft and select your blog and click on the Settings 2.Next, Click on the "Comments tab" and select the "Embedded below post" option and Finally Save the changes..that's it! I know most of you want to add this new feature to your blog as soon as you can...

Continue reading »

What is Anchor text?
An Anchor text is the visible text which is clickable in a hyperlink.For example,

"Blogger Tricks -Your online source for Blogger Templates"

In the above line,.. the Clickable text i.e, "Blogger Tricks" is the anchor text.
While Search engines crawl a webpage, the Anchor text tells them what that linked page is about.In the above example, the Search engines assume that the linked page is about blogger,blogging,tricks,tips,...related key words and it helps that webpage to rank higher for that respective keywords.

But, some people who don't know the importance of Anchor text do like this:

"Your online source for Blogger Templates - Click Here".

In the above case, the Search engines consider the linked page is about click,here,etc .. which are unrelated to your site... :(
So, if you understand the importance of it and use it cleverly, it will increase your search engine rankings very effectively.. especially in Google and it's very important if you want your website to be in top 10 for a particular keyword.

so.. How to do the Anchor text optimization?

Simple! always use the related keywords as Anchor text while linking to any webpage.
If you purchased any incoming links,make sure that one of your top keywords is in the anchor text.The more inbound links your get with that keywords, the more chances of your site will make it to top 10.These small things can make a huge difference :)

Continue reading »

This post explains how to add a Paypal donate button to your blogger(blogspot) blog:-

Adding a Paypal donation button to your blog will give your loyal readers a chance to support(encourage) you by donating a few bucks.
If you don't have a paypal account yet,.. you can get a Free Paypal account here.

so,let's see how to put a Paypal donation button in your blog...

1.First,Log in to your Paypal account.

2.Click on the 'Merchant Services' tab (see at the top of the page).


3.Scroll down the window and you will see an option "Donations" in the right sidebar.Click on it!


4.Now,you will see some options like Donation name/service ,donation id,etc etc...
The first field (Donation name/service) is the only thing that is required and all the remaining fields are optional.
Enter that first field,choose a button style,scroll down the window and click on "Create a button Now"


5.Now,you will see some html code... Copy it and sign in to your blogger dashboard »» Click on the layout »» Add a Page element »» html/javascript »» and paste that html code and SAVE THE CHANGES.

Here is how the button will look in your sidebar

© Blogger Tricks

Continue reading »

Continue reading »

This post explains how to redirect your blogger (blogspot) blog/website traffic from one url(address) to another:-

Suppose you have a blog(abc.blogspot.com) which have some decent amount of traffic and you are not going to use that blog anymore(if it is banned from placing ads due to some reasons by some affiliate programmes like adsense,adbrite,etc).
But,you don't want to waste that traffic.So, with this redirection process, the old blog visitors will be redirected automatically to your new blog address or your own domain name if you have registered it(something like abc.com) so,your traffic won't be waste

So, how to do this?
If you are using a NEW BLOGGER TEMPLATE, do this:-
1.Sign into your blogger dashboard.
2.Click on the layout link>Edit html
3.Copy the below html code and Paste it anywhere between the head tags.[look at the below screenshot]

Don't forget to replace the newblogaddress in the code with your destination url(address)

4.SAVE THE CHANGES.

If you are using a CLASSIC BLOGGER TEMPLATE,follow this:-
1.Sign in to your blogger dashboard
2.Click on the template link next to your blog name.
3.Copy the below code and paste it below the head tag as shown in the below screenshot


Don't forget to replace the newblogaddress in the code with your destination url(address)

4.SAVE THE CHANGES.


That's it! Now, all your old blog traffic will be redirected to your new address
If you have any questions,ask here.

©Blogger Tricks

Continue reading »