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
Part A
<b:if cond='data:blog.pageType == "item"'>
<nav class="nav-slide"><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="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 + "_blog-pager-newer-link"'><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.
Part A
<b:if cond='data:blog.pageType == "item"'>
<nav class="nav-circlepop"><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"></span></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"></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.
Part A
<b:if cond='data:blog.pageType == "item"'>
<nav class="nav-roundslide"><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="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 + "_blog-pager-newer-link"'><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
Part A
<b:if cond='data:blog.pageType == "item"'>
<nav class='nav-reveal'><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' 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 + "_blog-pager-newer-link"'><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
Part A
<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 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
Part A
<b:if cond='data:blog.pageType == "item"'>
<nav class="nav-fillslide"><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-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 + "_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-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>
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.
0 comments:
Post a Comment