Ada banyak cara untuk meningkatkan trafik kunjungan pada blog diantaranya yakni 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 yakni 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 eksklusif postingan selanjutnya dengan judul yang ada, dan kalau pengunjung blog kita tertarik tentu akan menuju ke postingan yang di maksud dan secara otomatis pengunjung akan betah berlama-lama di blog kalau sudah menyerupai ini tentu blog kita akan terlihat baik di mata search engine terutama Google.
Untuk sahabat 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 instruksi CSS ini sempurna diatas instruksi </head> namun kalau sebelumnya sahabat sudah pernah di modif tombol navigasi halamannya silahkan sahabat ganti dengan instruksi 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 instruksi diatas terpasang silahkan sahabat cari instruksi dibawah ini
<b:includable id='nextprev'> .............................. .............................. .............................. </b:includable> Setelah ketemu kemudian tambahkan tag kondisional supaya tidak tampil di halaman postingan blog dan nantinya menyerupai ini
<b:includable id='nextprev'> <b:if cond='data:blog.pageType != "item"'>.............................. .............................. .............................. </b:if> </b:includable>Langkah Ke Tiga
Silahkan salin instruksi berikut ini letakkan sempurna dibawah kode </b:includable> pada instruksi 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 sahabat cari instruksi dibawah ini
<b:includable id='post' var='post'> .............................. .............................. .............................. </b:includable>kemudian salin instruksi dibawah ini lalu simpan sempurna diatas instruksi penutup </b:includable>, instruksi ini fungsinya biar 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 instruksi berikut ini
<b:include name='nextprev'/>Lalu simpan instruksi dibawah ini letakkan sempurna dibawah instruksi 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 instruksi Javascript ini letakkan di atas instruksi </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 sahabat sudah pernah menggunakan instruksi Jquery library atau sudah menggunakan Threaded Comment Hack instruksi yang ditandai diatas silahkan dihapus. Lalu silahkan ganti instruksi h1 kalau judul postingan sahabat menggunakan h3 diadaptasi saja.
Oia kode-kode ini menggunakan FontAwesome untuk navigasinya jadi pastikan sahabat sudah memasang fontawesome. Baiklah sahabat ini saja yang mampu dibagikan silahkan dicoba semoga bermanfaat.
Comments