Cara Mengganti Navigasi Next Previous Dengan Judul Post

Cara Mengganti Navigasi Next Previous Dengan Judul Post - Saya kembali lagi sobat blogger yang baik hatinya. Sekarang, saya akan memberi tutorial blogger pemula lagi. Tutorial tersebut adalah Cara Mengganti Navigasi Next Previous Page Dengan Judul Post. Untuk saat ini, khusus nya tahun 2015, tutorial ini sangat banyak dipakai oleh template blog. Kalau dulu pas awal-awal 2014, saya jarang nemuin template yang beginian. Mungkin, untuk saat ini tutoriali ini terlalu mainstream.

Tutorial ini adalah salah satu kecil untuk mendatangkan trafik. Cara kerja nya seperti related post atau artikel terkait yang mungkin sudah terpasang di blog soba setelah sobat membaca Cara Membuat Related Post / Artikel Terkait Di Blog. 

Seperti yang dikatakan pada tutorial cara membuat related post adalah ketika pengunjung sobat tuntas membaca artikel atau postingan sobat yang sangat unik dan menarik untuk dibaca, maka mau tidak mau pengunjung akan melirik postingan sebelumnya, postingan setelahnya, dan juga related post. Jika post sebelumnya, post setelahnya, atau related post memiliki judul yang sangat menarik dan membuat pengunjung penasaran untuk dibaca, maka otomatis page atau laman lain akan mendapat pageview.

Bayangkan jika semua post blog sobat mempunyai judul menarik dan membuat penasaran untuk dibaca, maka semua artikel atau post di blog sobat akan mendapat pageview dan akan meningkatkan kualitas artikel blog sobat.

Dan disini, saya akan jelaskan cara mengubah navigasi next previous dengan judul post.

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode

 <div class='blog-pager' id='blog-pager'>

(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Kode lengkapnya seperti berikut 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>

6. Setelah ketemu kode diatas, GANTI kode diatas menjadi kode berikut 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>

*Keterangan: jika kode <div class='blog-pager' id='blog-pager'> lebih dari satu, maka sobat pilih kode setelah

 <b:includable id='nextprev'>

untuk lebih jelasnya, lihat gambar berikut ini:

7.  Cari lagi kode

</body>

8. Copy kode 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>

9. Simpan
*Keterangan: saran saya, sebelum sobat mengikuti tutorial ini, sobat harus ikuti terlebih dahulu tutorial Cara Membuat Navigasi Next Page Number Di Blog agar hasil nya tidak muncul di homepage.

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Mengganti Navigasi Next Previous Dengan Judul Post
Deskripsi	Cara mengganti navigasi next previous dengan judul post yang dapat meningkatkan pageview Anda dengan cara pengunjung melihat judul sebelum atau sesudah dari artikel tersebut.
Author	Google
Author Rating	90%/ 100% Suara Dari 2497 votes