Skip to main content

Stylish Next/Previous Page Navigation System for Blogs

stylish next previous post navigationOne of the popular blogging tricks blog MBT has recently replaced their Older/Newer post navigation in a more neat and elegant way which is more efficient and reader attractive. And they’ve shown their kindness again by sharing the trick behind adding it with their readers (of course I'm a loyal reader).
We’ll be using simple jQuery scripts to add this beautiful and minimalistic navigation system into blogger. One thing i can assure is that it won’t slow slow down your blog for any reason.




HOW TO ADD PAGER NAVIGATION TO BLOGGER

► Navigate to Blogger Dashboard > Template
Snap_2013.11.16_10h43m57s_001_► Click on EDIT HTML
Snap_2013.11.26_11h38m40s_001_► Now search for ]]></b:skin> and add the below 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 { float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { 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;}
CUSTOMIZATIONS
  • to change the background colour edit : background:#333333
  • to change the font colour edit : color: #ffffff
►  Now search for <head> and just below it paste the below 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'/>
Remove the bolded code if you’ve already added jQuery library in your blog.

► Now search for <data:post.body/> and just below it paste the below 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;' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><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;' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><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>
CUSTOMIZATIONS


  • Replace the highlighted codes with your text.



    • ► Save the template and that’s it. Now take a look at your blog.

    Thanks To MyBloggerTricks.com for sharing this awesome widget with us and everyone. Smile

    Removing existing Older/Newer Post buttons

    Your blog template will have a default Next/Previous post navigation buttons below comments box. Since we do not need two Older/Newer Post button, we;ll just remove the old one. Follow the below steps.
    ► Search for <b:includable id='nextprev'> and you’ll see codes similar to

    <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'/>

    ► Now you’ve to Enclose the above code in between conditional codes like below,

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

    Now your old page navigation will disappear form post pages and will appear on you homepage. And if you wish to remove your older page navigation then simply delete the whole code above. Good Luck!Winking smile
    Labels:

    Comments

    Post a Comment

    Popular posts from this blog

    Automatic Read More With Thumbnails for Blogger

    Blogger gives us an option to add jump break to posts. It enables us to display a a short summary of the post on the homepage of our blog with a link to the full post. Most of us add jump break to our posts, because displaying a short summary instead of the full post on the main page has many advantages. The main reason is that it increases page views and the visitors can easily get a selection of your posts.
    Post a Comment
    Read more

    Responsive Recent Posts Slider Widget for Blogger

    Here is one amazing responsive featured post slider for your blogs. This slider is Here i am with a fully automated featured posts slider for blogger blogs. This widget features a complete responsive design and is coded to fetch the most recent posts automatically from your blog. Yes i said fully automated, you only need to add your blog url in the code.
    3 comments
    Read more

    Design a Fancy Accordion Widget For Blogger

    Accordion widgets are really helpful in organizing links in your blog. You can use it to list out popular posts in categories in the form of an expandable and collapsible menu. It is an effective and neat way of listing longs list of links.
    3 comments
    Read more