Sebenarnya sudah lama saya punya trik mengakali nextprev di Blogger supaya mirip yang ada di Wordpress ini, tapi akhirnya kali ini saya mau bagi saja karena sudah tidak saya terapkan pada blog ini. Trik ini pernah saya gunakan pada blog saya kira kira 5 bula lalu, trik ini juga membawa hal yang cukup positif dimana saat itu pageviews blog saya meningkat. Mungkin karena tampilan nextprev itu sehingga membuat pengunjung mengetahui apa postingan sebelum dan sesudah postingan yang sedang mereka baca. Oke langsung saja, berikut tutorialnya:
1. Login ke Blogger ==> Rancangan ==> Edit HTML.
2. Backup template sobat dengan klik Download Template Lengkap
3. Tambahkan kode berikut sebelu kode </head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>4. Kemudian tambahkan kode berikut sebelum kode </body>
<b:if cond='data:blog.pageType == "item"'>5. Lalu tambahkan kode css berikut sebelum kode ]]></b:skin>
<script type='text/javascript'>
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("<< Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post >><br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if>
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}6. Simpan template sobat.
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
Sekian tutorial kali ini, salam blogger dan wassalam.
wah keren nih tips blognya sobat, terus berkarya sobat...
BalasHapus@Asis Sugiantoiya sob, makasih sudah berkunjung..
BalasHapus