Replace Newer & Older Post Links with Post Titles

Kabar gembira nih sob, datang dari sobat kita berasal dari negara taiwan, namanya Fiona Lan :x Nama blognya ETBlue, kok kayak nama pelem si ET yak ;)) :D Makhluk alien yang lehernya panjang itu sob :-/ Sobat satu kita ini kayaknya gemar mengutak-ngatik daleman kode blogspot. Yah walau kendala ada dalam bahasa, enaknya ngebahas tutorial tuh asal ada gambar dan kode²nya bisa dipaksa mengerti =))
Pada setiap blog kita, pasti ada new post (pos terbaru) dan older post (pos lama) Berada pada dibawah tampilan pos paling akhir dari sebuah blog! Kalau tulisan older post/new post pada blogspot diganti dengan sebuah image itu sudah biasa sobat. Sekarang bagaimana tulisan si new post/older post itu dibikin jadi judul postingan dengan judul pos terkait berikutnya :-" b-)

Dengan bantuan script jQuery dan trik dari sobat kita ini, sekarang kita bisa mendapatkannya sob :) Jika pingin live demonya silahkan meluncur ke my dummies blog Blog Demo, kalau screenshot disini saja :P

Baguuuuuuuuuuuuus kan bisa jadi judul postingan b-) Sip, gaya, full stylish, keren and mentereng...bla bla bla!!! Yu lanjut ah bagaimana caranya bisa gito [..] Ingat trik ini jQuery plugin!!! Jadi pada template sobat sudah harus ada script<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

Kode CSS

Carilah kode ID CSS ini pada template sobat blog-pager-newer-link dan blog-pager-older-link biasanya bersebelahan sih :D Lalu tambahkan atribut kode CSS dengan inimax-width: 200px;
overflow: hidden;
height: 15pxJadi nanti akan seperti ini

#blog-pager-older-link {

<!-- kode CSS bawaan sobat -->

max-width: 200px;
overflow: hidden;
height: 15px
}

#blog-pager-newer-link {

<!-- kode CSS bawaan sobat -->

max-width: 200px;
overflow: hidden;
height: 15px
}

Tinggal menambahkan kode CSS yg berwarna merah tulisannya itu saja sob. Kode itu berfungsi untuk membatasi judul postingan panjang. Jadi dengan menggunakan tambahan kode CSS tersebut judul postingan yg panjang dibatasi agar tidak memanjang nantinya :) Atur saja sesuai selera sobat itu si panjangnnya (max-width) yak :D

jQuery Script

Masalah peletakan, coba didahulukan diletakan diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
$(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:first").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 + " >>");
});
});
//]]>
</script>

jQuery code by: www.bloggersentral.com

Save

Source details can be found here:

• http://etblue.blogspot.com/2011/01/blogger-change-newer-posts-link-and.html
• http://www.bloggersentral.com/2011/01/post-titles-replace-older-newer-post.html

See yah ah ah ah \m/