Cara Mengganti Older Post & Newer Post dengan Link Judul

Apa yang Anda pahami dari judul diatas? Untuk lebih jelasnya Perhatikan gambar berikut!

Saya yakin pembaca sudah mengerti, ok kita langsung saja cari tahu bagaimana cara Mengganti Next-Prev Navigasi Dengan Judul Post, yang pada dasarnya hanya dengan tiga langkah :

1. Menambahkan Kode jQuery
   Hal ini tidak perlu dilakukan, apabila dalam template Anda sudah ada kode jQuery, Ok, kita cek dulu :
   
   1. Login ke blogger, pilih Template, kemudian pilih Edit HTML,
   2. Cari kode berikut ini dibawah kode ]]></b:skin> atau setelah kode </head>; ingat supaya cepat didapat pakai bantuan CTRL+F!
      
      <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 di atas ! kemudian paste dibawah kode ]]></b:skin> atau setelah kode </head>
   3. Save template Anda
2. Menambahkan Kode di Widget HTML/JavaScript
   Setelah menyelesaikan langkan kedua diatas selanjutnya :
   
   1. klik "Kembali/Back" lalu pilih Tata Letak/Page Element, klik Tambahkan Gadget dan pilih HTML/Javascript, lalu copy paste kode dibawah ini pada area konten.
      
      <style type="text/css"> #blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;font-family:Arial, sans-serif;} #blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;font-family:Arial, sans-serif;} </style><br /><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>
      
   2. Klik Simpan/Save lalu buka blog Anda dan lihat perubahan yang terjadi pada navigasi pager blog Anda di bawah kolom komentar.
3. Kostumisasi
   Sebenarnya dengan dua langkah diatas tujuan sudah tercapai tapi untuk kostumisasi atau penyesuaian dengan blog Anda, silahkan edit kembali gadget HTML/Javascript tempat Anda meletakkan kode di atas lalu ganti beberapa kode tersebut sesuai selera, diantaranya :
   
   • font-size:12px (untuk merubah ukuran huruf, ganti 12px sesuai keinginan)
   • width:200px (lebar dari judul yang ditampilkan, ganti 200px sesuai keinginan)
   • font-family:Arial, sans-serif (ganti sesuka anda, misal : Georgia, Trebuchet MS, Verdana, dll)
   • .text("<< " + newerLinkTitle); (untuk merubah simbol newer ganti "<<" sesuka anda,
     misal :
     
     • Kode : \U25C0 Simbol : ◀
     • Kode : \U2190 Simbol : ←
     • Kode : \U21A9 Simbol : ↩
     • Kode : \U219A Simbol : ↚
     • Kode : \U219C Simbol : ↜
     • Kode : \U219E Simbol : ↞
     • Kode Simbol lainnya bisa cek disini
   • .text(olderLinkTitle + " >>"); (untuk merubah simbol older ganti ">>" sesuka anda,
     misal :
     
     • Kode : \U25B6 Simbol : ▶
     • Kode : \U2192 Simbol : →
     • Kode : \U21AA Simbol : ↪
     • Kode : \U219B Simbol : ↛
     • Kode : \U219D Simbol : ↝
     • Kode : \U21A0 Simbol : ↠
     • Kode Simbol lainnya bisa dilihat disini!

---

Sumber :

• Mengganti Posting Lama dan Posting Baru Menjadi Judul
• Mengganti Next-Prev Navigasi Dengan Judul Post | Tutorial Blog