Pasang Navigasi dengan Judul Postingan Blogspot

By nurhamim86 Post a Comment

Secara umum navigasi pada blog hanya menampilkan tombol "Next" dan "Previous" saja bahkan hanya tanda $ \Leftarrow $ atau $ \Rightarrow $, sehingga kita tidak tahu artikel berikutnya atau sebelumnya itu membahas tentang apa. Dengan mengganti tombol atau tanda tersebut dengan menggunakan judul postingan tentunya akan terlihat lebih menarik dan lebih jelas. Contoh penerapannya bisa Anda lihat pada bagian bawah blog ini. Pada artikel kali ini saya akan mencoba untuk membahasnya.

Cara Membuat Tombol Navigasi Blog

Langkah pertama masuk ke pengaturan tema Blogspot, kemudian ke Edit HTML.
Pastikan blog anda sudah dilengkapi dengan library JQuery. Untuk mengeceknya dengan mencari kode berikut sudah ada pada blog atau belum.

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

Jika ternyata belum ada, Anda bisa menambahkan kode tersebut di bawah kode <head> pada blog Anda.

Carilah kode <data:post.body/> pada blog Anda kemudian sisipkan kode berikut ini tepat di bawahnya.

<b:if cond='data:view.isPost'>
<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'>
        <span class='pager-title-left'>Previous</span><br/>
      <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'>Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
Anda berada pada postingan terbaru
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Next</span><br/>
      <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'>Next Post</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
Anda berada pada postingan terawal
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
<script type='text/javascript'>
//Pager
$(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; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if>

Selanjutnya untuk mengaturan tampilan, letakkan kode CSS berikut ini di atas </head>.

<b:if cond='data:view.isPost'>
<style type='text/css'>
.halaman{padding:5px 0;background:$(posts.background.color);border-bottom:4px dotted rgba(121,128,136,0.24);border-top:4px dotted rgba(121,128,136,0.24);margin:10px 0 0}
.halaman-kiri{line-height:19px;font-weight:600;font-size:16px;font-family: Google Sans;width:49%;float:left;margin:0;text-align:left;transition:all .3s ease-out;}
.halaman-kanan{line-height:19px;font-weight:600;font-size:16px;font-family: Google Sans;width:49%;float:right;margin:0;text-align:right;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#444!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:17px;font-family: Google Sans;font-weight:700;background:none;text-decoration:none}
.pager-title-left,.pager-title-right{font-family: Google Sans;font-size:20px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out;color:$(posts.text.color)}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:0}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{color:#2675A6!important;float:left;line-height:19px;padding:0 0 10px;font-size:16px;background:none;font-weight:600}
#blog-pager-older-link a{color:#2675A6!important;float:right;line-height:19px;padding:0 0 10px;font-size:16px;background:none;font-weight:600}
  #blog-pager-newer-link a:hover {color:#636363!important;}
  #blog-pager-older-link a:hover {color:#636363!important;}
</style>

Kode CSS tersebut bisa diedit agar sesuai dengan blog Anda.

Simpan perubahan tema yang Anda lakukan, untuk bisa melihat hasil kerja Anda.

Contoh Hasil

Jika Anda berhasil memasangnya dengan baik, navigasi blog akan tampak sebagai berikut ini.

Demikian tutorial sederhana yang bisa saya bagikan, jika ada masalah silakan corat-coret pada kolom komentar. Semoga berhasil dan bermanfaat.

nurhamim86 A Mathematics Teacher who also likes the IT world.

MathBlog

Pasang Navigasi dengan Judul Postingan Blogspot

Cara Membuat Tombol Navigasi Blog

Contoh Hasil

Post a Comment for "Pasang Navigasi dengan Judul Postingan Blogspot"