by

Membuat Navigasi Bernomor di Blog

Membuat Navigasi Bernomor di Blog
Membuat Navigasi Bernomor di Blog

Membuat navigasi bernomor di blogspot memang susah-susah gampang. Hal ini memang sangat terkait dengan template yang Anda gunakan. Namun sebelum kita lebih jauh membahas mengenai navigasi bernomor di blogspot, sebenarnya apa itu navigasi bernomor?

Navigasi bernomor biasa disebut dengan sistem paging/pagination. Biasanya sistem paging pada blogspot secara default menggunakan label Older Posts, Home, dan Newer Posts.

Nah pada tutorial ini saya akan memberikan tutorial kepada Anda bagaimana cara membuat sistem pagination menggunakan nomor di blogspot. Tentu ini akan membuat blog Anda terlihat lebih cantik nantinya.

Cara Memasang Pagination Bernomor di Blogspot

1. Login ke akun blogger Anda, lalu edit html template blog Anda.

2. Silakan pastekan kode berikut sebelum tag </head> di html template Anda.

<!-- navigasibaru -->
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <style type='text/css'>
/* navigasi */
#blog-pager{background:#fff;clear:both;width:auto;padding:5px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:5px 0 5px 0}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-size:13px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1);border-radius:2px;transition:all .3s}
.showpageNum a:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.03);color:#333;position:relative;}
.showpagePoint{background:#2980b9;color:#fff;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style> </b:if> </b:if>
<!-- navigasibaru -->

3. Jika sudah tambah kode html berikut sebelum tag penutup </body>.

<!-- navigasibaru -->
<b:if cond='data:blog.pageType == &quot;index&quot;'> <script type='text/javascript'>
/*<![CDATA[*/
var postperpage=7;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://www.noos.co.id/wp-content/uploads/2018/04/unlipage.js' type='text/javascript'/> </b:if>
<!-- navigasibaru -->

4. Kemudian cari kode berikut pada html template Anda “<b:includable id=’main’ var=’top’>“. Teliti kebawah pelan-pelan, jika kode template terhidden silakan expand biar muncul semua kodenya, lalu carilah kode yang kira-kira baris kodenya seperti berikut ini.

<!-- navigasibaru -->
           <b:include name='nextprev'/>
    <!-- navigasibaru -->

Gantilah kode diatas/replace dengan kode html dibawah ini.

<!-- navigasibaru -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
        <b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if>
<!-- navigasibaru -->

Selesai. Lihat apakah kode cara membuat pagination number di blog Anda berhasil diterapkan atau tidak. Jika Anda kesulitan dalam memasang pagination ini, Anda dapat bertanya melalui komentar.

Comment

Leave a Reply

Your email address will not be published. Required fields are marked *