Show Next & Previous Post Titles in Blogger with jQuery Navigation

jquery pager navigation in bloggerYou can see that we have replaced Older/Newer Pagination buttons with Post titles. This trick is not a new one and already many developers proposed different solutions using JavaScript or using jQuery. We will also use jQuery but in a more neater and optimized fashion using jquery to fetch URL parameters instead of running long js queries. Blogger blogs are neither optimized nor structured in a user friendly manner. Same applies to default wordpress themes. The pagination buttons make no sense when placed at the bottom of comments container. Anything that provides usability to readers should be placed straight in front of eyes and not pushed down to the page where one would rarely scroll. After checking our analytics stats, I found that Next/Previous buttons placed just at the bottom of post body generates more pageviews compared to placing them down below comments section. They become even more useful if instead of showing just buttons pointing to succeeding or preceding posts, show your readers the blog post titles. We will learn today how to create this professional looking pager navigation in blogspot blogs.

Next Previous buttons

Add it to blogger

First we will add the necessary code for the new pagination and then we will remove the existing default buttons that appear below comment section

  1. Go To Blogger > Template
  2. Backup your template
  3. Click "Edit HTML"
  4. Search for ]]></b:skin> and paste the following CSS code just above it:

 

/*################MBT Pager ##########################*/

.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.mbt-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }

.mbt-pager li.previous { height:114px; margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
}
.mbt-pager li.previous a { padding-right: 24px;  }

.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }

.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

.mbt-pager li i { color: #ccc; font-size: 18px; }

.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}

.mbt-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span,
.mbt-pager li a:hover i { color: #ffffff; }
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }

.mbt-pager li.next i, .mbt-pager li.previous i ,
.mbt-pager li.next,  .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }

.fa-chevron-right {padding-right:0px;}

  • To change the black background and white font color of the selected area on mouse hover edit: background:#333333;    and for font color edit: color: #ffffff;
  • To change the height of the containers edit height:114px; twice
  • Use our Color generator tool for picking the hexadecimal color code

   5. Now we will add some fancy Google web font called Oswald, so that our widget stands out. Kindly search for <head> and just below it paste the following code:

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

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Note: Remove the bolded code if you have already added jquery library inside your template.

     6. Next we will add the HTML code that will position the pager at the bottom of last paragraph on the blog post. Search for <data:post.body/>

     7. Just below it paste the following HTML code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<ul class='mbt-pager'>

        <li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' />
<b:else/>
<i class='fa fa-chevron-right'/><a ><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
</b:if>
</li>

    <li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' />
<b:else/>
<i class='fa fa-chevron-left'/><a ><strong>Previous</strong> <span>You are viewing Last Post</span></a>
</b:if>
</li>

    </ul>


<script type='text/javascript'>
//<![CDATA[
(function($){   
    var newerLink = $('a.newer-link');
    var olderLink = $('a.older-link');
    $.get(newerLink.attr('href'), function (data) {
     newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
     olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   
    },"html");
})(jQuery);
//]]>
</script>

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

Here I used a bit of jquery to fetch the data inside title tags. Since blogger only provides the option to switch between next and previous posts using URLs, therefore we needed jQuery to find the title classes using the heading tags and retrieve the data out of them. The title classes and heading tags may be different for custom blogger templates (you may need my help here by posting your blog urls so that I could tell you the correct title class used inside your blog)

In standard blogger templates the correct class is: .post h3.post-title   and therefore I will be using the same inside the jquery code above.

  • (Optional) The yellow and orange highlighted text can be replaced with any text you like. They will appear when a user is either viewing the most recent post or the last post on the blog.

8. Save your template and you are almost done! Visit your blogs and you will see the pager navigation working just perfectly! :)

Removing existing Next/Previous buttons

Now its time to prevent the default buttons from displaying below comment sections.

  1. Search for  <b:includable id='nextprev'>  
  2. You will see a big chunk of code below it that looks slightly similar to the code below:

<div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
     <span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>

   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>

   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>

</div>
<div class='clear'/>

  3. All that you need to do is to enclose this code inside conditional codes as shown below:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

THE ABOVE BIG CHUNK CODE IN

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

    4. Save your template and you are all done!

Now the default buttons will appear on homepage but not inside posts or static pages. If you wish to permanently delete them, then simply delete the big chunk code above and save your template.

Need Help?

  • If you are looking for free professional set of png buttons for next/previous buttons then check our gallery: MBT Download Zone

