Tuesday, 13 January 2015

Add Next & Previous Post Navigation Widget in blogger blog

Remove older and newer link in blogger with fixed navigation style widget. Six different style have been provided.

Add Next & previous Post Navigation Widget in blogger blog

Blogger do not provide any effective navigation options for your readers to navigate through your articles. In this case I am talking about situation when your readers done reading an article you posted. Where they click their mouse next? Why not provide them with options to navigate to next or previous post you posted on the same blog? Why loose those important page views and your reader’s interest?

To solve this problem we have made this small and excellent widget for your blog. Blogger do provide with such options of navigating to previous or next post but it only provide it as link, because of this your readers won’t know what is the topic or title of article until the page loads. And if the post they had click on is not the topic they are searching for, then they left with regret and become irrelevant for them to stay on your blog and most of them simply quit it.

And this is what the widget would avoid to do. We have included some JavaScript which extract your page title of next or previous article and show them in much beautiful manner. This stayed fixed on your template and will only displayed when required. By default they are made to load only on post page so as to decrease your template load.

This widget uses SVG to run its icons, this is very versatile for desktop and mobiles as they render rather than load. This code have made mobile responsible so won’t create any problem for your blog.

Note: This widget is originally made by Codrops for general website but not for blogger. I have simple added small JavaScript and edited to make it work for blogger blogs and it works like charms (Only on Modern browser not on late IE because you know IE kind a s***). Hope you like it.

How to add this widget in your template?


  • The procedure for adding this widget is same for all. Before proceeding make sure to back your template. Feel free to edit the CSS to make it complement to your blog design.
  • We have provide six different types of Styles (Style 1 to 6), so you can choose any one of this following style which suite for your blog. And each of these six style code is split into parts say Part A and Part B.
  • Part A includes HTML and SVG codes. This code should be added inside footer line.
  • Search for this code “post-footer-line-3”. (If you don’t find this piece of code then read troubleshooter below)
  • Now add this first part inside this div element.
  • For Part B, since it’s only CSS style sheet therefore add this above ]]></b:skin>
  • By Default it remain fixed in center of page. To change it position with respect to top or below change the of CSS code. Search for this property of "top:50%". Increase this percentage value to move closer to bottom or vice verse.

Recommendation Index i.e. RI is used to grade these style. Here higher number means that particular style is highly recommend for you.

1: Sliding RI - 3


slide arrow navigation style

