Ada banyak cara untuk meningkatkan trafik kunjungan pada blog diantaranya adalah penerapan SEO pada blog, untuk postingan kali ini akan membahas Merubah Next Previous Navigasi Halaman Dengan Judul Postingan, kalau kita perhatikan di menu navigasi halaman setingan standar yang ada di kebanyakan blog adalah Previous dan next untuk mengetahui lebih lanjut paostingan yang ada di blog tersebut.
Nah maka dari itu di postingan ini akan dibahas bagaimana Merubah Next Previous Navigasi Halaman Dengan Judul Postingan yang tujuannya akan mempermudah pengunjung mengetahui langsung postingan selanjutnya dengan judul yang ada, dan jika pengunjung blog kita tertarik tentu akan menuju ke postingan yang di maksud dan secara otomatis pengunjung akan betah berlama-lama di blog kalau sudah seperti ini tentu blog kita akan terlihat baik di mata search engine terutama Google.
Untuk sobat yang tertarik untuk mencobanya dan belum ada custom pager ini di template blognya dan ingin merubah next previous di navigasi halaman dengan judul postingan mari kita simak bersama cara penerapannya di blog dan ikuti petunjuk di bawah ini.
Langkah pertama
Salin dan simpan kode CSS ini tepat diatas kode </head> namun kalau sebelumnya sobat sudah pernah di modif tombol navigasi halamannya silahkan sobat ganti dengan kode ini
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
#blog-pager-newer-link,#blog-pager-older-link{font-size:100%!important}
.blog-pager-older-link,.home-link, .blog-pager-newer-link{padding:0!important}
.halaman-kanan,.halaman-kiri,.pager-title-left{transition:all .3s ease-in-out}
.halaman{margin:20px 0 0;padding:0;height:auto}
.halaman-kanan,.halaman-kiri{color:#141924;background:0 0;width:50%;position:relative;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:left;padding:0 10px 0 40px;text-align:left;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:right;padding:0 40px 0 10px;text-align:right;box-sizing:border-box}
.halaman-kanan a:hover,.halaman-kanan:hover .pager-title-left,.halaman-kiri a:hover,.halaman-kiri:hover .pager-title-left{color:#e8554e!important}
.current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a{font-size:18px;font-family:Roboto,Arial,sans-serif;font-weight:500;background:0 0;text-decoration:none;line-height:1.3em}
.halaman-kanan a,.halaman-kiri a{color:#141924;font-size:18px;font-weight:500;line-height:1.3em}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri{position:absolute;top:50%;margin-top:-8px}
.panahkiri{left:10px}
.panahkanan{right:10px}
.clear{clear:both}
@media screen and (max-width:603px){.halaman-kanan,.halaman-kiri{width:100%;padding:0}
.isihalaman-kiri{margin-left:40px!important}
.isihalaman-kanan{margin-right:40px!important}
.panahkiri{margin-top:-18px}
.halaman-kiri:after{content:'';height:1px;width:100%;background:#dedede;display:block;margin:10px 0}
}
/*]]>*/
</style>
</b:if>Langkah Ke Dua
Setelah kode diatas terpasang silahkan sobat cari kode dibawah ini
<b:includable id='nextprev'>
..............................
..............................
..............................
</b:includable>Setelah ketemu kemudian tambahkan tag kondisional supaya tidak tampil di halaman postingan blog dan nantinya seperti ini
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "item"'>..............................
..............................
..............................
</b:if>
</b:includable>Langkah Ke Tiga
Silahkan salin kode berikut ini letakkan tepat dibawah kode </b:includable> pada kode diatas langkah ke dua.
<b:includable id='nav-post'>
<b:if cond='data:blog.pageType == "item"'>
<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'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Next Post</a>
</span>
<b:else/>
<span class='current-pageleft'>This Is The Newest Post</span>
</b:if>
<div class='clear'/>
</div>
<i aria-hidden='true' class='fa fa-chevron-left panahkiri'/>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Previous Post</a>
</span>
<b:else/>
<span class='current-pageright'>This Is The Oldest Page</span>
</b:if>
<div class='clear'/>
</div>
<i aria-hidden='true' class='fa fa-chevron-right panahkanan'/>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>Langkah Ke Empat
Masih berlanjut kemudian sobat cari kode dibawah ini
<b:includable id='post' var='post'>
..............................
..............................
..............................
</b:includable>kemudian salin kode dibawah ini lalu simpan tepat diatas kode penutup </b:includable>, kode ini fungsinya agar post navigasi muncul diatas komentar atau dibawahnya postingan.
<b:if cond='data:blog.pageType == "item"'>
<div class='halaman'>
<div class='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'>Next Post</a>
<b:else/>
<span class='current-pageleft'>This Is The Newest Post</span>
</b:if>
<div class='clear'/>
</div>
<i aria-hidden='true' class='fa fa-chevron-left panahkiri'/>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'>Previous Post</a>
<b:else/>
<span class='current-pageright'>This Is The Oldest Page</span>
</b:if>
<div class='clear'/>
</div>
<i aria-hidden='true' class='fa fa-chevron-right panahkanan'/>
</div>
</div>
<div class='clear'/>
</div>
</b:if>Langkah Ke Lima
Cari kode berikut ini
<b:include name='nextprev'/>Lalu simpan kode dibawah ini letakkan tepat dibawah kode diatas, fungsinya untuk navigasi halaman dibawah komentar
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nav-post'/>
</b:if>Langkah Ke Enam
Salin dan simpan kode Javascript ini letakkan di atas kode </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script><script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.blog-pager-newer-link');
var olderLink = $('a.blog-pager-older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html($(data).find('.post h1.post-title').text());
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html($(data2).find('.post h1.post-title').text());
},"html");
})(jQuery);
//]]>
</script>
</b:if>Kalau sebelumnya sobat sudah pernah menggunakan kode Jquery library atau sudah menggunakan Threaded Comment Hack kode yang ditandai diatas silahkan dihapus. Lalu silahkan ganti kode h1 jika judul postingan sobat menggunakan h3 disesuaikan saja.
Oia kode-kode ini menggunakan FontAwesome untuk navigasinya jadi pastikan sobat sudah memasang fontawesome. Baiklah sobat ini saja yang bisa dibagikan silahkan dicoba semoga bermanfaat.
EmoticonEmoticon