Membuat Tautan Ke Artikel Selanjutnya atau Sebelumnya Dengan Judul Postingan (Next Previous)

Pada kesempatan ini, Saya menuliskan sebuah tutorial untuk membuat navigasi tautan atau alamat di bawah postingan menuju ke konten/ artikel selanjutnya (Posting baru) maupun sebelumnya (Posting lama) dengan judul artikel. Tampilan next prev posting blog tersebut seperti gambar dibawah ini.

Langsung saja, berikut kode/ script yang perlu Sobat tambahkan.

• Masuk ke akun blogger Sobat > Pilih Blog > Template > lalu Edit HTML.
• Jika belum ada source kode Jquery, copy kode berikut diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 

• Lalu copy kode CSS tersebut diatas ]]></b:skin> atau </style> , gunakan CTRL+F untuk mempercepat pencarian.

.blog-posts{display: block;overflow: hidden;}
.blog-pager{background: #def;float:left;margin-top: 10px;width: 100%;font-family: 'roboto condensed',calibri;}
.blog-pager a{background: #25a;transition: all 0.6s ease;color: #fff;display: block;max-width: 200px;padding: 5px 20px;box-shadow: 0px 0px 1px 1px #fff;}
.blog-pager a:hover{color: #000;background: #fff;box-shadow: 0px 0px 0px 1px #000;}
#blog-pager-newer-link a:hover{margin-right: 20px!important;}
#blog-pager-newer-link a:hover:after{margin-right: 20px!important;font-size: 25px;animation: moveright 1s linear infinite;-webkit-animation: moveright 1s linear infinite;}
#blog-pager-older-link a:hover{margin-left: 20px!important;}
#blog-pager-older-link a:hover:after{margin-left: 20px!important;font-size: 25px;animation: moveleft 1s linear infinite;-webkit-animation: moveleft 1s linear infinite;}
@-webkit-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@-moz-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@-webkit-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
@-moz-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
@keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
#blog-pager-older-link, #blog-pager-newer-link{margin:30px 25px 10px 25px;position: relative;height: auto; }
#blog-pager-older-link{float: left; }#blog-pager-newer-link{float: right;}
#blog-pager-older-link:before{content:'Previous Post';position: absolute;top:-25px;}
#blog-pager-newer-link:before{content:'Next Post';right: 0;position: absolute;top:-25px;}
#blog-pager-newer-link a:after,#blog-pager-older-link a:after{transition: all 0.5s ease;color: #000;top: 0;font-size: 20px;position: absolute;font-family: fontawesome;} 
#blog-pager-older-link a:after{content:"\f100";left: -17px;position: absolute;font-family: fontawesome;} 
#blog-pager-newer-link a:after{content:"\f101";right: -17px;position: absolute;font-family: fontawesome;} 

• Selanjutnya copy kode HTML tersebut dibawah <data:post.body/> atau kode widget related post Sobat, kemungkinan ada beberapa kode <data:post.body/> , bila belum berhasil letakkan juga di bawah <data:post.body/> lainnya, karena kemungkinan ada beberapa kode tersebut pada template sobat.

<div class='blog-pager' id='blog-pager'>
    <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'>Prev Post</a>
      </span>
    </b:if>
 <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'>Next Post</a>
      </span>
    </b:if>
</div>

• Kemudian copy kode Jquery ini diatas </head> atau diatas </body>.

 <script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; h3:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; h1:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script> 

• Setelah itu buka salah satu postingan Sobat, lihat pada bawah postingan, jika sudah ada navigasi next prev maka sudah berhasil, jika belum ada, coba Inspect Element / Periksa Elemen pada title / judul postingan, Contoh :

• Pada contoh diatas, template Saya menggunakan h3 untuk judul/ title postingan. Maka perlu sobat ganti h1:first pada kode Jquery sebelumnya menjadi h3:first.

Begitu saja cara membuat navigasi tautan next prev dengan judul postingan pada blogger. Sekian informasi yang dapat Saya sampaikan, semoga dapat bermanfaat. Terima Kasih.