Cara Membuat Pagination Navigasi Halaman Blog Responsive Terbaru

Arif Hanafi    Mei 06, 2019    Blog , Tutorial   

ilustrasi pagination : www.wakselow.com

Pada kesempatan kali ini kami akan membahas Cara Membuat Pagination Penomeran Halaman Yang Responsiv Dengan Mudah. Siapa yang tidak betah apabila mengunjungi sebuah web dengan konten yang bagus pasti akan membuat anda betah mengunjungi laman tersebut, akan tetapi akan kurang rasanya apabila laman tersebut tidak memiliki navigasi halaman yang bagus.

Oleh karena itu navigasi halaman atau biasa disebut Pagination atau Penomeran Halaman menjadi hal yang sangat wajib digunakan disebuah web atau blog. Dengan navigasi yang jelas dan mudah sangat membatu pengunjung anda dalam mejelajah laman web anda yang akan berpotensi membuka konten-konten lain yang telah anda buat.

Bagaimana Cara Membuat Navigasi Halaman

1. Pastikan anda telah berada didalam halaman Dashboard blog anda.
2. Buka Template lalu pilih mode Edit HTML.
3. Letakkan kode dibawah ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation */
#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 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> 

4. Kemudian letakkan kode dibawah ini sebelum </body>

<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://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/unlipage.js' type='text/javascript'/>
</b:if>

5. Langkah selanjutnya cari <b:include name='nextprev'/> Lalu ganti dengan kode dibawah ini

<!-- navigation -->
    <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'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if> 

6. Simpan Template.

Demikianlah pembahasan Cara Membuat Pagination Navigasu Halaman Blogger Responsive Dengan Mudah Terbaru. Apabila ada kritik, saran atau pertanyaan silahkan tinggalkan komentar anda dibawah. Terima kasih telah berkunjung