However, this time the admin will try to create navigation on the blogger page by changing (next and previous) to a navigation page with the number
"Script Andi AM Blog Pager V.3.1"
USES OF BLOG PAGER BLOG PAGE NAVIGATION
- Make it easier for visitors to see all blog pages,
- Very good for SEO and beautifying the appearance of the blog,
- Make your blog look elegant and professional.
- Adding CSS to blog html
- Adding Scripts in blog html
- Go to BLOGGER DASHBOARD >> TEMPLATE >> EDIT HTML.
- Look for the ]]></b:skin> code and paste the CSS code below just above the ]]></b:skin> code
#blog-pager{position:relative;display:block;background:#fff;clear:both;overflow:visible;width:auto;padding:10px 0px 10px 0px; text-align:left;line-height:normal;overflow:visible;margin:auto;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{background:#2a2a2a;display:inline-block;font-size: 90%;color:#fff;border-radius:2px;padding:6px 10px;margin:0 3px 0 3px;}
.showpagePoint,.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:# 0F5341;color:#fff;}
.showpageNum ai{font-size:110%;font-weight:normal}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right ;padding:0;}
#blog-pager{float:left;width:100%;text-align:center;line-height:1.5em;margin:10px 0}
#blog-pager a:link,#blog-pager a:visited{color:#fff;font-size:11px!important;padding:6px 15px;margin:3px;background: #1A7C62}
#blog-pager a:hover{background:#0F5341;}
.feed-links{ clear:both;line-height:2.5em;display:none}
.home_menu{background:url(http://1.bp.blogspot.com/-xrtUfyPYscQ/T_rX4TeTPGI/AAAAAAAAABl4/TSoglJcs2Ps/s1600/Viva-Blogspot.png ) 0 -579px;width:10px;height:10px;margin:10px 5px;float:left}
/* Page Navigation Andi AM Blog Pager V.3.1 */
The next step is to add the SCRIPT code
- Search for the </body> code using ( Ctrl+F ) to find the code faster.
- If you have found it, place the script code below above the </body> code
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=7;
var numshowpage=3;
var upPageWord ='<i class="fa fa-caret-left"></i>';
var downPageWord ='<i class="fa fa-caret-right"></i>';
var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
function loophalaman(a){var e="";nomerkiri=parseInt(numshowpage/2),nomerkiri==numshowpage-nomerkiri&&(numshowpage=2*nomerkiri+1),mulai=nomerhal-nomerkiri,mulai<1&&(mulai=1),maksimal=parseInt(a/postperpage)+1,maksimal-1==a/postperpage&&(maksimal-=1),akhir=mulai+numshowpage-1,akhir>maksimal&&(akhir=maksimal),e+="<span class='showpageOf'>Page "+nomerhal+" of "+maksimal+"</span>";var s=parseInt(nomerhal)-1;nomerhal>1&&(e+=2==nomerhal?"page"==jenis?'<span class="showpage"><a href="'+home_page+'">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">'+upPageWord+"</a></span>":"page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),mulai>1&&(e+="page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'),mulai>2&&(e+="");for(var r=mulai;r<=akhir;r++)e+=nomerhal==r?'<span class="showpagePoint">'+r+"</span>":1==r?"page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>':"page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+r+');return false">'+r+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+r+');return false">'+r+"</a></span>";akhir<maksimal-1&&(e+=""),akhir<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+"</a></span>");var n=parseInt(nomerhal)+1;nomerhal<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");for(var t=document.getElementsByName("pageArea"),l=document.getElementById("blog-pager"),p=0;p<t.length;p++)t[p].innerHTML=e;t&&t.length>0&&(e=""),l&&(l.innerHTML=e)}function hitungtotaldata(a){var e=a.feed,s=parseInt(e.openSearch$totalResults.$t,10);loophalaman(s)}function halamanblogger(){var a=urlactivepage;-1!=a.indexOf("/search/label/")&&(lblname1=-1!=a.indexOf("?updated-max")?a.substring(a.indexOf("/search/label/")+14,a.indexOf("?updated-max")):a.substring(a.indexOf("/search/label/")+14,a.indexOf("?&max"))),-1==a.indexOf("?q=")&&-1==a.indexOf(".html")&&(-1==a.indexOf("/search/label/")?(jenis="page",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1,document.write('<script src="'+home_page+'feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata">')):(jenis="label",-1==a.indexOf("&max-results=")&&(postperpage=20),nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1,document.write('<script src="'+home_page+"feeds/posts/summary/-/"+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" >')))}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function finddatepost(a){post=a.feed.entry[0];var e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),s=encodeURIComponent(e);if("page"==jenis)var r="/search?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;else var r="/search/label/"+lblname1+"?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;location.href=r}var nopage,jenis,nomerhal,lblname1;halamanblogger();
/*]]>*/
</script>
</b:if>
<!--Page Navigation Andi AM Blog Pager V.3.1-->
Last step , please save your template and see the results.
ADDITIONALLY...
If the navigation widget doesn't appear or there are other problems, then most likely the problem is with your blog's HTML code.
Perform this step if the navigation widget does not appear.
- Look for this code <b:includable id='mobile-nextprev'> ...(until)... </b:includable>
- Delete all the code above and replace it with the code below
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link '>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>‹</a>
</div>
</b:if>
<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button ' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog- pager-older-link"' expr:title='data:olderPageTitle'>›</a>
</div>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link' >
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>
</div>
<div class='clear'/>
</b:includable>
The final step is to save your template and try again to see the results.
But if there are still problems, or the navigation widget still doesn't appear or the display doesn't appear perfectly, then please continue editing with the last step below.
- look again for the code <div class='blog-pager' id='blog-pager'> ...(until)... </b:includable>
- Delete all the code above and replace it with the code below.
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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'/>
</b:includable>
Please save your blog template again, then please see the results, but If there are still problems or the widget still doesn't appear, etc., then the final solution, please change your blog template or don't need to use this navigation widget, because it's possible that your blog was designed specifically by the owner.
Greetings.
Hope this is useful.
Andi AM (CBC)