I hope this new widget adds a new life to your blogger templates. It is extremely unique in design and rarely used. So be amongst the first to take your blogs to the next level. As always I am here for any help needed. Peace and blessings buddies :)

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 »

118 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. first comment! by the way great post!

    ReplyDelete
  2. Hiiii Mohammad,
    thanks bro for this useful and great looking post. using this next and prev post title on blog will incease the look of blog. thanks again...!!

    ReplyDelete
  3. Every think is ok but can't see Title ! (What's wrong...?)

    Preview : http://www.softfully.com/2012/09/microsoft-net-framework.html

    ReplyDelete
    Replies

    1. In your case you should replace .post h3.post-title with .post h1 This will work perfectly.
      The solution by Code Norvana is also correct but you dont need to insert the class post-title because it is missing inside your blog.
      To align it to center in your blog add this to the styelsheet just above ]]>

      .mb-pager {margin-left: -60px;}

      Need more help? let me know :)

      Delete
    2. We solved this issue .mb-pager {margin-left: -60px;} to .mbt-pager {margin-left: -60px;}

      Thank you...

      Delete
    3. Why does it not work for my blog? :( :(
      My blog is- www.dotgifcomix.com
      Please, pretty please get back to me as soon as you can, I'll be so grateful.

      Delete
    4. Why is my pager different from your pager @Mohammad Mustafa Ahmedzai? See: http://www.dotgifcomix.com/2016/09/reality-and-fantasty.html
      My pager doesn't have a divider between PREVIOUS and NEXT buttons. Also, there are no arrows like your blogger pager has. Can you help me?

      Delete
  4. Hi Mohammad,

    Very good this article!

    Have you ever thought about creating a code to put this new form above the comments? It is very difficult to do this?

    Sorry my accent, I'm using Google Translator!

    Hug!

    ReplyDelete
    Replies
    1. Dear you can add the code anywhere you like. If you wish to change its location just play with the code in step#7.

      To add the pager just above comments section then do this:
      1. Search for this code

      <div class='comments' id='comments'>

      2. Paste the code in step#7 just above this line


      done :)

      Delete
  5. Hi, i have problem installing the widget. I have a custom template and thus maybe the class and tags are different. I need your help to resolve this. Thank you!
    My blog : http://singaporestockmarketnews.blogspot.sg/

    ReplyDelete
    Replies
    1. It must be working in your template because you have tag h3. However as proposed by "Code Nirwana" Try this:

      replace: " .post h3.post-title " with " "post-title entry-title" and let me know if this works now. :)

      Delete
    2. Hi, thank you for your reply. I have tried both but it is still not working.
      Hear from you soon, thank you!

      Delete
    3. @Stock Fanatic
      try to change " .post h3.post-title " with " " .post h3 ".
      If still not work than please give the url of blog in which you are trying this :)

      Delete
    4. .post h3 is the the which you have to place to get the title below next and previous. You might not placing the code correctly, I suggest you to start from the beginning and replace the .post css.

      Delete
  6. Aslam o alikum bro this is my first comment on your blog. i need your help this widget is not working on my blog and also i want to ask my cooment box is not showing in my blogger menu as well as in comment setting are not showing propar.bro this is my blog url www.yupsoftware.com i hope you will reply soon

    ReplyDelete
    Replies
    1. W.salam Brother,

      With due respect since you are using our copyrighted theme without our permission we can therefore not entertain any of your questions. We love helping people who value our resources and respect our efforts. Using our blog theme is in complete violation of our services. I therefore kindly request you to remove the template and use the downloadable templates provided by us

      Delete
    2. We trust with Mohammad Mustafa Ahmedzai,
      We forget the names of website but we have marked at many website's are using your template.

      Delete
    3. Aslam o alikum thanks for replying bro how can i contact with you because i sent message on your contact us and also on services page and i have not received any type response from your side.
      thanks again bro.

      Delete
  7. That is the great widget and and useful too. thanks for your effort.

    www.pakistanblogger.com

    ReplyDelete
  8. Salam ! Muhammad Bhai ! mere pass jesa ke ap ne kaha titles show nahi ho rahe ! my blog : bloggerinblogging.blogspot.com please jaldi koi solution bataen. mene h2 kar ke bhi dekh lia :)

    ReplyDelete
    Replies
    1. Every think is ok but can't see Title ! (What's wrong...?)

      Nobody can solve this ?

      Preview : http://www.softfully.com/2013/01/active-disk-image.html

      Delete
    2. Hi Dear,

      simply replace .post h3.post-title with .post h2.article-title and it will work just perfectly. :)

      @OM Softnews
      That is possible dear, I am sure you missed seeing the new class. But I love when people help each other. :)

      Delete
  9. oh .good, well come to blog, thank

    ReplyDelete
  10. first of all Happy new year brother ,thanks for writing such useful blog tricks i think you are number 1 , can you please write one hack for converting blogger posts in to grid view and list view with the grid and list button to change the view , i have searched the whole internet i think so and tried applying many tips provided by other but none of them prove to be useful can you please help.

    ReplyDelete
    Replies
    1. Hi dear,
      That is indeed one of the tutorials that I had already announced I will write but since grid/list view involves intense care and use of codes, it will be a little of headache for a non-techy to implement the guide correctly.
      I will release templates on that very soon inshAllah :)

      Delete
  11. do you will share new template for happy new year 2014?
    sorry for my bad english

    ReplyDelete
    Replies
    1. I would have loved to do so but didn't get time this year but I have planned around 100 templates for you guys that will be released in 2014. :)

      Delete
  12. Thanks Muhammad bro,
    I requested this widget on your Faceook page 2 days ago and now i am happy to read the tutorial live here.. :)

    ReplyDelete
  13. Salam,
    My title class is different as per usual blogger template (.post h3.post-title), here is my blog, http://www.pendapatanda.com/, need your help to find my title class. TQVM

    ReplyDelete
    Replies
    1. Hello Mohd Shubhi Abdul!
      Now this is the problem everyone facing, including me :) !
      but I have the solution.....
      You need to replace: " .post h3.post-title " with " "post-title entry-title" and everything will be fine and working well!
      Hope I solved your problem :) If have any other question contact me here

      Delete
    2. Dear In your case you should replace .post h3.post-title with .post h2.post-title

      Will work just perfect :)

      @code nirwana
      Buddy this solution is correct but it would not work for blogs where the title tag has no post-title entry-title classes. So adding it separately for each tag is important. Kindly check my comment#3.3 :)

      Delete
    3. please help...It's not working for my blog...waiting for solution. TQ

      Delete
  14. @Mohammad Mustafa friend after helping everyone now its my time to ask for a help in using this widget! :)
    So my problem is, different size of ' li ' (not equal in height). i tried some tricks but not working perfectly for all the pages. so please correct it.
    Screen Shot: here
    Source / Blog : here

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. As usual, another wonderful widget by you... Thanks for this and the simple instructions... Got it successfully installed on my site with some customization to colors and fonts sizes... Works and looks great... Btw, is it possible that we can get the links to open in a new tab instead of loading on the same page? Just want to know if there is an option and if so, how to implement it... Three Cheers Bro :D

    ReplyDelete
    Replies
    1. Yes you can do this follow instructions:
      //for newer posts
      search for-> a class='newer-link'
      and after ' class='newer-link' ' paste->> target="_blank"

      //for older posts
      search for-> a class='older-link'
      and after ' class='older-link' ' paste->> target="_blank"

      Hope it will work :)

      Delete
    2. Thanks a lot... That seems to have worked perfect :)

      Delete
  17. it better to use .post-title than .post h3.post-title , because some custom template use custom heading, custom heading is like wordpress, on homepage the tag is H2 but on the post page the title post is H1

    ReplyDelete
  18. I used this widget on my blog. but it does not show anything please help me. my blog url - http://www.timesofblog.com/

    ReplyDelete
  19. plz give me solution for my site it not showing title

    http://freshtechyard.blogspot.in/

    ReplyDelete
    Replies
    1. replace: " .post h3.post-title " with " ".post h2"

      Delete
  20. This comment has been removed by the author.

    ReplyDelete
  21. bloggingstae@blogspot.com is my blog url. I tried to apply this widget but fail to success.. plzzz help me

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. HEy I had inserted your http://www.mybloggertricks.com/2009/12/replace-newer-older-and-home-links-with.html widget too and now I am having a problem in "Removing existing Next/Previous buttons" I am not able to find I tried usnig cntrl + F still no use .. Also the widget isnt visible :( pleasehelp

    ReplyDelete
  25. Hello,

    I have been struggling to get this code working on a test template that i am planning to apply on my blog.

    I have read all the comments and tried all possible keywords for replacing the post h3.post-title but it does not show up.

    cleanest1,blogspot.com - this is the url of the blog and if any of the experts here look into the issue, it would be highly appreciated.

    Thank you.

    ReplyDelete
    Replies
    1. Hello Kashish!
      You are struggling because of wrong post title class name!
      Every custom template have different class/id name for there post title not keywords which you said...
      for your DEMO blog you have to replace: " .post h3.post-title " with ".hentry .entry-title".

      Note:This change might not working in your main blog because of different class name if using different template!

      Hope these changes works for you... if not let me know!

      Delete
    2. Thanks for the reply Nirvana.

      As i said i have tried most of the replacements and the ".hentry .entry-title" was the last one i tried.

      So unfortunately it is not working. I still have the same name for the post title and you can give it a check.

      After going through the comments above, I have also tried post h2, h2, post h3, h3 and what not but it is still not working.

      I did try all these to minimize your effort but it seems you will have to suggest me a better solution :).

      Thanks once again for your time.

      Delete
  26. This comment has been removed by the author.

    ReplyDelete
  27. where to add first code... below or above the skin...

    ReplyDelete
  28. Hello Mohammad,

    I implemented your floating sticky bars in my blog. I really like it!

    Now, I am also trying to do this "Next & Previous Post Titles". I think I followed your instruction, but did not work for some reasons.

    Can you please help me out?

    My blog address is www.my-levis501.blogspot.com

    Thank you for your help in advance.

    ReplyDelete
  29. 50% Working But Not Showing Post Title
    on
    http://www.theguitar.in/2013/12/gulabi-aankhen-atif-aslam-chords-strumming-progression.html

    ReplyDelete
    Replies
    1. replace: " .post h3.post-title " with " "#content h3"

      Delete
    2. Thanks It 100 % Working Now.. !! (^_^) !!

      Delete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Hi buddy,,

    Can u help me please... the above code is not working on by blog www.mbapages.in

    i have tried with 'h2' and 'h3' and 'h1' instead ".post h2.post-title", but its not working...

    also i can't figure out with step 3 in "Removing existing Next/Previous buttons". help please.....


    Regards,
    Amit Nagar
    www.mbapages.in

    ReplyDelete
  32. Hello Mohammad!

    I need your help. This widget does not show me the arrows left and right, as you can see in my page!


    What do you think about this problem?

    Thank you!

    ReplyDelete
  33. Dear
    Its not working on my blog. Please check the error.

    ReplyDelete
  34. Hi Mohammed,

    Is there any workaround to show the thumbnails ONLY of the next & previous posts with arrows on top of it ?

    Please help.
    Thanks,

    ReplyDelete
  35. Hi Mohammed,
    I'm using your "MONOP template" and I have done as u said in this....tutorial as well as some in comment over here but.....not getting fixed the problem that title of articles not showing up...there in my template 2 jquery libs they are <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> and this one is already in MONOP template <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/> which one do I need to remove. please help me out.

    http://nirazz.blogspot.com/2011/12/matrix.html (Plz check this link) Hoping to get help from you.

    Regards,
    Nirazo Malla
    Nepal

    ReplyDelete
    Replies
    1. replace: .post h3.post-title with .post h2.

      Delete
    2. Thanks a lot @code Nirvana......You've solved mine problem. I have one more problem that I'll mention in another topic.

      Regards,
      Nirazo Shrestha
      Nepal

      Delete
  36. Hey Friend!

    Thanks for the great info! my site is sixsigma.vorsity.net, platform is blogger.

    I am stuck at the .post h3.post-title (I guess). Please suggest what to do next.

    Regards,
    Jeff

    ReplyDelete
  37. I'm also stuck with post titles not showing.

    What should I use in place of .post h3.post-title in my case?

    www.TinyYellowBox.com

    Thanks,
    Nathan

    ReplyDelete
    Replies
    1. I checked your site again and congratulations you don't need to worry the widget is installed correctly....
      just change the post-title which i told you in my previous comment!

      Delete
  38. Thank u for this great widget but it's not showing in the blog, I added the codes but the widget is not there and I'm sure I added them right
    http://madloligfx.blogspot.com/

    ReplyDelete
  39. I have been using a lil bit different version of this jquery script that wasn't customized like this. It looks really cool. Thanks for bringing this in. H3 & H2 tags problem seemed to be common and almost everyone faced it, thanks to Mohammad & Code Nirvana for helping out everyone. I would like to add that, users also need to add up following style sheet in order to make the arrow icons appear on the either sides.

    ( href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' )

    Mohammad could you please update it within your tutorial?

    Thanks!! :)

    ReplyDelete
  40. Works like Charms! (Eutectics.blogspot.in) Great work buddy. i am big follower of this website

    ReplyDelete
  41. Asalamu Alaykom Brother ,
    This is my first comment in this great and wonderful Blog .
    But i have a probleme ,.
    the probleme is i added all the codes above perfectly and i followed all instruction 100% but no results are shown , so could you please help me .

    ReplyDelete
  42. Hello sir , this is an awesome widget , when i installed it i perfectly appeared
    BUT below it ' newer post ' and ' older post ' is also showed .
    Please tell me how to remove this 'newer post' and 'older post'.
    My Blog :-
    http://vermakrishan06.blogspot.in/2014/04/prince-of-persia-3-two-thrones.html

    ReplyDelete
  43. If you can not see the arrows (fa-chevron-right and left), add after head the code from below site:

    http://fortawesome.github.io/Font-Awesome/get-started/

    ReplyDelete
  44. HI Mohammed,

    I'm having an extremely hard time trying to do this on blogger. Its been like a year now, and i still haven't been able to do it! It doesnt show up at ALL. IDK why! Not only this but related posts dont either! please tell me what I might be doing wrong.

    ReplyDelete
  45. Bro i have completely done it :D but did not get the last step :/ will you explain me plz :)

    ReplyDelete
  46. Hi,
    Great post, unfortunately I cannot make this work. I'm using custom template and having a hard time in finding the correct class for: .post h3.post-title. Please do help me. My blog is www.ipingip.net

    ReplyDelete
    Replies
    1. search .post and there might be only one code below body section.

      copy that and past it! DONE

      Delete
  47. Thanks +My Blogger Tricks for This Awsome Plugin I Set Your Plugin on this http://www.hamaralink.com/2014/05/pakistan-biggest-game-show-jeeto.html

    ReplyDelete
  48. This comment has been removed by the author.

    ReplyDelete
  49. thx man
    ho to fix problem buttons Next not working

    ReplyDelete
  50. All that you need to do is to enclose this code inside conditional codes as shown below:



    THE ABOVE BIG CHUNK CODE IN

    I don't understand? How to enclose ?

    ReplyDelete
  51. It doesn't work at all. Why?

    ReplyDelete
  52. Salam 3alikom Mohammed,

    Thanks for your Tuts in blogging , and my wish is to become the most successful designer in the world :D . but till that moment to come true , you are the best :)

    Kindly check my blog , cause this code didn't work for me .
    http://ma3lomat3amh.blogspot.com

    Thanks in advance .

    Greetings from Egypt.

    ReplyDelete
    Replies
    1. Oh , Thanks God . i have had 3 tags of , and i was putting my code below the wrong one.

      i tried every one , and its done :)

      thanks . you'r the best ever . and I'm proud of you as i expect you as a very good Muslim guy .

      Delete
  53. Exceptional Man..
    I shall definitely try this out

    ReplyDelete
  54. Hey :) Thank you very much for the code, I really like the widget! Unfortunately I have the same problem like most of the people here: The titles don't show and even though I tried everything possible, nothing seems to work.

    It would be very nice if you could tell me what I have to insert instead of ".post h3.post-title" ? That's one of my post pages: http://sparkandbark.blogspot.de/2014/07/how-to-combine-pearl-necklace-casual.html

    Thanks in advance

    ReplyDelete
  55. Thank you so much! It works on my blog just fine. You're a genius!

    ReplyDelete
  56. Hello!
    I do the flow, but some think wrong in step 3.
    Could you explain this step please?
    In case i fail at step 3, this next and back still appear?
    thank you so much!
    sorry about my English not good

    ReplyDelete
  57. Worked wonderfully for me! Thanks so much :)

    Shelly @ www.shellyinreallife.com

    ReplyDelete
  58. Wonderful, I must appreciate it :)

    ReplyDelete
  59. Hey :) Thank you very much for the code, I really like the widget! Unfortunately I have the same problem like most of the people here: The titles don't show and even though I tried everything possible, nothing seems to work.
    please help me. see my blog in be-tandapetik.blogspot.com to solve my problem. My be my template is different with cammon.

    ReplyDelete
  60. Assalamualaikum Muhammad.

    Thank you very much for this great widget. Very useful indeed for blogger blog. I think using table is better compare to unordered list especially to set height equally. At least it works wonderfully on my own responsive template @ubirebus.com.

    Thanks again

    ReplyDelete
  61. Hi, i have problem installing the widget. I have a custom template and thus maybe the class and tags are different. I need your help to resolve this. Thank you!

    ReplyDelete
  62. Hi, I tried this but when I looked at it on Preview Mode, all the codes appear on top. I have the colorful tabs and it works great.

    Can you help?

    Thanks!

    ReplyDelete
  63. Thanks!
    I love you mybloggertricks

    ReplyDelete
  64. Hello, I added the code in my template but the navigation does not appear, you could help me? I tried to replace the tag h3.post .post-title as you indicate in other reviews but did not work.

    my blog: http://www.tutoriaisphotoshop.net

    Thank you and congratulations for the great job.

    ReplyDelete
  65. Hi guys. I think i'm facing the same issue as you :-( . My blog displays the prev and next buttons, but it does not show the page titles. Any advice? This is my testing blog.

    http://alrictechx-test.blogspot.com/2015/01/crossy-road.html


    P.D: Mohammad Thanks for your amazing tutorials.
    I would like to add a copyright message made by you in my custom template beside that I have.

    Greetings!

    ReplyDelete
  66. Hello, thanks for sharing but how i can disable “previous link” in FIRST post and “next link” in LAST post ? I can't do this. Please help :(

    ReplyDelete
  67. Most Templates contain .post h1.post-title in place of .post h2.post-title

    ReplyDelete
  68. Its possible newer and older label related link only , meaning if click next only show next post that related label post only

    ReplyDelete
  69. I've been using this widget. why now this widget does not work properly? Title of the post does not appear

    ReplyDelete
    Replies
    1. You must have changed your headline tags by following our SEO missing headline tags tutorials.

      Change this .post h3.post-title

      with this .post h1.post-title

      Delete
  70. I tried to change post title but it still display only Previous and Next. Please help: http://3424245334.blogspot.com/2015/07/blog-post_30.html

    ReplyDelete
    Replies
    1. Maybe you must read http://ask.mybloggertricks.com/t/show-next-previous-post-titles-in-blogger-with-jquery-navigation-not-working-proply/4729/2

      Delete
  71. it works, thanks! i delete all this line: .post h3.post-title

    ReplyDelete
  72. HI! Thanks for share this fabulous pager.
    I have a cuestion, Can I use this pager with tag filter? I mean, If I'm searching the tag "cats", the next post that will show up will be "cats" as well and not the chronological post tag that will be "dogs" or something. And if not, Can I use another method to filter the tags using the pager?
    Thanks for the help! :)

    ReplyDelete
  73. thank you very much mohammad. your blog rocks

    ReplyDelete
  74. Hi! I got the buttons to show and work but I cant get the title of posts to show!
    My blog: http://wemakeplans.blogspot.com

    ReplyDelete
  75. Hi,
    I read your posts where you guided to change h1, h2, h3 tags for better SEO. I've done it all, and I'm so very thankful to you. But, my blog has poor navigation, as I post in 'Blogger Pages' just so I can arrange each post according to the category it belongs to. I added arrow images and linked them to their respective previous and next posts. But, SEO doesn't seem to recognize that. Check my blog- www.dotgifcomix.com, as you will see, I have a lot of categories. If I would have posted all the content in 'Blogger Posts' then everything would have gotten messy. Now, what I desperately need your help with is to guide me how to make my blog easy to navigate and hence improve SEO. Please, please, help me.

    ReplyDelete
  76. Can you add images to it? Third party images like youtube thumbnails?

    ReplyDelete
  77. This is awesome. I previously used another technique that was JavaScript-heavy and uncustomizable; yours is lighter, loads much faster, and can be modeled any way I like. Thanks for this.

    ReplyDelete
  78. First of all Thank You so much. I used this code successfully in my website. But Sir, I want next & previous button only for each particular lable in blogger. Is it possible ?

    I dont need Title. Just need Simple Next & Previous Button for Each particular lable. Please Help.

    ReplyDelete
  79. Hi, it took a while but I finally put this great widget to my blog. Just one problem, post titles not showing up. Could you help me fix it?

    ReplyDelete