Membuat Next Previous Judul Posting di Navigasi Halaman Blog

Baca Juga

Cara Membuat Navigasi Halaman Blog berupa "Next Previous Judul Posting".

LINK  "Next Previous" berupa Judul Posting merupakan trending desain blog saat ini. Selain lebih seo dan user friendly, navigasi halaman ini juga berfungsi sebagai internal link yang bisa meningkatkan pageviews blog.

Banyak sekali yang sudah berbagi tips ini, baik blogger dalam negeri maupun luar negeri. CB pilihkan buatan dalam negeri, dari dte.web.id dengan sedikit modifikasi. Memang harus dimodif, karena belum tentu "pas" dengan karakter template blog Anda. Modif terutama dilakukan di bagian kode CSS.

Membuat Next Previous Judul Posting di Navigasi Halaman Blog

Berikut ini cara Membuat Next Previous Judul Posting di Navigasi Halaman Blog sebagaimana diterapkan di Template demo NJW V5 ini.

KODE CSS
Simpan di atas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.halaman{padding:1px;background:#fafafc;border-top:1px solid #ccc;margin-top:10px}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.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:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.current-pageleft{padding:0 0 0 15px;}
.current-pageright{padding:0 15px 0 0;}
.halaman-kiri a,.halaman-kanan a{color:#555;}
.pager-title-left{font-family:Arial,sans-serif;font-size:20px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300;width:290px;text-align:left;}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300;width:290px;text-align:right;}
#blog-pager {margin:1px}
</style>
</b:if>

KODE HTML
Simpan di atas <div id='related post'> atau <data:post-body/>

<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'>Previous</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'>Newest</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'>Next</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'>Oldest</span></span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>

KODE JS:
Simpan di atas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//Pager
$(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);//rgt
});
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>


HIDE!
Sembunyikan Next Prev (Newer Home Older Post) bawaan Blogger: Tambahkan kode warna merah.

                        <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <div class='blog-pager' id='blog-pager'>
            BANYAK KODE LAIN DI SINI
          </div>
</b:if>
</b:if>
        <div class='clear'/>
        </b:includable>

Demikian Cara Membuat Next Previous Judul Posting di Navigasi Halaman Blog yang bisa diterapkan di blog Anda, khususnya pengguna New Johny Wuss Series. (http://newjohnywussv5.blogspot.com).*