Add Stylish Navigation Next/Previous Post on hover

Add Stylish Navigation Post on hover to blog/blogger.

Add Stylish Navigation Post on hover to blog/blogger and make your subscribers to stay and read your other articles by recommending them by your previous and next articles on your blog or website, with stylish navigation as shown for Live demo see below.

This Adds your blog/website to drive traffic by showing them your previous and next articles, this brings a style to your blog/website with hover and transition effects you can see live demo here

Live Demo for Add Stylish Navigation Post on hover to blog/blogger

Live Demo

To Add Stylish Navigation Post on hover to blog/blogger follow below steps:

We have three parts to install this to your blog/website

Part 1: Make sure that your html template has <div class='post-footer-line post-footer-line-3'> code

If you don't find the above code do the following steps:

Step 1: Find <b:includable id='post' var='post'>

and paste the following code below or between closing tag of </b:includable>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
</div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>
</div>

Part 2 : If your blog contains Post-footer-line then skip the part 1 now we are going to add CSS code to your blog do the following

Step 1: Find the code ]]></b:skin> paste the following code just above it

Step 2: Add the following CSS code

/*---------- Growpopup index next/prev part2 start --------------*/
.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-growpop a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-growpop a.prev{left:0}.nav-growpop a.next{right:0}.nav-growpop a svg{display:block;margin:0 auto;padding:0}.nav-growpop .icon-wrap{position:relative;z-index:100;display:block;padding:13px 5px;border:0 solid rgb(240, 113, 113);background:rgb(240, 113, 113);-webkit-transition:border-width .3s .15s;transition:border-width .3s .15s}.nav-growpop svg.icon{fill:#fff}.nav-growpop div{position:absolute;top:50%;padding:20px;width:440px;height:144px;background:#f8f8f8;opacity:0;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s}.nav-growpop a.prev div{left:0;padding:20px 25px 0px 45px;-webkit-transform:translateY(-50%) translateX(-100%) scale(0.75);transform:translateY(-50%) translateX(-100%) scale(0.75)}.nav-growpop a.next div{right:0;padding:20px 45px 0px 25px;-webkit-transform:translateY(-50%) translateX(100%) scale(0.75);transform:translateY(-50%) translateX(100%) scale(0.75)}.nav-growpop span{display:block;padding-bottom:5px;border-bottom:1px solid #ddd;color:rgb(240, 113, 113);text-transform:uppercase;letter-spacing:1px;font-weight:400;font-size:.7em;line-height:1.2}.nav-growpop>h3{margin:0;padding:8px 0 10px;color:#4d4d4d;font-weight:300;font-size:1.14em;line-height:1.2;font-style: italic;}.nav-growpop a:hover .icon-wrap{border-top-width:40px;border-bottom-width:40px;-webkit-transition-delay:0s;transition-delay:0s}.nav-growpop a:hover div{opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateY(-50%) translateX(0) scale(1);transform:translateY(-50%) translateX(0) scale(1)}@media screen and (max-width:520px){.nav-growpop a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-growpop a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-growpop a{-webkit-transform:translateY(-50%) scale(0.6);transform:translateY(-50%) scale(0.6)}}
/*---------- Growpopup index next/prev part2 end --------------*/

Part 3: Now add the following HTML Code to your blog

Step 1: Find the code post-footer-line-3 and do the second step

Step 2: Add the following code just below the post-footer-line-3

<b:if cond='data:blog.pageType == "item"'>
<nav class="nav-growpop"><b:if cond='data:olderPageUrl'><a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-2"/></svg></span><div><h3 class='older-link' expr:href='data:olderPageUrl'/></div></a></b:if><b:if cond='data:newerPageUrl'><a class='next' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-2"/></svg></span><div><h3 class='newer-link' expr:href='data:newerPageUrl'/></div></a></b:if></nav><div class='svg-wrap'><svg height='64' viewBox='0 0 64 64' width='64'><path d='M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z' id='arrow-left-2'/></svg><svg height='64' viewBox='0 0 64 64' width='64'><path d='M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z' id='arrow-right-2'/></svg></div>
<script type='text/javascript'>//<![CDATA[
(function(a){var c=a("h3.newer-link"),d=a("h3.older-link");a.get(c.attr("href"),function(b){c.html("<span>Next Stories</span><h3>"+a(b).find(".post h1.post-title").text()+"</h3>")},"html");a.get(d.attr("href"),function(b){d.html("<span>Previous Stories</span><h3>"+a(b).find(".post h1.post-title").text()+"</h3>")},"html")})(jQuery);
//]]></script>
</b:if>

Step 3: Save your template and check your blog/website with a nice Navigation menu for next and previous posts

Note: Please follow the parts 1,2 and 3 to make it work perfectly with your blog if you have any error or comments please post it in comment box.

Leave us a reply on social media Twitter and Facebook