Ok sobat di artikel Berikut ini seocips.com akan membagikan tentang cara membuat dan mengganti navigasi next previous page dengan judul postingan. Pastinya sobat sudah sering menemukan hal seperti ini di blog-blog dan website diluar sana. Biasanya letak navigasi next & previous page ada dibawah postingan atau dibawah kotak komentar.

Pada umumnya, setiap template hanya menggunakan gambar sederhana  berupa tanda panah ke kiri dan ke kanan serta tombol home ditengahnya atau hanya berupa tulisan next prev atau tulisan older post dan newer post.

Pastinya pengunjung Blog anda sangat jarang yang mengklik gambar/tulisan ini karena mereka tidak tahu apa judul postingan selanjutnya. Lain halnya jika itu diganti dengan judul postingan dan misalnya judul yang ditampilkan menarik nah ini dapat meningkatkan pageview blog anda jika pengunjung mengklik ke halaman selanjutnya.

Next Previous Page dengan Judul Postingan

Mungkin hasilnya akan sedikit berbeda dengan gambar diatas karena kode ditemplatenya sudah diubah dan diganti dibeberapa bagian. Gambar diatas tulisan Next dan Previousnya masih ada tapi judul postingan juga ikut ditampilkan dan mungkin akan saya bagikan cara membuatnya di waktu mendatang. Bagaimana, apakah anda tertarik dengan tutorial kali ini ? Kalo tertarik mari kita menuju ke topik pembahasan.

Masuk ke bagian template dan klik edit HTML.
Cari kode <div class='blog-pager' id='blog-pager'> dengan menggunakan fungsi CTRL+F
Kode selengkapnya seperti ini :

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <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>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <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>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>

Ganti dengan kode dibawah ini :

<div class='blog-pager' id='blog-pager'>                                                  
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:alt='data:newerPageTitle' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'/>
</div>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='arrow' src='http://i1335.photobucket.com/albums/w677/yoyosuharyo/arrow_zps37c931f2.png'/>
</a>
</b:if>
</b:if>
<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:alt='data:olderPageTitle' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/>
</div>
</b:if>
  </div>

Jika ada lebih dari satu kode <div class='blog-pager' id='blog-pager'> coba ganti kode yang dibawah <b:includable id='nextprev'> .  Untuk mengganti next & previous page dengan judul postingan, anda disarankan untuk memasang dulu page navigation number pada blog agar hasilnya tidak muncul di homepage.

Langkah selanjutnya. Simpan script dibawah ini tepat diatas kode </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function getTitlesForNav(e){for(var t=0;t<e.feed.entry.length;t++){var n=e.feed.entry[t];var r="";for(var i=0;i<n.link.length;i++){if(n.link[i].rel=="alternate"){r=n.link[i].href;break}}if(r!="")urlToNavTitle[r]=n.title.$t}}function urlToPseudoTitle(e){var t=e.match(/\/([^\/_]+)(_.*)?\.html/);if(t){t=t[1].replace(/-/g," ");t=t[0].toUpperCase()+t.slice(1);if(t.length>28)t=t.replace(/ [^ ]+$/,"...")}return t}var urlToNavTitle={};document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+"script>");$(window).load(function(){window.setTimeout(function(){var e=$("a.blog-pager-newer-link").attr("href");if(e){e=e.replace(/\.blogspot\.[^/]+\//,".blogspot.com/");var t=urlToNavTitle[e];if(!t)t=urlToPseudoTitle(e);if(t)$("a.blog-pager-newer-link").html(t)}e=$("a.blog-pager-older-link").attr("href");if(e){e=e.replace(/\.blogspot\.[^/]+\//,".blogspot.com/");var t=urlToNavTitle[e];if(!t)t=urlToPseudoTitle(e);if(t)$("a.blog-pager-older-link").html(t)}},500)})
//]]>
</script></b:if>

 Script diatas akan berfungsi jika template anda memiliki kode jquery. Jika belum ada di template anda coba gunakan script jquery dibawah ini:

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

Simpan template anda dan lihat hasilnya. Bagaimana sobat, mudah bukan? Ok sobat sekian tutorial blog untuk saat ini tentang cara mengganti navigasi next previous page dengan judul postingan, semoga bermanfaat.

UPDATE!

Berikut ini adalah Navigasi Next Prev Keren Di Blogger. Tampilannya adalah seperti gambar dibawah ini.

Navigasi Next Prev Keren dibawah Postingan

Bagaimana, tertarik untuk membuatnya? silahkan sobat baca artikel selanjutnya tentang cara membuat navigasi dengan judul dibawah postingan. nah sekian updatetannya semoga bermanfaat.
2 Komentar untuk "Cara Mengganti Navigasi Next Previous Page dengan Judul Postingan"

mas saya agak bingung dengan langkah yang ini "Jika ada lebih dari satu kode [...........................] coba ganti kode yang dibawah [............................]"". coba di jelaskan lebih rinci mas

ada cara lain nggak...? dh sy coba tp gagal