Assalamu'alaikum.
Teman blogger mungkin sering melihat sebuah blog yang menampilkan navigasi untuk postingan lama dan baru dengan judul postingan. Hal ini tentu saja akan mempermudah pengunjung blog untuk melihat postingan sebelum dan sesudahnya, 'kan. Lalu, bagaimana ya caranya?
Tidak perlu khawatir. Setelah menemukan tipsnya dari hasil pencarian di internet, saya akan berbagi tips bagaimana cara merubah teks navigasi postingan lama dan baru dalam blog kalian hanya dengan beberapa langkah berikut ini.
Menambahkan kode jQuery
Pertama-tama, kita perlu menambahkan kode jQuery atau JavaScript pada template blog.
1. Template > Edit HTML
2. Cari kode </head> kemudian paste-kan kode berikut tepat di atas kode </head>
1. Template > Edit HTML
2. Cari kode </head> kemudian paste-kan kode berikut tepat di atas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Menambahkan kode di Widget HTML
Setelah itu, kita perlu menambahkan kode JavaScript tertentu dengan memasukkan widget HTML pada laman Layout.
1. Layout > Add a Gadget
2. Pilih HTML kemudian masukkan kode berikut
1. Layout > Add a Gadget
2. Pilih HTML kemudian masukkan kode berikut
<!-- Replacing Older and Newer post Start -->
<!-- crawlist.blogspot.com -->
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;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>
<!-- Replacing Older and Newer post End -->
Widget HTML tersebut dapat diletakkan di bawah postingan blog atau diletakkan pada tempat yang kalian kehendaki.
Setelah selesai, silahkan lihat di bawah kolom postingan terakhir atau kolom komentar di blog kalian. Selamat mencoba!
No comments:
Post a Comment