Mengubah Newer older post menjadi Judul di Blogspot

Mengubah Newer older post menjadi Judul di Blogspot

Di dalam blogspot di bawah judul postingan kita melihat tulisan "Newer Post" ataupun "Older Post". Banyak cara kita untuk mengubah tulisan newer/older post, ada yang merubah tulisan tersebut dengan Text ataupun gambar.

Artikel Sebelumnya yang telah dibuat :

1. Cara Membuat Artikel Baru
2. Tips Mengganti Older Post Atau Newer Post Menjadi Angka.

Nah disini kita akan membahas bagai mana cara Mengubah Newer older post menjadi Judul di Blogspot, seperti gambar dibawah ini :

Caranya mudah, Silahkan anda login terlebih dahulu ke akun blogger anda. Setelah akan muncul tampilan seperti gambar dibawah ini:

Pilih TEMPLATE -> EDIT HTML

Setelah itu letakkan kode berikut ini sebelum </head>

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

Setelah itu Simpan Template Anda. 

Kemudian Pilih LAYOUT  -> Add Gadget -> Tambahkan HTML/JavaScript  

Seperti gambar dibawah ini

Setelah itu masukkan kode dibawah ini ke Gadget HTML yang anda tambahkan

<style type="text/css">
#blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;}
#blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;}
</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 + " >>");//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("<< " + newerLinkTitle);
});
});
</script>

Anda Dapat mengubah ukuran font dan lebar area link sesuai dengan selera anda pada huruf yang berwarna Merah.

Jika Anda merasa repot ada yang langkah yang lebih mudah

Pilih TEMPLATE -> EDIT HTML

Setelah itu letakkan kode berikut ini sebelum </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> <script src='http://anvity-host.googlecode.com/files/older-newer.js' type='text/javascript'/>

Simpan Template dan Selesai.



Selamat Mencoba dan semoga berhasil.

Sumber script : themasdoyok.com