How to Add Responsive Next Previous Post Widget to Blogger Blog

next previous post widget for blogger

Next previous post widgets comes in extremely handy when it comes to increasing overall pageviews and page hits per visitor. We previously shared a next-previous post widget that had social sharing buttons embedded with in it.

You can read it here:

 Today we've another exiting Next-Previous post widget for Blogger blogs that is unique in its own sense. A simple, yet elegant Next-Previous post widget is inspired by the new Fiverr blog that had incorporated a widget of such style.

DEMO


next previous post widget demo
Follow the steps below to add this widget below your posts or any other place in your blog.

How to Install?


Navigate to your Blogger blog Dashboard >> Template >> Edit HTML and search for the following code.

  •  <div class='post-footer-line post-footer-line-1'>

You can use CTRL+F to make the search process faster. Now once you're around the footer section of the post, you than need to add the Next-Previous post widget code as shown below.


[lock]
[<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post_neighbors_container_wrapper'>
<div class='post_neighbors_container'>
<a class='neighbors_link previous_post' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'>
<h3>Previous Story</h3>
</a>
<a class='neighbors_link next_post' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'>
<h3>Next Story</h3>
</a>
<div class='clear'/>
</div>
</div>
<style>
.post_neighbors_container_wrapper {
    border-bottom: 1px solid #DCDCDC;
    border-top: 1px solid #DCDCDC;
    display: table;
    margin-left:165px;
}
.post_neighbors_container {
    display: table-row;
    padding: 10px 0;
}
.post_neighbors_container .next_post, .post_neighbors_container .previous_post {
    vertical-align: middle;
    width: 49.9%;
}
.post_neighbors_container .neighbors_link {
    display: table-cell;
    padding: 20px 50px;
    text-align: center;
}
.post_neighbors_container .neighbors_link:hover {
    background-color: #F6F6F6;
}
.post_neighbors_container a.neighbors_link h5 {
    color: #333333 !important;
text-transform:uppercase;
text-decoration:none;
color: #111111;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    margin: 0 0 14px;
       font-family: &quot;PT Sans Narrow&quot;,arial,sans-serif;
    font-weight: bold;
    text-transform: uppercase !important;
}
.post_neighbors_container .next_post {
    background: url(&quot;http://2.bp.blogspot.com/-HMYWh6AhZII/Uc1o9XV0ZLI/AAAAAAAAKvA/2I6VR6-PVPM/s16/small-right.png&quot;) no-repeat scroll 97% center transparent;
    border-left: 1px dashed #DCDCDC;
}
.post_neighbors_container .previous_post {
    background: url(&quot;http://2.bp.blogspot.com/-TjpE6gSTJk4/Uc1pGGJJueI/AAAAAAAAKvI/EXD1r1O3Kec/s16/small-left.png&quot;) no-repeat scroll 3% center transparent;
}
.post_neighbors_container h3 {
    color: #777777;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 0;
    margin-top: 0;
  font-family: &quot;Bitter&quot;,arial,sans-serif;
    font-weight: normal;
}
.post_neighbors_container .neighbors_link:hover h3 {
    color: #333333;
}
.post_neighbors_container h5 {
    margin-bottom: 5px;
}
.post_neighbors_container .neighbors_link.grey h5, .post_neighbors_container .neighbors_link.grey h3 {
    color: #CCCCCC;
}
.post_neighbors_container .neighbors_link.grey.previous_post, .post_neighbors_container .neighbors_link.grey.next_post {
    background: none repeat scroll 0 0 transparent;
}
.post_neighbors_container .neighbors_link.grey:hover {
    background-color: transparent;
}
.post_neighbors_container a {
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
</style>
</b:if>]
[/lock]

Now simply hit save template and you're all done.

Features:


  1. Reader can read more of the stuff once he/she is done reading the current post.
  2. Can navigate between newer or older posts.
  3. Widget would only be displayed below every post (only post pages).

What Next?


Do let us know what you think about the widget. Leave out your problems that might be facing in widget installation.

Take care fellows.

You may now like to see some of our latest widgets:

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: How to Add Responsive Next Previous Post Widget to Blogger Blog
How to Add Responsive Next Previous Post Widget to Blogger Blog
http://1.bp.blogspot.com/-AmJIstMtY-g/Uc1YFvvUMTI/AAAAAAAAKuY/PJuxRSix_FE/s1600/next+previous+post+widget.png
http://1.bp.blogspot.com/-AmJIstMtY-g/Uc1YFvvUMTI/AAAAAAAAKuY/PJuxRSix_FE/s72-c/next+previous+post+widget.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2013/06/next-previous-post-widget-for-blogger-blog.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2013/06/next-previous-post-widget-for-blogger-blog.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade