Page Navigation Di Bawah Postingan

Pada kesempatan sebelumnya saya sudah membagikan Gallery jiul AMP Template Blogger secara gratis, nah pada kali ini saya akan membagikan tutorial tentang Cara Membuat Page Navigation Di Bawah Postingan seperti gambar diatas ini, cara membuatnya cukup mudah buat kalian yang ingin menggunakan fitur ini silahkan dan bagi yang tidak ya.. gapapa sih... Ok kita mulai saja tutorial kali ini.

Cara Membuat Page Navigation Di Bawah Postingan

1. Buka Blog Tema > Edit HTML, lalu cari </style> dan simpan CSS berikut di atasnya

/* Page Navigation Post - Arleth98
   =============================== */
.halaman{padding:10px 0 0;background:#fdfdfd;border:1px solid #e6e6e6}
.halaman-kiri{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out}
.halaman-kanan{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#ddd!important}
.halaman-kiri a,.halaman-kanan a{color:#999}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#666!important}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:'Roboto Condensed',sans-serif,Helvetica,Arial,sans-serif;font-weight:400;background:0;text-decoration:none}
.current-pageleft{padding:0 0 0 15px}
.current-pageright{padding:0 15px 0 0}
.pager-title-left{font-size:12px;text-transform:uppercase;font-weight:700;transition:all .3s ease-out}
.isihalaman-kiri,.isihalaman-kanan{margin:5px 10px 10px}

2. Silahkan Simpan javascript berikut ini di atas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>/*//<![CDATA[*/
$(document).ready(function(){var e=$("a.blog-pager-older-link").attr("href");$("a.blog-pager-older-link").load(e+" .post-title:first",function(){var e=$("a.blog-pager-older-link").text();$("a.blog-pager-older-link").text(e)});var r=$("a.blog-pager-newer-link").attr("href");$("a.blog-pager-newer-link").load(r+" .post-title:first",function(){var e=$("a.blog-pager-newer-link:first").text();$("a.blog-pager-newer-link").text(e)})});
/*//]]>*/</script>
</b:if>

3. Cari <article class='post hentry'>...</article>.
4. Simpan HTML berikut ini di bawah </article>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Next</span><br/>
      <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'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Latest</span></span>
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Previous</span><br/>
      <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'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>First</span></span>
    </b:if>
</div>
</div>
  </div>
<div class='clear'/>
</div>
</b:if>

5. Save Tema dan lihat Hasilnya.