Cara Blogger - Cara membuat blog pager atau navigasi menggunakan nomer halaman di bawah postingan Blogger. Nomor halaman sebenarnya fungsinya sama dengan navigasi (Next page atau page Previeous) biasanya ini adalah default atau bawaan dari templatenya.
Namun kali admin akan mencona membuat Navigasi pada halaman blogger dengan merubah (next dan previous) menjadi sebauah navigasi halaman ber-nomer
"Script Andi AM Blog Pager V.3.1"
KEGUNAAN BLOG PAGER NAVIGASI HALAMAN BLOG
- Mempermudah pengunjung melihat semua halaman blog,
- Sangat baik untuk tingkat SEO dan mempercantik tampilan blog,
- Membuat blog anda nampak elegan dan profesional.
- Menambhakan CSS di html blog
- Menambahkan Script di html blog
- Masuk Ke BLOGGER DASHBOARD >> TEMPLATE >> EDIT HTML.
- Cari kode ]]></b:skin> dan pastekan kode CSS didibawah ini tepat di atas code ]]></b:skin>
#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 a i{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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsOYSlkpml5XVRVqKQosPXVMvEHUlnyIsKy9d1NHon9qTSbLBZFQg2g5A6Tbp4KFwoGYYr5rwl66VxlA-YHeld-Qe4V0BYuxkiJLjItmkGJjuyPOehhDpM3cHVTmhXW7ol8juxD9c8v9L/s1600/Viva-Blogspot.png) 0 -579px;width:10px;height:10px;margin:10px 5px;float:left}
/* Page Navigation Andi AM Blog Pager V.3.1 */
Langkah berikutnya menambahkan kode SCRIPT
- Cari kode </body> gunakan ( Ctrl+F ) agar lebih cepat dalam pencarian kodenya.
- Jika sudah ketemu letakkan kode Script dibawah ini diatas kode </body>
<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-->
Langkah terakhir, silahkan save template agan dan lihat hasilnya.
TAMBAHAN
Jika widget navigasi tidak muncul atau ada masalah lain, maka kemungkinan besar masalahnya ada pada code HTML blog agan.
Lakukan langkah ini jika widget navigasi tidak muncul.
- Cari code ini <b:includable id='mobile-nextprev'> ...(sampai)... </b:includable>
- Hapus semua code diatas dan ganti dengan code dibawah ini
<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'>&lsaquo;</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'>&rsaquo;</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>
Langkah terakhir save template agan dan coba kembali lihat hasilnya.
Tapi apabila masih ada kendala, atau widget navigasinya masih belum mincul atau tampilan tidak muncul secara sempurna, maka silahkan lanjutkan pengeditan dengan jurus terakhir dibawah ini.
- cari lagi code <div class='blog-pager' id='blog-pager'> ...(sampai)... </b:includable>
- Hapus semua code diatas dan ganti dengan code dibawa ini.
<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>
Silahkan save lagi template blog agan, lalu silahkan lihat hasilnya,, tapi jika masih ada kendala atau widget masih belum mincul dll,, maka solusi terakhir, silahkan ganti template blog agan atau tidak usah menggunakan widget navigasi ini, karena kemungkinan blog agan didesain khusus oleh empunya.
Salam
Semoga bermanfaat.
Andi AM
Artikel Terbaru!
Recent Posts Widget
