Cara Mengganti Older Dan Newer Post Menjadi Numbered Navigation Pada Blog

Zona Internetku No Comment September 23, 2018

Cara Mengganti Older Dan Newer Post Menjadi Numbered Navigation Pada Blog. Pada saat pertama kali membuat blog, secara default blog kalian pada bagian homepage akan menampilkan sebuah navigasi yang bernama Older Dan Newer Posts. Older Post berarti tombol navigasi untuk menampilkan postingan yang lama, sedangkan Newer Post merupakan sebuah tombol untuk menampilkan postingan terbaru pada blog.
Mungkin bagi sebagian orang yang melihatnya akan kurang tertarik pada tampilan tersebut, namun kita juga bisa mengubah navigasi Older Posts menjadi navigasi yang bernomor seperti halaman pada buku, namun dengan menggunakan teknik ini maka akan mempengaruhi kinerja blog kalian tapi hal itu akan sebanding karena blog kalian akan lebih keren jika menggunakan navigasi bernomor

Baca juga : Cara Membuat Featured Post Di Homepage Blog

Cara Mengganti Navigasi Older Dan Newer Post Menjadi Navigasi Bernomor Di Blogger Dengan Mudah

1. Pertama, silahkan kalian masuk ke dalam blog kalian terlebih dahulu
2. Langkah kedua, masuk ke dalam menu "Tema" dan pilih "Edit HTML"
3. Kemudian kalian cari kode </b:skin> atau </style>
dan letakkan kode berikut ini di atas kode tadi

Style 1 : Css Untuk Warna Gelap

<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:#2d3141;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{background:rgba(255,255,255,.1);display:inline-block;font-size:13px;color:rgba(255,255,255,.8);padding:5px 10px;margin:0 2px 0 0;border-radius:2px;transition:all .3s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.2);color:#fff;position:relative;}
.showpagePoint{background:#70c3eb;color:#fff;z-index:200;position:relative;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>

+ Style 2 : Css Untuk Warna Terang

<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. Langkah selanjutnya ialah kalian cari kode <b:includable id='main' var='top'> dan scroll ke bawah untuk mencari kode ini didalamnya

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

kemudian ganti kode tersebut dengan kode berikut 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>

5. Lalu kalian cari lagi kode </body> dan letakkan script berikut ini di atas kode </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.rawgit.com/Arlina-Design/redvision/master/unlipage.js' type='text/javascript'/>
</b:if>

Keterangan :
var postperpage=7;
Untuk mengatur jumlah postingan perhalaman (perpage)
var numshowpage=3;
Untuk mengatur jumlah nomor navigasi yang akan di tampilkan (nomor halaman yang aktif tidak termasuk dalam hitungan)

6. Ok, jika semua langkah langkahnya sudah kalian jalankan dengan benar maka saatnya kita menyimpan perubahan tersebut dengan meng-klik tombol "Simpan Tema"

Baca juga :
Cara Mengganti Tombol Next Prev Dengan Judul Postingan
Cara Membuat Widget Recent Comments Di Blog
Cara Menambahkan Widget Random Post Di Blog

Dan tada..!!! selamat menu navigasi bernomor pada blog anda telah muncul, jika menu navigasi tersebut error maka kalian harus mencobanya terus hingga berhasil dan pastikan untuk mengikuti tutorialnya dengan teliti ya.
Sekian tutorial kali ini dan sampai jumpa lagi di postingan lainnya

Referensi :
22 September 2108 https://www.arlinadzgn.com/2016/04/memasang-unlimited-page-navigation-di-blogger.html

Promo Menarik