Bismillah. Alhamdulillah. Navigasi halaman per artikel biasanya ditampilkan dengan keterangan "Posting Lebih Baru" untuk berpindah halaman pada artikel yang terbaru, dan "Posting Lama" untuk berpindah halaman pada artikel yang lebih lama. Beberapa blogger kemudian menggantinya dengan gambar panah atau gambar lainnya yang mewakili navigasi halaman per artikel. Sedangkan jika kita perhatikan pada platform CMS (misal; Wordpress) navigasi halaman per artikel biasanya berisi judul artikel. Bisakah pengguna Blogger mengubah "Posting Lebih Baru" dan "Posting Lama" dengan judul artikel?
Skenario (X)HTML Navigasi Halaman Per Artikel
Dibawah ini adalah kode (X)HTML dari Blogger, namun tidak akan dijelaskan baris perbaris. Kita hanya akan mengambil bagian pentingnya saja yang punya peranan pada navigasi halaman artikel. Perhatikan kode (X)HTML dibawah ini:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Diantara sekumpulan kode (X)HTML navigasi halaman artikel diatas kita hanya akan mengambil 2 kode yang kemudian dimanipulasi agar mampu menampilkan judul artikel, yaitu:
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' ...><data:newerPageTitle/></a>Kode diatas terdiri dari fungsi:
- class='blog-pager-newer-link' : ini merupakan style CSS yang digunakan untuk mengatur link 'Posting Lebih Baru' baik berupa pengaturan warna, tombol atau gambar background.
- expr:href='data:newerPageUrl' : ini berisi URL 'Posting Lebih Baru' yang kemudian nanti akan diambil URL-nya melalui feed dan dimanfaatkan sebagai tag Anchor Link Judul Artikel pengganti 'Posting Lebih Baru'.
- data:newerPageTitle : kode inilah yang menampilkan kalimat 'Posting Lebih Baru' dan kode ini pula nanti yang akan diganti dengan judul artikel.
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' ...><data:olderPageTitle/></a>
- class='blog-pager-older-link' : ini merupakan style CSS yang digunakan untuk mengatur link 'Posting Lama' baik berupa pengaturan warna, tombol atau gambar background.
- expr:href='data:olderPageUrl' : ini berisi URL 'Posting Lama' yang kemudian nanti akan diambil URL-nya melalui feed dan dimanfaatkan sebagai tag Anchor Link Judul Artikel pengganti 'Posting Lama'.
- data:olderPageTitle : kode inilah yang menampilkan kalimat 'Posting Lama' dan kode ini pula nanti yang akan diganti dengan judul artikel. (Beberapa blogger kemudian mengganti kode ini dengan gambar misal <img src="img/navbaru.png"/>)
Skenario JSON dan jQuery
Dibawah ini adalah script JSON dan jQuery yang digunakan untuk memanipulasi navigasi halaman artikel/item. Namun tidak dijelaskan secara detail, silahkan anda jelaskan dan tulis sendiri pada artikel anda, dan saya akan mencantumkannya sebagai referensi. Jangan lupa tinggalkan informasi ketika anda selesai menerbitkan artikel tentang penjelasan script JSON dan jQuery dibawah ini.
/*!
* jQuery Blogger Item Navigation 1.0
* http://modification-blog.blogspot.com/
* Copyleft 2012, Blogger Tune-Up
* Dual licensed under the MIT or GPL Version 2 licenses.
* Date: Mon May 28 14:54:29 2012 -0500
*/
var JudNav = {};
//Fungsi pengambilan judul artikel melalui feed
function ambilJudNav(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var judul = json.feed.entry[i];
var data = "";
for (var k = 0; k < judul.link.length; k++) {
if (judul.link[k].rel == 'alternate') {
data = judul.link[k].href;
break
}
}
if (data != "") JudNav[data] = judul.title.$t
}
}
//Fungsi penulisan sekumpulan judul feed dengan mengambilnya dari fungsi sebelumnya 'ambilJudNav'
document.write('<script type="text/javascript" src="http://' + window.location.hostname + '/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=ambilJudNav"></' + 'script>');
//Fungsi Pengambilan Anchor, Pengecekan URL dan Penggantian beberapa simbol
function JudulURL(anchor) {
var linkurl = anchor.match(/\/([^\/_]+)(_.*)?\.html/);
if (linkurl) {
linkurl = linkurl[1].replace(/-/g, " ");
linkurl = linkurl[0].toUpperCase() + linkurl.slice(1);
if (linkurl.length > 28) linkurl = linkurl.replace(/ [^ ]+$/, "...")
}
return linkurl
}
//Mengganti 'Posting Lama' dan 'Posting Lebih Baru' dengan fungsi jQuery saat halaman di-load
$(window).load(function () {
window.setTimeout(function () {
var anchor = $("a.blog-pager-newer-link").attr("href");
if (anchor) {
var judul = JudNav[anchor];
if (!judul) judul = JudulURL(anchor);
if (judul) $("a.blog-pager-newer-link").html(judul)
}
anchor = $("a.blog-pager-older-link").attr("href");
if (anchor) {
var judul = JudNav[anchor];
if (!judul) judul = JudulURL(anchor);
if (judul) $("a.blog-pager-older-link").html(judul)
}
}, 500)
});
Integrasi Pada Blog
Dibawah ini integrasi script JSON jQuery pada template Blogger.Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Template - Edit HTML - Lanjutkan"
Langkah 3
Cari kode dibawah ini:
</head>Langkah 4
Masukan (Copy Paste) kode dibawah ini tepat diatas kode pada langkah 4:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>Perhatian: Jika sudah pernah memasang framework jQuery maka kode baris pertama tidak perlu dimasukan.
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.navitem.min.js'/>
Langkah 5
Klik tombol "Simpan Template" dan preview blog anda
Update Script jQuery tanpa Script JSON
Taufik Nurrohman menjelaskan bahwa script diatas cukup membebani load halaman blog dengan analisis pemanggilan feed sebanyak 500 artikel. Dan terima kasih untuk Mas Ireng yang kemudian memberikan solusi terbaiknya dengan membuang script JSON dan hanya menggunakan script jQuery untuk meload URL dan judul artikel. Script dibawah ini adalah solusi atas masalah kelemahan load feed JSON. Pada bagian "Integrasi Pada Blog" langkah 4 silahkan ganti kode menjadi seperti dibawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<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').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>
Kesimpulan
Script ini tidaklah begitu penting untuk digunakan, namun jika ingin tampil beda, tidak ada salahnya diterapkan. Kode yang ditulis tidaklah terlalu banyak sehingga tidak terlalu membebani load halaman blog. Jika dalam penerapan terjadi kegagalan ada kemungkinan terjadi bentrok script pada blog anda. Periksa dengan hati-hati... Dan silahkan modifikasi script diatas sesuai dengan kebutuhan atau mungkin ingin mengembangkannya lebih bagus lagi sesuai karakter diri. Jika merasa lebih nyaman dengan menggunakan hosting file sendiri, silahkan unduh script-nya pada link dibawah ini dan upload pada web hosting miliki sendiri.
Selamat mencoba, berkarya dan semoga berhasil. Happy Blogging :)
