Menambahkan NextPrev di tema v.3 Blogger

Blog Pager

Postingan baru Beranda Postingan lama

Menambahkan link / tombol ke halaman postingan baru dan postingan lama di tema Blogger versi terbaru (Soho, Contempo, Notable and Emporio)

1. Buka template blog (edit HTML)
2. Klik ikon widget , pilih Blog1
3. Cari kode :
   <b:include name='super.main'/>
4. Copy kode ini :
   <b:include cond='data:view.isPost' name='postPagination'/>
5. Pastekan tepat dibawah kode seperti yang terdapat di nomor 2 diatas.
6. Pastikan tampilannya seperti ini :

   <b:includable id='main'>
       <b:include name='noContentPlaceholder'/>
       <b:include name='super.main'/>
       <b:include cond='data:view.isPost' name='postPagination'/>
   </b:includable> 

7. Selanjutnya, copy :postPagination.
8. Tekan Ctrl + f, pastekan dikolomnya tekan Enter
9. Jika tidak ada, klik disini
10. JIka ditemukan, copy kode ini :

    
     <div class='blog-pager container' id='blog-pager'>
      <b:include cond='data:newerPageUrl' name='super.previousPageLink'/>
       <b:include cond='data:view.url != data:blog.homepageUrl' name='super.homePageLink'/>
      <b:include cond='data:olderPageUrl' name='super.nextPageLink'/>   
     </div>
    

11. Pastekan seperti ini :
    
    <b:includable id='postPagination'>
    /*--Paste kode disini--*/
    </b:includable>

Kode HTML elemen sudah terpasang, selanjutnya tambahkan sedikit pengaturan CSSnya

1. Copy CSS ini :
   .blog-pager-newer-link {float: left;}
   .blog-pager-older-link {float: right;}
2. Cari CSS dengan kode seperti ini :
   #blog-pager {
   margin: 2%;
   width: 100%;
   display: inline-block;
   text-align: center;
   }
3. Pastekan tepat dibawahnya. Hal ini bertujuan agar CSS terkumpul dalam satu grup dan lebih mudah dicari.
4. Jika sudah, simpan lalu cek hasilnya.

Buat elemen Paginasi halaman

Jika elemen paginasi tidak ditemukan dalam template, copy kode dibawah ini :

<b:includable id='postPagination'>
 <div class='blog-pager container' id='blog-pager'>
  <b:include cond='data:newerPageUrl' name='super.previousPageLink'/>
   <b:include cond='data:view.url != data:blog.homepageUrl' name='super.homePageLink'/>
  <b:include cond='data:olderPageUrl' name='super.nextPageLink'/>   
 </div>
</b:includable>

Postingan terkait :