Menampilkan Judul Postingan di Blog Pager

Blog Pager

Blog pager umumnya menampilkan teks NEXT - PREV (halaman selanjutnya - halaman sebelumnya). Untuk tema Blogger versi lawas, sudah banyak referensi cara menampilkan judul postingan di bagian blog pager. Sedangkan untuk tema versi ke 3 agak gampang-gampang susah.
Tapi tetap ada cara khusus untuk menerapkannya, simak langkah-langkah menampilkan judul postingan di tema versi 3 Blogger berikut ini.

Pastikan sudah login dan template HTML Blogger sudah ready ya.

Cari kode ini :

<b:includable id='postPagination'>
  <!--hapus kode yang ada, sisakan tag includable pembuka dan penutup saja. -->
</b:includable>

Jika sudah dapat, copy kode untuk elemen blog pagernya dibawah ini dan pastekan didalam tag b:includable tadi :

  <b:if cond='data:view.isPost'>
  <div class='nav-pager' id='nav-pager'>
        <div class='next' id='blog-pager-older-link'>
          <b:if cond='data:olderPageUrl' id='right-link'>
            <a class='nav-older-link' expr:href='data:olderPageUrl.canonical' expr:id='data:widget.instanceId + "_nav-older-link"'>
            </a>
          </b:if>
        </div>
        <div class='home'>
          <b:if cond='data:view.url != data:blog.homepageUrl' id='super.homePageLink'>
            <a expr:href='data:blog.homepageUrl'>
              <span>Home</span></a>
          </b:if>
        </div>
        <div class='prev' id='blog-pager-newer-link'>
          <b:if cond='data:newerPageUrl' id='left-link'>
            <a class='nav-newer-link' expr:href='data:newerPageUrl.canonical' expr:id='data:widget.instanceId + "_nav-newer-link"'>
            </a>
          </b:if>
        </div>
      </div>
     </b:if>

Selanjutnya, copy script external ini dan letakkan diatas tag </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Satu lagi, copy script internal ini dan letakkan diantara tag <body></body> :

<script>
//<![CDATA[
(function($){   
    var newerLink = $('a.nav-newer-link');
    var olderLink = $('a.nav-older-link');
    $.get(newerLink.attr('href'), function (data) {
     newerLink.html('<div>Selanjutnya</div> <p>'+$(data).find('.post h2.post-title').text()+'</p>');   
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
     olderLink.html('<div>Sebelumnya</div> <p>'+$(data2).find('.post h2.post-title').text()+'</p>');   
    },"html");
})(jQuery);
//]]>
</script>

Jika sudah , terakhir CSSnya.
Copy dan paste bersama CSS lainnya dalam template.

#nav-pager {display: flex;justify-content: center;background: transparent;}
#nav-pager .prev,#nav-pager .next{width: 47.5%;}
#nav-pager .prev p,#nav-pager .next p{padding:5px; border: 1px solid #ddd; font-size: 14px;text-align:center;}
#nav-pager .home{width: fit-content;text-align: center;}

CSS diatas hanya ,mengatur tata letak saja. Untuk ukuran pas, ikon dan lainnya sesuaikan dengan tata letak di template masing-masing.

Postingan terkait :

Menampilkan Judul Postingan di Blog Pager

Blog Pager

Formulir Kontak