Mengganti Next-Prev Navigasi Dengan Judul Post

Mengganti Next-Prev Navigasi Dengan Judul Post | Tutorial Blog

Mengganti Next-Prev Navigasi Dengan Judul Post | Tutorial Blog

Sebelumnya saya pernah posting tentang Mengganti Navigasi Next-Prev dengan Image. Untuk kali ini saya akan berbagi cara Mengganti Next-Prev Navigasi Dengan Judul Post.

Navigasi next-prev yang menggunakan judul post cukup memancing para pembaca dan pengunjung blog untuk melihat artikel sebelum dan sesudah dari post yang sedang dibaca, karena yang tampil adalah judul artikelnya. Trik ini belum terbukti dapat mengoptimalkan seo, namun secara logika trik ini cukup berhubungan dengan seo karena jika kita ganti next-previous dengan judul post sesudah dan sebelumnya, mungkin ada pengunjung yang tertarik untuk membaca dan mengklik judul tersebut, otomatis jumlah pageviews akan bertambah.

Berikut cara Mengganti Next-Prev Navigasi Dengan Judul Post :

1. Login ke blogger, pilih Rancangan/Design, kemudian pilih Edit HTML, lalu beri centang expand template widget.
   Tips : Biasakan membackup / mendownload template anda terlebih dulu sebelum meng-edit template.
2. Cari kode berikut ini dibawah kode ]]></b:skin>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">

   </script>
   Ket : Jika belum ada Copy kode tersebut dan paste dibawah kode ]]></b:skin>
3. Save template Anda
4. Selanjutnya pilih Elemen Laman / Page Element, klik Tambah Gadget / Add a Gadget dan pilih HTML/Javascript, lalu letakan kode dibawah ini pada area konten widget.
   <style type="text/css">

   #blog-pager-newer-link {width:200px;text-align:left;}

   #blog-pager-older-link {width:200px;text-align:right;}

   </style>

   <script type="text/javascript">

   $(document).ready(function(){

   var newerLink = $("a.blog-pager-newer-link").attr("href");

   $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

   var newerLinkTitle = $("a.blog-pager-newer-link").text();

   $("a.blog-pager-newer-link").text("<< " + newerLinkTitle);

   });

   var olderLink = $("a.blog-pager-older-link").attr("href");

   $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

   var olderLinkTitle = $("a.blog-pager-older-link").text();

   $("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt

   });

   });

   </script>
5. Klik Save dan lihat navigasi pager blog Sobat.

Sekian trik untuk Mengganti Next-Prev Navigasi Dengan Judul Post.