Stylized Page Navigation Widget For Blogger|Blogspot blogs – MBT Church Theme Style!

Page-Navigation-Widget-for-Blogger As mentioned in the download page of MBT Church Theme that it has a Page Navigation Widget that is an alternative to Recent Posts, Home and Older Posts links at the bottom of blogger hosted blogs. In order to add the stylized version of Page Navigation Widget created by Mohammad Rias to your MBT Church Theme, follow the steps below,


Page Navigation Widget For Blogger Hosted Blogs

  1. Log into your blogger account and go to Layout > Page Elements
  2. Then Click on Add a Gadget
  3. Amongst the Blogger Featured Widgets Choose HTML/JavaScript Widget

    html-javascript blogger widget

  4. Inside the HTML/JavaScript Widget  paste the code below,

    <style type="text/CSS">

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #7AA1C3;
    background-color:#F6F6F6;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #7AA1C3;
    background: #F6F6F6;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#7AA1C3;
    }
    </style>

    <script type="text/JavaScript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 2;
    var displayPageNum = 5;
    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 += '<span class="showpagePoint">'+thisNum+'</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 = ''+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>';

    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="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

  5. If you are using a domain other than .blogspot.com or .com, then kindly change  the bolded red text .com with your domain extension. For Example if your domain ends with .info or .biz than replace .com with .info or .biz . But if you are a BlogSpot user than leave the code unchanged.
  6. Once you have pasted the code inside the widget, simply drag your HTML/Javascript widget to the area just below your posts and drop it there, as shown in the picture below,

Page-Navigation-Widget-For- blogspot blogs

 

That’s All!

Hope you enjoyed it. Let me know if anything is unclear.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

