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

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

Next Previous Navigasi dibawah Postingan Blog Dengan Animasi

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: &#39;roboto condensed&#39;,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:&#39;Previous Post&#39;;position: absolute;top:-25px;}
#blog-pager-newer-link:before{content:&#39;Next Post&#39;;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:&quot;\f100&quot;;left: -17px;position: absolute;font-family: fontawesome;}
#blog-pager-newer-link a:after{content:&quot;\f101&quot;;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 :
Inspect Element judul postingan dan temukan kode header yang digunakan
  • 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.

12 komentar

Terimakasih telah berkunjung dan membaca artikel di Blog ini. Tinggalkan kritik, saran, dan pertanyaan pada kolom komentar.

Sumpah Keren itu um, thanks buat tutorialnya ane praktekin dulu dah :)

Balas

masgan mau laporan nih... script udah kepasang di blog saya. tp ada problem masgan. 1) link nya berwarna biru,ga putih. jadinya bentrok ama baground. 2) panah nya ilang ga keren lagi nih. hehehe. bagian mana yang musti saya otak atik nih. maaf banyak nanya mohon di koreksi masgan. ditunggu bantuan nya.

Balas

1. cara ganti warnanya gan, cari kode >> #blog-pager-newer-link a ganti warna >> color: #48D; jadi >> color: #FFF;
2. template agan blum pakai font awesome, coba kopi kode ini diatas </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>

smoga berhasil gan :D

Balas

Gan berat gak ini di blog? tapi memang joss ini tutornya mantep nanget..

Balas

menurut ane gk berat gan, contohnya ya di blog ini :D

Balas

Wah mantep gan ,pengen nyoba di blog saya Radiomaya ,tapi kalo salah soalnya masih kurang paham dengan kode2

Balas

thanks infonya gan, mau saya coba dulu ya

Balas

Thanks infonya, mau ku praktekan dulu

Balas

Kok belum berhasil ya gan ? apa ada yang salah sama blog ane

Balas

akhirnya ketemu juga membuat tautan artikel selanjutnya, terima kasih kang sudah berbagi pengetahuan, sangat bermanfaat untuk sayaa ^^

Balas