Beranda  ›  Blogger  ›  Navigasi  ›  Tutorial Blog

Cara mengganti next & previous page dengan judul postingan

by -
next & previous page dengan judul postingan

Sudah lama saya tidak menulis postingan baru, bukan kangen menulis di blog, tetapi sudah menjadi kewajiban saya untuk mengurusi blog ini -_-. Walaupun sedang sakit, saya usahakan untuk menulis postingan ini :D haha curcol sedikit. Yang akan saya posting kali ini adalah cara mengganti next & previous page dengan judul postingan. Anda sering melihat next & previous page tepat dibawah postingan atau dibawah kotak komentar. 

Kita sering menemukan kode blog-pager dalam postingan, sebenarnya kode blog-pager itu adalah kode dari next & previous page tadi. Kita sebut saja dengan navigasi post saja ya biar lebih gampang. Navigasi post ini berguna untuk memudahkan pengunjung untuk menjelajahi blog kita dan berguna banget buat ningkatin pageviews loh. Tetapi pada umumnya, setiap template (bawaan template) hanya menggunakan gambar sederhana berupa tanda panah ke kiri dan ke kanan serta tombol home ditengahnya. Coba anda pikir, apakah anda pernah mengklik gambar tersebut ? pasti 85% dari pengunjung tidak pernah mengklik gambar sederhana seperti itu. Kenapa ? Bagaimana orang tahu apa judul post yang ada di postingan sebelum dan/atau selanjutnya. Jadi orang orang hanya melihatnya saja tanpa mengkliknya. Untuk contoh realnya dapat anda lihat di blog saya.

Bagaimana, apakah anda tertarik dengan tutorial kali ini ? Kalo tertarik mari kita menuju ke topik pembahasan. Ikuti secara teliti ya !

#1 Menemukan dan mengganti kode blog-pager

  1. Seperti biasa -_- , masuk ke akun blogger anda.
  2. Masuk ke bagian template dan klik edit HTML.
  3. 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'>&#171; <data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
Related:Cara membagi header menjadi 2 kolom seperti blog ini :)
<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/>  &#187;</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

 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'>

Related:Cara Berhenti mengikuti (Unfollow) sebuah blog
<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>

Keterangan :
- Kode berlatar kuning adalah kode next post.
Related:Cara Membuat Scroll pada Popular Post
- Kode berlatar hijau adalah kode previous post.
- Kode berlatar biru muda adalah kode homepage.
- Kode berwarna pink adalah kode gambar. Anda dapat mengeditnya  dengan menambahkan icon home mungkin atau apapun itu.

Sebelum memasangnya, saya kasih tahu dulu, kode blog-pager di blog ada dua. Yang satu pada atasnya bertuliskan <b:includable id='nextprev'> sedangkan yang satunya lagi <b:includable id='mobile-nextprev'>. Menurut saya sih bedanya pada tampilan perangkat. Itu sih logika saya. Untuk mengganti next & previous page dengan judul postingan, anda disarankan untuk memasang dulu page navigation number pada blog agar hasilnya tidak muncul di homepage. Anda juga dapat memperindah page navigation number tersebut dengan membaca postingan DISINI. 

Related:Mengedit Popular Posts Blogger dengan CSS3

#2 Pemasangan script

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>

  Note : Script ini akan berfungsi jika template anda memiliki kode jquery. Baca lebih lanjut DISINI. atau anda bisa memasang yang saya pake sekarang pada blog ini : (simpan di atas kode <body> )
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' type='text/javascript'/>

Kata penutup

Bagaimana? cukup mudahkan cara-cara diatas?  Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara mengganti next & previous page dengan judul postingan. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan.

Sekian post tentang Cara mengganti next & previous page dengan judul postingan. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya !  Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!


Share this

Related Posts

About Contact Disclaimer Privacy Policy Sitemap
close