Part A
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-slide"><b:if cond='data:olderPageUrl'><a class="prev" expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"/></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 + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"/></svg></span><div><h3 class='newer-link' expr:href='data:newerPageUrl'/></div></a></b:if></nav><div class="svg-wrap"><svg width="64" height="64" viewBox="0 0 64 64"><path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" /></svg><svg width="64" height="64" viewBox="0 0 64 64"><path id="arrow-right-1" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" /></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(a(b).find(".post h2.post-title").text()+"<span>Next Article</span>")},"html");a.get(d.attr("href"),function(b){d.html(a(b).find(".post h2.post-title").text()+"<span>Previous Article</span>")},"html")})(jQuery);
//]]></script>
</b:if>
Part B
.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-slide a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-slide a.prev{left:0}.nav-slide a.next{right:0}.nav-slide a svg{display:block;margin:0 auto;padding:0}.nav-slide .icon-wrap{position:relative;z-index:100;display:block;padding:20px;background-color:#fff}.nav-slide svg.icon{fill:#34495e}.nav-slide div{position:absolute;top:50%;background-color:#34495e;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.nav-slide a.prev div{left:0;padding-left:86px;padding-right:10px;-webkit-transform:translateY(-50%) translateX(-100%);transform:translateY(-50%) translateX(-100%)}.nav-slide a.next div{right:0;padding-right:86px;padding-left:10px;text-align:right;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.nav-slide h3{position:relative;margin:0;padding:20px 0;color:#fff;white-space:nowrap;font-weight:300;font-size:1.3em !important;line-height:1.5}.nav-slide div h3 span{display:block;color:#95a5a6;font-style:italic;font-size:65%;font-family:Baskerville,"Baskerville Old Face","Hoefler Text",Garamond,"Times New Roman",serif}.nav-slide a:hover div{-webkit-transform:translateY(-50%) translateX(0);transform:translateY(-50%) translateX(0)}@media screen and (max-width:520px){.nav-slide a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-slide a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-slide a{-webkit-transform:scale(0.6);transform:scale(0.6)}}

2: Circlepop RI – 3.5


Here no title of previous or next article is shown therefore it achieve much lower RI.
circlepop arrow navigation style

Part A
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-circlepop"><b:if cond='data:olderPageUrl'><a class="prev" expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"></span></a></b:if><b:if cond='data:newerPageUrl'><a class="next" expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"></span></a></b:if></nav></b:if>
Part B
.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-circlepop a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-circlepop a.prev{left:0}.nav-circlepop a.next{right:0}.nav-circlepop a svg{display:block;margin:0 auto;padding:0}.nav-circlepop a{margin:0 30px;width:50px;height:50px}.nav-circlepop a::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:gray;content:'';opacity:0;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transform:scale(0.9);transform:scale(0.9)}.nav-circlepop .icon-wrap{position:relative;display:block;margin:10% 0 0 10%;width:80%;height:80%}.nav-circlepop a.next .icon-wrap{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.nav-circlepop .icon-wrap::after,.nav-circlepop .icon-wrap::before{position:absolute;left:25%;width:3px;height:50%;background:red;content:'';-webkit-transition:-webkit-transform .3s,background-color .3s;transition:transform .3s,background-color .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nav-circlepop .icon-wrap::before{-webkit-transform:translateX(-50%) rotate(30deg);transform:translateX(-50%) rotate(30deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.nav-circlepop .icon-wrap::after{top:50%;-webkit-transform:translateX(-50%) rotate(-30deg);transform:translateX(-50%) rotate(-30deg);-webkit-transform-origin:0 0;transform-origin:0 0}.nav-circlepop a:hover::before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.nav-circlepop a:hover .icon-wrap::after,.nav-circlepop a:hover .icon-wrap::before{background:#fff}.nav-circlepop a:hover .icon-wrap::before{-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg)}.nav-circlepop a:hover .icon-wrap::after{-webkit-transform:translateX(-50%) rotate(-45deg);transform:translateX(-50%) rotate(-45deg)}

3: Roundslide RI – 2.5


This is frankly not recommended but still I have provided you know if someone would fix this.
roundslide arrow navigation style

Part A
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-roundslide"><b:if cond='data:olderPageUrl'><a class="prev" expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"/></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 + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"/></svg></span><h3 class='newer-link' expr:href='data:newerPageUrl'/></a></b:if></nav><div class="svg-wrap"><svg width="64" height="64" viewBox="0 0 64 64"><path id="arrow-left-4" d="M15.946 48l0.003-10.33 47.411 0.003v-11.37h-47.414l0.003-10.304-15.309 16z" /></svg><svg width="64" height="64" viewBox="0 0 64 64"><path id="arrow-right-4" d="M48.058 48l-0.003-10.33-47.414 0.003v-11.37h47.418l-0.003-10.304 15.306 16z" /></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>"+a(b).find(".post h2.post-title").text()+"</span>")},"html");a.get(d.attr("href"),function(b){d.html("<span>"+a(b).find(".post h2.post-title").text()+"</span>")},"html")})(jQuery);
//]]></script>
</b:if>
Part B
.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-roundslide a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-roundslide a.prev{left:0}.nav-roundslide a.next{right:0}.nav-roundslide a svg{display:block;margin:0 auto;padding:0}.nav-roundslide a{margin:0 20px;padding:15px;width:34px;height:34px;border-radius:40px;background:#34495e;-webkit-transition:width .3s,background-color .3s;transition:width .3s,background-color .3s}.nav-roundslide .icon-wrap{position:absolute;width:32px}.nav-roundslide a.prev .icon-wrap{left:15px}.nav-roundslide a.next .icon-wrap{right:15px}.nav-roundslide svg.icon{fill:#566473}.nav-roundslide h3{position:absolute;top:0;margin:0;color:#566473;text-transform:uppercase;white-space:nowrap;letter-spacing:1px;font-weight:400;font-size:.85em !important;line-height:4.45;opacity:0;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.nav-roundslide a.prev h3{right:20px;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nav-roundslide a.next h3{left:20px;-webkit-transform:translateX(100%);transform:translateX(100%)}.nav-roundslide a:hover{width:600px;background:#f2f2f2}.nav-roundslide a:hover h3{opacity:1;-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translateX(0);transform:translateX(0)}

4: Reveal RI – 4.6


reveal arrow navigation style

Part A
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class='nav-reveal'><b:if cond='data:olderPageUrl'><a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class='icon-wrap'><svg class='icon' height='32' viewBox='0 0 64 64' width='32'><use xlink:href='#arrow-left-3'/></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 + &quot;_blog-pager-newer-link&quot;'><span class='icon-wrap'><svg class='icon' height='32' viewBox='0 0 64 64' width='32'><use xlink:href='#arrow-right-3'/></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='M44.797 17.28l0.003 29.44-25.6-14.72z' id='arrow-left-3'/></svg><svg height='64' viewBox='0 0 64 64' width='64'><path d='M19.203 17.28l-0.003 29.44 25.6-14.72z' id='arrow-right-3'/></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>"+a(b).find(".post h2.post-title").text())},"html");a.get(d.attr("href"),function(b){d.html("<span>Previous Stories</span>"+a(b).find(".post h2.post-title").text())},"html")})(jQuery);
//]]></script>
</b:if>
Part B
.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-reveal a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-reveal a.prev{left:0}.nav-reveal a.next{right:0}.nav-reveal a svg{display:block;margin:0 auto;padding:0}.nav-reveal a{overflow:hidden;width:40px;height:120px;background-color:rgba(207,207,207,.6);-webkit-transition:width .4s,background-color .4s;transition:width .4s,background-color .4s;-webkit-transition-timing-function:cubic-bezier(0.7,0,.3,1);transition-timing-function:cubic-bezier(0.7,0,.3,1)}.nav-reveal .icon-wrap{position:absolute;z-index:100;padding:44px 4px;width:40px}.nav-reveal a.prev .icon-wrap{left:0}.nav-reveal a.next .icon-wrap{right:0}.nav-reveal svg.icon{fill:#383838}.nav-reveal div{position:absolute;top:0;padding:0 50px;width:400px;height:100%}.nav-reveal a.prev div{left:0;padding-right:130px;text-align:right}.nav-reveal a.next div{right:0;padding-left:130px}.nav-reveal h3{position:relative;margin:0;padding:20px 0;color:#fff;font-weight:300;font-size:1.22em;line-height:1.2}.nav-reveal div h3 span{display: block;padding-bottom:6px;color: #fff;text-transform: uppercase;letter-spacing: 1px;font-weight: 700;font-size: 50%;border-bottom: 1px solid #fff;margin-bottom: 6px;}.nav-reveal a:hover{width:500px;background-color:#C05555}.nav-reveal svg.icon:hover{fill:#fff}@media screen and (max-width:520px){.nav-reveal a.prev{-webkit-transform-origin:0 50%;transform-origin:0 50%}.nav-reveal a.next{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.nav-reveal a{-webkit-transform:scale(0.6);transform:scale(0.6)}}

5: Growpop RI – 4.7


growpop arrow navigation style

Part A
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-growpop"><b:if cond='data:olderPageUrl'><a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><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 + &quot;_blog-pager-newer-link&quot;'><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 h2.post-title").text()+"</h3>")},"html");a.get(d.attr("href"),function(b){d.html("<span>Previous Stories</span><h3>"+a(b).find(".post h2.post-title").text()+"</h3>")},"html")})(jQuery);
//]]></script>
</b:if>
Part B
.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)}}

