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 »

It's been quite a while since I've released any new blogger template...because of my studies,etc..but, Here I'm ...again back with another Stunningly looking Magazine Style Blogger Template.."Novinture".

I've did so many blogger templates sofar, but for me this one is the best of all.. I love the color combination..looks very professional and cool... and ofcourse with an amazing slideshow feature.

Here are some of the features :

• Top Nav links
• Stunning Slideshow
• Retweet button
• Facebook Share button
• 4 Column footer
• Email Subscriptions
• Feed Counter
• Built in Search Box
• Wonderful Comment section (with avatars)
• Most Wanted feature.. Page Navigation Enabled
• Automatic Thumbnails on homepage
• Automatic Post summaries on homepage
• Advertisement banner ready (on header)
• many more.....

Look at few more screenshots...

Page Navigation Ready!

Clean and Professional Comments Section

And the best thing is..its very easy to install.

Here are Installation Instructions:
(Before you do this, first backup your current template)

1. Download the template and Sign into Blogger » Design » Edit html

and Upload the template file (xml file) and Save it.

2. Editing Top Navigation Links...

To Edit the top Nav links (Home, About Us, Photos,etc..)

Sign into Blogger » Design » Edit html » Tick the "Expand Widget Templates"

Control + F (to search)

Find these lines

<li>

<a href='http://www.bloggertricks.com'>Blog Tips</a>

<ul>

<li><a href='http://templates.bloggertricks.com'>Blogger Templates</a></li>

</ul>

</li>
<li><a href='http://YOURLINK.blogspot.com'>About Us</a></li>

<li><a href='http://YOURLINK.blogspot.com'>Photos</a></li>

<li><a href='http://YOURLINK.blogspot.com'>Videos</a></li>

<li><a href='http://YOURLINK.blogspot.com'>Contact</a></li>

Edit the URL's and their respective Anchor Text's to whatever you like.


3. Editing the Feedburner links

Suppose, if your Blog's Feedburner url is

http://feeds2.feedburner.com/YOURBLOG


Search for "BloggerTricksdotcom" in the template code.. (it will appear 5 times)
and replace every "BloggerTricksdotcom" with "YOURBLOG"

Save the template!


And for Editing Slideshow, Adding Adsense inside post,etc .. Refer to the Complete guide.

If you've any questions,doubts... feel free to ask HERE (template support link) .. I'll help you out..

I hope All of you like the template... looking forward for the comments! :)

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 »

I am very much excited to launch our new section here in Blogger Tricks... "Blogger Video Tutorials". To make sure that you benefit in the best manner from this site, I have been working on this passionately for the past few days and have done about 25 video tutorials. Watch out for more interesting tutorials in the next few days.

Why video tutorials?

Well, to give you guys a fantastic multimedia experience where you can learn four times faster than reading lengthy texts. I saw the amazing result myself; reason enough to awaken myself to the fantastic world of video tutorials. Last year, I had uploaded a blogger tutorial to Youtube, just a basic video with poor quality. But people liked what they saw and I ended up with 50k views and 60+ comments. This gives me a strong reason to believe that video tutorials rock big time and I am going to make sure that all of my readers get the best.

So now, just sit coolly and watch the steps, maximize your learning experience and implement what you’ve learnt in your blog and watch your blog traffic and revenue rise.



Thanks for all your support and comments. My apologies for not being active for the past 6 months because I was busy with my exams. Now with the worst behind me(my exams..ha ha ha), I am ready to go full throttle on video tutorials, these 25 that I have done should be very useful for the newbies.

To your blogging success (now in a multimedia experience)

Kranthi

Here are some of them:
How to add Favicon to your Blogger blog ?
How to add Meta tags to your blog ?
How to submit blogger sitemap to Google ?
How to submit blogger sitemap to Yahoo ?
How to add adsense inside blog posts ?
How to add POLL inside Blog post ?
How to add Email subscription box to your blog ?
How to upload Javascript files to your blogger blog ?
How to add ALT text to images for more traffic ?
and many more....
and will add many many more soon...


Looking forward for your comments and any suggestions :)

Continue reading »