58 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. thnx 4 helping me...

    ReplyDelete
  2. MOHD never expected blogging would be such a wonderful experience. Thks for your part in nourishing interest in new bloggers.

    I just loved the nagigation widget code!

    ReplyDelete
  3. Thks mustafa, that was really easy to add.

    Kindly let us know how to edit the menu bar of MBT Church Theme. I can't edit the links in it

    ReplyDelete
  4. Thank you for your contact I preferred to remove the posts.

    ReplyDelete
  5. I am very happy to have received your visit

    ReplyDelete
  6. Until now im still looking for this script...It still didn't work out... What seems to be the problem?

    ReplyDelete
  7. Really helpful...Dude how about adding mines..

    http://firyfriends.blogspot.com

    ReplyDelete
  8. @shiffer
    thks pal!

    @mohan,

    I will let you know soon.

    @PRC

    The reason why it doesn't appear may be because you are using a free domain i.e .co.cc Try replacing .Com in the above code with .co.cc and see if it works. If it doesn't than you will need to remove your .co.cc domain and revert to the default .blogspot.com Why don't you buy a custom domain like .com? it only costs about 9 dollars a year!

    I would appreciate if you replace your template with the customized MBT Church Theme Its the optimized version of your current template.

    ReplyDelete
  9. very nice awesome worked 100% nice and thnx

    ReplyDelete
  10. hi Mohammad. your script didn't work when I first copied it. i changed
    var pageCount = 2; var displayPageNum = 5; to
    var pageCount = 15; var displayPageNum = 15; (I have 15 post on one page) .. it worked except that it skips page 3. i can't open page 3 at all. Does the navigation page depends on the 'post date' ? Page 3 first post's date equals Page 2 last post's date ...could that be the reason ? Which other part of the code do I need to change ? thanks

    ReplyDelete
  11. @aishah,


    Friend if you would have shared your web link that would be a lot better to understand your problem.

    I would advise that you reduce your pagecounts and displaypagenum to something less than 15. This widget no doubt has bugs and is still under process. But I guess choosing pagecounts less than or equal to 10 will be more impressive in terms of page load time and widget use.

    The reason that you point out could be the main reason but even the creator of this widget has not yet clearly understood its alogrithm!

    ReplyDelete
  12. DEAR MOHD :-PLEASE HELP ME I HAVE A GAME SITE COMPRESSEDGAMEZ BLOGSPOT THERE IS A GAME LIST "LABEL"AT THE BOTTOM ,THE PROBLEM IS THAT THE GAME LIST IS TOO LONG ?

    SO PLEASE GIVE ME SOME CODES TO SHOW/HIDE THE GAME LIST WITH A CLICK THANKS FOR THE HELP PLEASAE POST IT IN YOUR SITE PLEASE

    ReplyDelete
  13. @Rahul

    Friend since I am busy with a hectic schedule but you can read the post below to help you out,
    Expand/Collapse

    ReplyDelete
  14. hey when i click on previous number i wont go it stuck on that page
    example i am page 30 if i wont to go page no 20 then i wont go it stuck on same page
    my blog www.znext.blogspot.com

    ReplyDelete
  15. @computer technology

    Don't worry readers wont go that far. Further this widget has some bugs and is still under test. But it works best within first 15 pages

    ReplyDelete
  16. Hey Mohammad, I visited your Profile page in Blogger. I'm surprised to know that you're just 20 yrs old. WOW! You have a bright future ahead of you. I just discovered blogging a few months back, and now I also seem to get addicted to it..haha. It's nice to know that you're also a computer enthusiast like me. More power and Success to you! (^c^,)™

    ReplyDelete
  17. @DreamChaser214

    Its great to know you successfully added it to three of your blogs. I just heard the news that the widget has been updated so I would try to update the above post very soon.

    Thanks for that lovely message. Yeh I am 20 and am pursuing a B.E degree in Computer System Information. Just joined uni! :D

    ReplyDelete
  18. DEAR MOHD :- I VISITED TO YOUR RESPONSE LINK AND ITS NOT GOOD ITS CONFUSING PLEASE YOU POST IT HERE IN YOUR OWN WAY BECOZ YOU MAKE THING EASY LIKE FUN .I ASKED YOU ? THAT GIVE ME A WAY TO HIDE AND SHOW ANY LABEL PLEASE HELP ME OUT THANKYOU SOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO MUCH FOR YOU REPLY I PRAY TO ALLAH THAT HE GIVE YOU A LOT SUCESS IN YOUR LIFE JUST KEEP THIS GOOD WORK GOING,,,,,,,,,,,

    ReplyDelete
  19. DEAR MOHD :- GOD HAVE MADE GOOD PERSON LESSER THEN WORST SO I M SO HAPPY TO MEET A SAME GOOD PERSON LIKE YOU "IF EVER YOU WANT ANY HELP PLEASE TELL ME " T WANT TO SUPPORT YOU YOU ROCK................

    ReplyDelete
  20. @Rahul

    I am sorry that the reference tutorial proved unhelpful to you. I will make sure that I write a tutorial on it soon to help you out. As you know that I usually avoid already existing tutorials and try to keep my articles unique but sometimes I have to sacrifice for regular readers like you :>>

    Thanks for appreciating my efforts. Friend I am good because you made me feel that way. I am thankful to you for your precious comment.

    ReplyDelete
  21. HELLO FRIEND MOHD THIS IS RAHUL AGAIN

    ANSWER ME SOME ? IF YOU WANT

    1> ARE YOU FROM PAKISTAN OR INDIA
    2> DO YOU SPEAK HINDI
    3> CAN I TALK TO YOU ON G-MAIL AT ONES AS I HAVE SOME GOOD SUGGESTION FOR YOU AND WANTED TO ASK YOU ABOUT BLOGGER TERMS AND CONDITIONS

    "I FEEL VERY LUCKY TO FIND YOU"

    PLEASE CAN YOU REVIEW MY BLOG TO SEE WEATHER I HAVE LEARNED FORM YOU AND USED IT GOOD OR NOT

    I ALWAYS THINK CREATING A MOST UNIQUE THING HOPE YOU LIKE MY BLOG SIR

    "I HAVE THAT MUCH SKILLS THAT I CAN SAY I CAN DEFEAT WORLD'S BEST SITES"

    I AM VERY SORRY TO PASTE MY LINK HERE

    freedownloadgamesforpc.blogspot.com

    MY BLOG IS 2.5 MONTH OLD NOW I M USING ADBRITE ADS ON MY BLOG PLEASE ALSO CHECK MY SITE GOOGLE RANK . I HAVE ONLY 130 VISITORS PER DAY OUT OF WITCH MORE THEN 70 ARE NEW "IS THIS FINE OR WORST"

    PLEASE GIVE ME POINTS FROM 1-10 ON THIS BASIS

    DESIGN =
    UNIQUENESS =
    CONCEPT=
    S.E.O=
    ERRORS=

    [I SEARCHED MANY TOPICS ON THE GOOGLE THAT ARE BEING SEARCHED ON THE NET HAVING LESS COMPETETION THIS TOPIC ARE NOT WELL ANSWERED "THESE YOU CAN INCLUDE THEM IN YOUR SITE FOR GOOD OPTOMISATION " ]

    SO INCLUDE SOME OF THIS TOPICS TO INCREASE YOUR VISITORS

    1> SCROLL FOLLOW DIALOG BOX
    2> POP UP WINDOW WITH CLOSE BUTTON
    3> HOW TO PLACE DIALOG BOX AT A SPECIFIC POSITION
    4> HOW TO LINK A LINK IN OPEN IN A NEW WINDOW HTML
    5>EXPLAIN USING OF LABEL "ITS VERY HARD TO SEARCH FOR PEOPLE"
    6>SCROLLING IMAGE BELT WITH CLICK ABLE THUMBS

    ALL THESE TOPICS ARE HARD TO SEARCH ON GOOGLE AND NOT ANSWERED WELL SO GRAB THIS CHANCE TO GET MORE SEARCH RESULTS

    I WILL LOVE TO DISCUSS ABOUT YOUR AND MY SITE ON G-TALK IF YOU WILL ALOW I WILL SEND YOU MY ID "I M NOT A FAKE PERSON" I HAVE WORKED ALL THE HOLE ONE NIGHT FOR YOUR SAKE AS YOU HELP THOUSANDS.................. THANKYOU

    MOHD__

    ReplyDelete
  22. @Rahul

    I really appreciated your time and energy to write to us. I am grateful for the ideas you shared which can help us with future posts. I would love to contact you via a messenger. My gmail ID is -> mustafa.stc

    The answers to your questions are as follows,
    1. I live in Pakistan and have a Nationality of Afghanistan (The war Effected Country)
    2. Indeed I can understand Hindi for I can speak Urdu :>
    3.You can surely chat with me as most readers usually do. I hope I will be of help to you.


    Rahul I have visited your blog and found that you are a human with great talent and ability to improve. You can surely beat all major niche blogs with such skill and spirit. I really liked your choice of colours. And this is a distinct ability of a designer. I have few suggestions which I hope will be of great help to you for your future success. But I will provide you these suggestions on email for your privacy sake.
    I also can not give a rating because this comment will be read by many and your privacy is more important to me.

    I thank you for believing in us. May you have what you dream for.

    Waiting to talk to you in person soon.

    Regards,
    MOHD__

    ReplyDelete
  23. HEY CAN I GIVE YOU MY ID HERE NOW

    ReplyDelete
  24. HEY MY ANOTHER ADVISE AS YOUR SITE IS MORE OF READING THEN CLICKING SO MAKE YOUR SITE BACK GROUND DARKER TO READ TEXT WITH NO EYE PROBLEM

    TRY USING DARKER BACKGROUND WITH LIGHTER TEXT

    TRY IF YOU THINK

    AND ADD ME SOON

    ReplyDelete
  25. Budding of new friendship without boundaries!!

    ReplyDelete
  26. Mohammad I need the code to add the Page element box where there is none. I have successfully added the navigation menu to one blog as there was a page element at the footer, but on my training blog I do not have one, how do I add?

    ReplyDelete
  27. thanks i have added to my blog
    plz see this
    www.faisal3355.blogspot.com

    ReplyDelete
  28. @Remington

    Always share your Blog url for problem related questions because this helps me see what codings are used in your blog. Though I can give you an easy way to add a page element. Follow these steps,

    1. Go To blogger > Layout > Edit HTML
    2. Back up your template
    3. Find this code,
    </div></div> <!-- end outer-wrapper -->

    Note:-If you could not find it then find this instead,
    </body>

    4. And paste the code below just above it,

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

    5. View your page elements to see a page element now hopefully :>

    @Faisal

    Good job bro!

    ReplyDelete
  29. Mohammad thank you added the code and it added the page element perfect. But when copy the navigation code into a widget it does not perform. My url is http://remingtonkissimmeebayuptospeed.blogspot.com/

    it is a private Blogg and I have added you as a permission. Unless this is not your e-mail address Mustafa.stc@hotmail.com
    Thanks
    Mark

    ReplyDelete
  30. @Remington

    Just One question,

    1. Did you drag the widget to fit below your post body?

    I rechecked the code in my text blog and it is working fine -> http://zailab.blogspot.com/

    ReplyDelete
  31. Yes I Dragged the widget below the body post and it shows up blank? I retried to copy and paste the code in and it still didnt work? It does work perfectly in my other blogg for consumers....

    ReplyDelete
  32. Dear Mustafa... You have replied someone here this:

    @PRC

    "The reason why it doesn't appear may be because you are using a free domain i.e .co.cc Try replacing .Com in the above code with .co.cc and see if it works. If it doesn't than you will need to remove your .co.cc domain and revert to the default .blogspot.com Why don't you buy a custom domain like .com? it only costs about 9 dollars a year!"

    I have a crack to make it work for .co.cc or for any other domain. For .co.cc take a look at the code below.

    var isFirstPage = thisUrl.substring(thisUrl.length-4,thisUrl.length)==".cc/";

    This will work. As you can see there are two changes I have made to the code of urs at this line. first I put length-4 instead of length-5 on ur code and secondly instead of ".com/", I put ".cc/". Here the difference is the length of the string u r checking. The string length of ".com/" was 5 while the string length of ".cc/" is 4, thats why I put length-4 in the code. This will work for any domain if you follow the same rule. like if you wanna put ".co.cc/" then simply change the string length to be check as length-7.

    ReplyDelete
  33. @Foez

    Appreciate the great help pal! You are always welcomed here. :>>

    ReplyDelete
  34. Hi friend. I applied this on my blog. But I like wish to add 5 posts per page. What to do?

    ReplyDelete
  35. @Robin Hood
    Dear find and edit these two codes one by one,

    var pageCount=2;

    This code defines the number of posts that would be displayed per page.

    var displayPageNum=5;

    This code defines the number of links which are displayed (eg: 1 - 2 - 3 - 4 - 5) beneath the posts section.

    Simply change the numbers 2 and 5 according to your preferences.

    Hope that was the answer of the question :>

    ReplyDelete
  36. Hey, Mohd. if i click on next. only two results appear. Is there anyway to view more ?

    ReplyDelete
  37. @Sreejesh

    How many posts you have. If they are more then 10 then it must work just fine. Kinldy read commnet#37 for further help

    ReplyDelete
  38. If we don't want to have your version of the pagenavigation widget, then how do we remove it from the MBT church template?

    ReplyDelete
  39. its not working correct...display only 50 pages(10 post per page)
    and i have 1441 post active

    ReplyDelete
  40. thanks for this tutorial,
    already use it on my blog now.:-)

    ReplyDelete
  41. NOt working in my blog! Why? What's the reason behind :(

    ReplyDelete
  42. Not working

    www.tricks-4u.co.nr

    ReplyDelete
  43. Hello! i just wanted to say i think this is brilliant. I loved the fact that i could install it without having to mess around with the template. Many thanks! You can view it if you like at http://www.justmeglenny.com/

    Keep up the good work! (i have stumbled your site btw because i think i could be of interest to other new bloggers)

    ReplyDelete
  44. Hi
    can you tell me please that how you make the GIF image above?

    ReplyDelete
  45. Salam Mustafa bhai..

    i am facing problem with this widget. i almost tried every code online for this purpose but problem is the same, that navigation is not visible. may be its something wrong with my template markup.

    please take a look. i really need this widget.hit me back soon bro.

    my blog url is

    http://bloggeranalytics.blogspot.com

    ReplyDelete
  46. Assalamualaikum,
    Dear Mustaza, I am writing to ask for your help. I applied your widget and it does functioning, but some problem exists. when I click on page 2, it jumps to page 3. Why is that?

    Wassalam

    ReplyDelete
  47. Working. Great!
    ebookzdownloadz.blogspot.com

    ReplyDelete
  48. Hello, I want to use your Stylized page navigation on my blog actressnavel.blogspot.com but its not working on blog.

    Please guide me whats wrong with it.

    Thanks

    ReplyDelete
  49. Thanks Mohd.. Works like a charm.

    I have been applying most of your blog tricks to my blog. And I am grateful to have found you. I want to know something about you.

    1.Your Age
    2.How many unique visits do you get.
    3.Do we also get paid on unique visits impressions by Google Adsense program.
    4.Does having linkreferral backlink creates problem to sign up for google.
    5.Pl. visit my blog & provide me a your invaluable REVIEW & suggestions - www.yourbloggingtips.com
    6.How much do you earn on monthly basis. (I know its pretty personal, but it will provide newbies like us a great sense of motivation).

    Thanks

    Nihit Dalmia

    ReplyDelete
  50. very stylized page navigation..

    ReplyDelete
  51. not working for my blog

    www.infoexpo.in

    plz chech
    i have changed .com with .in
    but not working on my blog

    do i want to create pages other than the above steps?
    plz help

    can any show this in any blog for example

    there are many blogger tricks not working with my blog
    like sticky bar
    look the condition of sticky bar www.infoexpo.in

    plz give me solutons for these errors

    ReplyDelete
  52. Hello Mohammad,

    I tried your code to my blog otodiy.blogspot.com
    Already change the PageCount=5 since I display 5 pages
    Currenly I have 720 posts, so I believe It should display 720/5 = 144 pages. But the codes only calculate 101 pages

    Kindly help

    regards,
    singachu

    ReplyDelete
  53. I always follow your website to developed my blogging website
    www.24xhtml.com . It's provide the most helpful tips and information on HTML, CSS and Design.

    I am using your code for pagination, but doesn't work for me.
    Please can you check my website www.24xhtml.com and let me know if I did anything wrong.

    Regards,
    Regina
    www.24xhtml.com

    ReplyDelete
  54. nice share. works on my blog.
    thank you

    ReplyDelete
  55. thanks bro... used your template in my blog its ULTRA premium and fast..
    can you help me with changing changing background color and navigation menu color...
    please tell me how it can be done

    ReplyDelete