6: Fillslide RI – 4.1


fillslide arrow navigation style

Part A
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class="nav-fillslide"><b:if cond='data:olderPageUrl'><a class='prev' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"/></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 + &quot;_blog-pager-newer-link&quot;'><span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"/></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='M15.946 48l0.003-10.33 47.411 0.003v-11.37h-47.414l0.003-10.304-15.309 16z' id='arrow-left-4'/></svg><svg height='64' viewBox='0 0 64 64' width='64'><path d='M48.058 48l-0.003-10.33-47.414 0.003v-11.37h47.418l-0.003-10.304 15.306 16z' id='arrow-right-4'/></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("<h3>"+a(b).find(".post h2.post-title").text()+"</h3><span>Next Stories</span>")},"html");a.get(d.attr("href"),function(b){d.html("<h3>"+a(b).find(".post h2.post-title").text()+"</h3><span>Previous Stories</span>")},"html")})(jQuery);
//]]></script>
</b:if>
Part B
.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-fillslide a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-fillslide a.prev{left:0}.nav-fillslide a.next{right:0}.nav-fillslide a svg{display:block;margin:0 auto;padding:0}.nav-fillslide .icon-wrap{position:relative;z-index:100;display:block;padding:65px 10px;background:#efefef;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nav-fillslide .icon-wrap::before{content:'';position:absolute;width:100%;height:110%;background:#fff;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .3s .3s;transition:transform .3s .3s}.nav-fillslide a.prev .icon-wrap::before{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nav-fillslide a.next .icon-wrap::before{-webkit-transform:translateX(100%);transform:translateX(100%)}.nav-fillslide svg.icon{fill:#0f0f0f;position:relative;z-index:100}.nav-fillslide div{position:absolute;padding:20px;top:0;width:440px;height:154px;background:#fff;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.nav-fillslide a.prev div{left:0;padding:20px 21px 0 0;text-align:right;border-radius:0 6px 6px 0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nav-fillslide a.next div{right:0;padding:20px 40px 0 21px;border-radius:6px 0 0 6px;-webkit-transform:translateX(100%);transform:translateX(100%)}.nav-fillslide div span{display:inline-block;color:#CD6060;text-transform:uppercase;letter-spacing:1px;font-weight:400;font-size:.7em;line-height:1.2;border-top: 1px solid #D8CFDA;width: 100%;padding-top: 10px;}.nav-fillslide h3{margin:0;padding:8px 0 10px;color:#131212;font-weight:400;font-size:1.1em;line-height:1.2;}.nav-fillslide a:hover .icon-wrap::before{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-delay:0s;transition-delay:0s}.nav-fillslide a:hover div{-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translateX(0);transform:translateX(0)}@media screen and (max-width: 520px) {.nav-fillslide a {-webkit-transform: scale(0.6);transform: scale(0.6);}}

Troubleshooter


1: It may happens that Widget work perfectly but title is not shown. It is because of h2 tag we are using in our JavaScript. To solve this go to Blogger > Template > Edit Template.
Now search for post-title. You would probably find this code
<h1 class='post-title entry-title' itemprop='name'>

Check which heading tag it is using like in above case its “h1”. So we will edit our JavaScript and make .post h2.post-title to .post h1.post-title in both cases you find in our code.
2: If you don’t find post-footer-line-3 then add one to your template. Search for <b:includable id='post' var='post'>

Add this following code inside and end of this includable sections as shown in below image.
<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>

Add post footer line in blogger

Hope you like this and it help you to make your blog stand out from others. If you like this widget do subscribe using your email or like/follow on our social domain.
Thanks for reading.

35 Discussion

  1. It's great! Thank you.
    And can you tell me please how to make labels look like buttons?

    ReplyDelete
    Replies
    1. Hi Anastasia,
      can you tell me which labels you are taking into consideration ?
      below post or in sidebar. :?:

      Delete
    2. Yeah that is quite easy. open your HTML editor and search for <b:includable id='post' var='post'>. Inside that code you will find <div class='post-footer'>, just place the following code above it. <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='post-tags noprint'><span class='post-tags-header'>Labels</span> <b:if cond='data:post.labels'><b:loop itemprop='keywords' values='data:post.labels' var='label'><a expr:href='data:label.url'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/></b:loop></b:if></div></b:if>And this CSS code inside and above ]]></b:skin>. div.post-tags{float:left;font:400 12px/12px Oswald,sans-serif;margin:20px 0 0;width:100%}div.post-tags>a,div.post-tags>span{color:#fff;display:inline-block;float:left;margin:0 1px 1px;padding:5px 7px;text-transform:uppercase;background:#aaa;text-decoration:none}div.post-tags>span{background:#e91f1d!important}div.post-tags>a:hover{background:#040404;color:#fff} Hope this works for you. If you face any problem check my source code or just comments :) <3

      Delete
    3. sorry,I already have the first problem)
      I followed your instructions, but nothing changed. Maybe something wrong in my template? http://www.heartofsea.com/

      Delete
    4. Hey, i have seen your blog and it is working fine. :victory: >-I

      Delete
  2. Excellent code :) Is it possible to use it on the front page of the blog also? Not only on the blog post's page?

    ReplyDelete
    Replies
    1. I think it would be possible for it display on front page, but where you want your readers to navigate? next page or some random articles. :?:

      Delete
    2. Pls reply my comment if I was a girl u will anyway code is not working well it only appears at the left side and with no title.

      Delete
  3. Hey nice site I already have the 123 navigation but just don't know where to put the ''next'' and ''prev'' text in html. Any help would be much appreciated.

    ReplyDelete
    Replies
    1. Ha ha nope, it not like that, sorry for delayed response i am currently working on different project so please bare with me. :)
      As for the your problem, what with that "123 navigation"
      I actually don't understand your problem you are facing. Feel free to to ask anything, i try my best to solve it though the response will be delayed. :?:

      Delete
  4. Can you please see my implementation on my blog: http://www.microseoblogging.website , it appears that title is not showing there in the box. What should i do.

    ReplyDelete
    Replies
    1. Hi Shashank, check out the first troubleshooter. It will solve your problem or use this JavaScript. <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>
      regards :) <3

      Delete
    2. No reply to my comment or u only reply ppl from india?

      Delete
    3. Hi Mensah, please read my response to your previous comment. Sorry for delayed response. (Y)

      Delete
  5. for tamil blogger change .post h2.post-title to .post h3.post-title. it's working very nice..
    visit http://owshadham.blogspot.com/

    ReplyDelete
  6. Hi sir,
    Title is not displayed even after changing .post h2.post-title to .post h3.post-title its not working. please once check my blog
    www.itechshore.com

    ReplyDelete
  7. Worked like charm on my website hahaloud.com thank you very much.

    ReplyDelete
  8. Hi! I tried to change title from h2 to h1 but it still doesn't show titles. Please help: http://brave-stories.blogspot.com

    ReplyDelete
  9. i am getting only right side one not both. why?

    ReplyDelete
  10. Its not working on my blog https://1080hdpicture.blogspot.in

    ReplyDelete
  11. Thanks, for this post...
    Now My blog Pdf Hindi Looks Better.

    ReplyDelete
  12. Thanks so much! My blog is shacaraonline.com The hover effect is wonderful too!

    ReplyDelete
  13. it was helpful to my blogger template omegaglory.com

    ReplyDelete
  14. thanks for amazing trick ... but I have a problem.
    I am having 2 extra arrows just below every post. how to remove them please guide me,

    ReplyDelete
    Replies
    1. mt blog is : http://graspverum.blogspot.in/2017/01/9.html

      Delete
  15. hey bro please help me ... there are no titles shown : check it on my blog
    https://graspverum.blogspot.com

    ReplyDelete
  16. Please help me out! Title is not showing, buttons have came. I have tried the troubleshooter but still not working. Blog link - www.thecoducer.com

    ReplyDelete
  17. Many congratulations, it works flawlessly!!!!

    http://www.lovefortechnology.net/

    ReplyDelete
  18. Worked like a charm!!!
    Thank you a million!

    ReplyDelete
  19. Thanks for posting your valuable thoughts with us & our readers. Please keep continue writing on this blog.
    Bulk SMS Company

    ReplyDelete
  20. I try but is not working
    Is showing
    CORRECT ""

    I follow all ructions but is not saving

    Please view my site. Kstarlaf.blogspot.com

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.