Friday, June 5, 2009

Numbered Page Navigation Menu Widget for Blogger

8 comments 6/05/2009
Sign up to receive our site updates!
Bloggers are Really love this widget coz the visitors easily navigates your blog posts and have got idea about how many no posts are there......

you find Numbered navigation widget in different styles.Here we provide one of the coolest among those ....



Lets see how to add this widget....

Follow below steps how to install it :-

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Add Page Element.


A new Window Will Open in Which Select Add Html/Javascript.
It will ask For Javascript.

Now Copy The Whole Javascript Below And Paste in it.



<style>

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

font-weight: bold;

text-decoration:none;

border: 1px solid #000;

background-color:#fff;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #000;

background-color:#057BD3;

}

.showpagePoint {

color:#fff;

font-weight: bold;

text-decoration:blink;

border: 1px solid #000;

background: #057BD3;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #000;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333;

}


</style>





<script type="text/javascript">


function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount=10;

var displayPageNum=3;

var firstPageWord = 'First';

var endPageWord = 'Last';

var upPageWord ='Previous';

var downPageWord ='Next';





var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';


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!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; 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] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){


itemCount++;

}


}else{

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+'T00%3A00%3A00%2B08%3A00&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){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

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 += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

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++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){


if(thisNum>1){

if(!isLablePage){

html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}else{

html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}

}


html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;


if(thisNum<(postNum-1)){

html += downPageHtml;

html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';

}


if(postNum==1) postNum++;

html += '</div>';


if(isPage || isFirstPage || isLablePage){

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;

}

}


}

</script>


<script src="http://YourBlogName.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<spam><a href="http://techtasks.blogspot.com/2009/06/numbered-page-navigation-menu-widget_04.html" target="_blanck">Grab This</a></sapm>




After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot



Page Navigation Menu Widget



In the above code you can edit the below lines into your wish .

1 : var pageCount = 10;

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


2 : var displayPageNum = 3;

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


3.YourBlogName.blogsopt.com is replace with blog url.

Now save your template .
That's it now we have added Page Navigation menu widget to our blog successfully .


Credit:Techieblogger
Your Ad Here

8 comments:

BLog aNaK yG ga peNgeN GobLo' . . on June 21, 2009 at 9:59 PM said... [Reply]

A rEaL soLutioN for a beginner like me.
Thank you !!
Can you tell me how to promote my blog ?

Tejaswi said... [Reply]

Its not working....It had appeared in the blog. But its displaying the Message. No query matches your post from the second page till end

Rajesh Kumar.Chekuri on September 8, 2009 at 11:32 AM said... [Reply]

@Tejaswi ...
It's working super fine....Once again check the the setup instructions ......

delphi on September 14, 2009 at 7:38 AM said... [Reply]

Hi, ur widget is better than the 'other one'. Not much missing post but still have. I have about more than 10 page of post (1 page about 10 post).
I checked, after 2 first page everything is okay, on page 3 their start missing 1 post (only 1 post every page) and duplicate 1 post on page 6 (only). And continue till the last page.

Can u help to find why is that happen? How the solution?
Pls ur assist. U can see it at my blog delphi-bluefish.blogspot.com

Thank u very much.

Rajesh Kumar.Chekuri on September 14, 2009 at 8:19 AM said... [Reply]

@delphi...
Nothing problem in the widget
if you have 122 posts it takes 13(require 130 posts) pages to display,In first 5 pages shows 50 posts, 1 post is duplicate on reaming 8 pages to cover the 130(122+8 duplicate posts) posts....

ips.jolly on September 24, 2009 at 10:29 PM said... [Reply]

not working only grab this is there ; )PLZ HELP


HOW YOU GOT THAT ALEXA RATING.......



http://htinnervoice.blogspot.com/

Rajesh Kumar.Chekuri on September 24, 2009 at 11:20 PM said... [Reply]

re verify the setup instructions....

grab the Alexa Ranking from here
http://www.alexa.com/siteowners/widgets

Daniel Benny Simanjuntak on February 19, 2013 at 2:59 AM said... [Reply]

Awesome widget! Keep it up..
Bloggers are expecting this types of widget. Thanks.. :)

Respects for your's Questions & Opinions

  • Friends
  •  

    Recent Posts

    New Comments

    Copyright 2008 All Rights Reserved Tech Tasks Template by Rajesh Kumar Chekuri