Cara Mengganti Link Newer Post dan Older Post Menjadi Judul Posting

Cara Mengganti Posting Lama dan Posting baru dengan Judul Postingan di Blogspot. Seringkali kita menemukan template dengan navigasi yang simple di mana navigasi postingan lama dan postingan baru di letakan di bawah komen dengan judul <- NEWER (Postingan Baru) atau Older-> (Postingan Lama).  

Secara umum hal ini sebenarnya tidak masalah.  Karena ketika pembaca mengklik tautan NEWER maka akan di tautkan ke halaman artikel yang lebih baru dari halaman yang terbuka, begitu pula sebaliknya. Yang  menjadi masalah adalah, pembaca tidak tahu halaman berikutnya itu membahas tentang apa.  Di sinilah kadang kita merasa terjebak. Apalagi jika blog yang kita baca adalah blog gado-gado di mana kadang artikel yang satu dengan artikel yang lain tidak saling berhubungan.  

Dengan memikirkan kenyamanan pembaca inilah maka sebaiknya kita mengganti navigasi Postingan Lama dengan Postingan Baru dengan judul postingan itu sendiri. Bagaimana caranya? Berikut ini akan membantu anda step by step cara merubah navigasi Postingan lama dan Postingan baru dengan Judul Postingan.

Cara Merubah Postingan Lama dan Postingan Baru sebenarnya sangat mudah. Jika anda berminat untuk mengganti navigasi Posting baru dan Posting lama dengan judul posting dapat mengikuti step by step langka berikut ini:

1. Pastikan ada kode jQuery di template blog Anda. Jika belum ada, pasang di atas </head>. Ini kodenya:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2. Kalau sudah jangan lupa klik Save
3. Masuk ke Layout > pilih HTML JavaScript

4. Judul kosongkan
5. Copas kode berikut ini di kolom Content:

<style type="text/css">
.home-link{display:none}
#blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;}
#blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}
</style>
<script type="text/javascript">
$(document).ready(function(){
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 + "\u2192");//rgt
});
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:first").text();
$("a.blog-pager-newer-link").text("\u2190" + newerLinkTitle);
});
});
</script>

Silahkan edit beberapa kode di atas sesuai templete blog anda, diantaranya :

font-size:12px (untuk merubah ukuran huruf, ganti 12px sesuai keinginan)
width:300px (lebar dari judul yang ditampilkan, ganti 300px sesuai keinginan)
font-family:Arial, sans-serif (ganti sesuka anda, misal Georgia, Trebuchet MS, Verdana, dll)

6. Save dan lihat hasilnya.

Gimana cukup mudah kan...!!! Semoga Bermanfaat.!