Cara Pasang Navigasi Halaman Blog Mudah dan Berhasil

Penomoran navigasi halaman  merupakan hal yang dianjurkan karena setiap blogger pasti memiliki banyak postingan, navigasi ini berfungsi mempermudah pengunjung blog untuk melihat/membaca artikel lain yang tidak tampil pada halaman pertama. Namun sebelumnya untuk menggunakan kode ini sebaiknya rapikan dulu tampilan blogmu menjadi grid view menjadi 2 kolom atau 1 kolom page post, itu tergantung selera.

1.   Login ke Blogger
2.   Klik menu Theme>Edit Temple
3.   Temukan kode </head>, copykan kode dibawah ini diatas kode </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:#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>  

4.    Selanjutnya copykan kode script ini diatas </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/rachma92/tipsterkini/master/unlipage.js' type='text/javascript'/>  
 </b:if>  

keterangan : postperpage adalah jumlah post yang tampil perhalaman
                     numshowpage adalah angka nomor halaman yang tampil pada navigasi, misal 1,2,3 next

5.   Selanjutnya cari kode dibawah ini lalu
       <!-- navigation -->
               <b:include name='nextprev'/>
     copy replace dengan kode 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/>  

Selamat Mencoba

Terima kasih telah berkunjung ke https://www.agungpanduan.com

Komputer

Share This :