Cara Paling Mudah Membuat Next Prev Post Blogger disertai Judul Postingan

BlogPager atau PostPager digunakan untuk memberitahu pengunjung tentang postingan sebelum dan sesudah artikel yang mereka kunjungi. Secara default blogger menyediakan link next prev tanpa disertai judul postingan.

Kali ini kami membagikan cara yang paling mudah untuk dipahami dan diterapkan untuk mengganti next prev post default blogger dengan next prev yang disertai judul postingan. Langsung saja simak caranya berikut ini:

1. Disable dulu next prev bawaan blogger dengan menambahkan markup <b: if cond="index"> agar script bawaan blogger hanya tampil di index, tidak tampil dalam postingan ataupun halaman. Cari kode <b:include name="nextprev"/>, biasanya ada dalam markup <b:includable id='main' var='top'>. Lalu ganti dengan kode berikut
   

       <!-- navigation -->
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <b:include name='nextprev'/>
   </b:if>

   
   
2. Pasang kode berikut dalam jajaran <b:includable ....>, tujuannya agar script bisa dipanggil dengan mudah.
   

       <b:includable id='nextpost'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div class='post-pager' id='post-pager'>
        <div class='pager-content'>
       <div id='blog-pager-newer-link'>
           <b:if cond='data:newerPageUrl'>
               <h6>Next</h6>
             <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
               <data:newerPageTitle/>
             </a>
     <b:else/>
               <h6>Last</h6>
             <a expr:href='data:post.url'>
               Anda sedang melihat Post terbaru kami
             </a>
           </b:if>
          </div>
       <div id='blog-pager-older-link'>
           <b:if cond='data:olderPageUrl'>
               <h6>Previous</h6>
             <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
               <data:olderPageTitle/>
             </a>
     <b:else/>
               <h6>First</h6>
             <a expr:href='data:post.url'>
               Anda sedang melihat Post Perdana kami
             </a>
           </b:if>
          </div>
        </div>
         <div class='clear'/>
         </div>
       <script type='text/javascript'>
       $(document).ready(function(){
       var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
       $(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
       var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
       $(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);
       });
       var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
       $(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
       var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
       $(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
       });
       });</script>
       </b:if>
     <div class='clear'/>
   </b:includable>

   
   
3. Selanjutnya mari kita tempatkan pada markup yang hanya akan tampil pada postingan kita. Cari kode <b:includable id='post' var='post'> dan kita panggil kode kita dalam markup post, untuk contoh kami tempatkan pada post-footer, cari kode <div class='post-footer-line post-footer-line-1'> lalu kita panggil script dalam markup itu, atau bisa anda tempatkan dimana saja sesuka anda
   

   <div class='post-footer-line post-footer-line-1'>
       <!-- navigation -->
       <b:include name='nextpost'/>
   </div>

   sampai disini bisa kita save dan lihat hasilnya.
   
   
4. Selanjutnya mari kita percantik dengan CSS agar nyaman dilihat, masukkan CSS berikut dalam jajaran CSS untuk item/post saja
   

   #post-pager {
       display: block;
       margin: 0;
   }
   .pager-content {
       display: grid;
       grid-template-columns: 49.85% 49.85%;
       grid-column-gap: .3%;
   }
   #blog-pager-newer-link {
       background: aliceblue;
       padding: 8px;
   }
   #blog-pager-older-link {
       background: aliceblue;
       padding: 8px;
   }
   

   
   
5. Sesuaikan dengan selera anda. Demo ada dibawah postingan ini.