Blogger, Blogger Hack

Page Navigation Hack for Blogger

1 79

Most said page navigation menu in the bottom of the page can appear only in WordPress blogs. But Now here is a blogger hack which will help you to show Page Navigation Menu in bottom of the page ( see screenshot ) . you can Add this Page Navigation hack to your blogger template either by inserting script to your template by editing or you can add it as a widget . In this post I will write only how to add this Page navigation menu by editing template code.

Page Navigation Hack
I have used a background image for this Page Navigation hack. If you want to show this without the background image just remove the background image url .

Let us start :

Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.

Step 2 : search this line ]]></b:skin> and add this CSS code above that line.
CSS CODE WITH IMAGE :

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;}

It must look like this :

 When you Add CSS code to your template , it must look like this

Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

Now Add This script just below the </b:section> .

 

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&q uot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<div style=’text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;’> <a href=’http://www.smashingtips.com/page-navigation-hack-for-blogger-blogs’>SmashingTips – Blogger Tips</a></div>

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my blog I have put that value as 2 . In each page you can see only 2 posts .

2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.

For example :

In my blog I have chosen 3 , then 3 pages will be shown.

That’s it now we have added Page Navigation menu hack to our blog successfully. That CSS code will suit almost all templates. Please don’t remove the credit link.

I hope all of you will like this Page Navigation blogger hack . If you have any doubts please ask in comment section . Comments are most welcome , please give me your feedback about this blogger Hack.

You can also add this Page navigation hack in the another method : Widget style.

About the author / 

Mohamed Rias

I'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.

Related Posts

1 Comment

  1. kim July 9, 2011 at 7:01 am - 

    Awesum …
    Looking for this for 5 days ….

Popular

Editor’s Pick

  • Implementing SOLID Principles in Your React Frontend Development

    Learn how to improve the maintainability and scalability of your React frontend applications by implementing the SOLID principles. From Single Responsibility to Dependency Inversion, this article covers practical examples and best practices for writing cleaner, more modular code in your React codebase. Join us on this journey towards better frontend development with Implementing SOLID Principles in Your React Frontend Development.

  • 35+ Creative Ads That Makes You Look Twice

    You might have seen plenty of advertisements on the road sides or when you have flipped over magazines. I hope that you might have just skipped most of them, but there are some cool creative advertisements which would make you look twice. To create Creative advertisements , the designer must be innovative enough to take…

  • Responsive Web design Tips : #1 SCALING IMAGES

    Responsive Web Design is an approach in which a designer intends to provide an optimal viewing experience. Before knowing about the concept of scaling images, let’s have a look on “Responsive Web Design”. Nowadays people want to get access to the Internet data from any place using a wide range of portable devices- desktops, laptops,…

  • How to Remove Author Name From Blogger Posts

    If you are running multiple blogs and for some reason you don’t want to show your name in author field, Then this Blogger hack is for you. Though the topic looks very simple , but most don’t know how do this. So in this tutorial , I will explain how to remove the author name…