Cara mengganti next & previous page dengan judul postingan





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

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


#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 DISINIatau 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 postinganOh 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!






Artikel Menarik Lainnya :



13 comments

avatar
14 July, 2013

mantabs..tutorialnya simple..tapi mudah dipahami...luarbiasa :-)

BalasHapus
avatar
15 July, 2013

mantap nih bro hheee :D

BalasHapus
avatar
16 July, 2013

Saya save dulu ya halamannya...

BalasHapus
avatar
16 July, 2013

asik nih, ijin coba ah, baguus kayanya bosen kalo cuma gambar next dan previous aja, demonya yang kaya di blog ini

BalasHapus
avatar
16 July, 2013

Manteb gan,.. Maju terus :D

BalasHapus
avatar
24 July, 2013

Siipp..bertambah lagi ilmu nya...thanks sob.. :)

BalasHapus
avatar
29 March, 2016

Terima kasih gan tutornya

BalasHapus
avatar
18 April, 2016

Kok gak work ya gan ono opo dengan template saya?

BalasHapus
avatar
04 June, 2016

thnks work!

BalasHapus
avatar
04 June, 2016

thnks work!

BalasHapus
avatar
11 March, 2017

ijin klik adsenseny aya. enjoy

BalasHapus
avatar
15 March, 2017

informasi yang sangat bermanfaat gan, thanks atas infonya

http://skor-terkini.blogspot.com/

BalasHapus
avatar
16 March, 2017

https://thecodelist.blogspot.co.id/ MAMPIR YA EVERTHING IS FREE

BalasHapus