Cara Mengganti Link Newer Post dan Older Post jadi Judul Posting PART II

Sebenarnya Link Newer Post dan Older Post ( Nextprev ) kalau di biarin begitu saja tidak masalah, Karena ketika pembaca mengklik tautan NEWER maka akan di tautkan ke halaman artikel yang lebih baru dari halaman yang terbuka, begitu pula sebaliknya. Yang  menjadi masalah adalah, pembaca tidak tahu halaman berikutnya itu membahas tentang apa.  Di sinilah kadang kita merasa terjebak. Apalagi jika blog yang kita baca adalah blog gado-gado di mana kadang artikel yang satu dengan artikel yang lain tidak saling berhubungan.  

Dengan memikirkan kenyamanan pembaca inilah maka sebaiknya kita mengganti navigasi Postingan Lama dengan Postingan Baru dengan judul postingan itu sendiri. Bagaimana caranya? Berikut ini akan membantu anda step by step cara merubah navigasi Postingan lama dan Postingan baru dengan Judul Postingan.

Cara Merubah Newer Post dan Older Post ( Nextprev ) sebenarnya gampang gampang susah beda dengan Artikel yang pertama yang saya terbitkan sebelum ini. Jika anda berminat untuk mengganti navigasi Newer Post dan Older Post ( Nextprev ) dengan judul postingan dapat mengikuti tutorial berikut ini:

Langkah Pertama

1. Login ke akun blogspot Anda.
2. Pilih Template → Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya back-up dulu template Anda. Kemudian simpan dalam hardisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan, Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Masukkan script berikut di atas </head>

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

Perhatikan pada script jQuery ajax di atas  jika Anda memiliki versi 1.7.1 ke atas pilih salah satu jQuery dengan versi yang lebih baru.

Kemudian tambahkan script berikut di atas </body>

<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>

Ketika menampilkan judul posting yang panjang, maka tampilan navigasi Newer Post dan Older Post ( Nextprev ) akan berantakan. Bagaimana cara memperbaikinya? dengan menmbahkan beberapa atribut dalam CSS blog-pager. Copas kode di bawah ini dan pasang di atas kode ]]></b:skin>

#blog-pager-newer-link,
#blog-pager-older-link {
width: 28%;
}
#blog-pager-newer-link {
text-align: left;
}
#blog-pager-older-link {
text-align: right;
}

Simpan dulu dan lihat hasilnya sebelum melangkah lebih jauh lagi, kalau belum berhasil coba ulangi lagi dan yang sudah berhasil kita lanjut ke step berikutnya.

Dimana posisi yang baik untuk meletakkan blog-pagernya? Kembali kepada selera masing-masing. saya akan share caranya memindahkannya, yang awalnya berada di bawah komentar postingan  kita pindahkan ke atasnya komentar postingan.

<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>

Perhatikan baik - baik kode diatas warna merah itu merupakan kode yang harus di cari (untuk mempercepat pencarian tekan CTRL + F), Kalau sudah ketemu tambahkan Kode warna biru susunannya seperti yang tampak pada kode di atas.

<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>

Selanjutnya copas (copy & paste) kode di atas tepat di di bawah kode berikut :

<b:includable id='comment_picker' var='post'>

Hasilnya nanti seperti di bawah ini :

<b:includable id='comment_picker' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:elseif cond='data:post.showThreadedComments'/>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>

Simpan template & sekarang blog-pager Anda telah berpindah di atas komentar. Untuk memperbaiki tampilannya, Anda tinggal melakukan improvisasi sendiri.hehehe

Apabila ingin membuat tampilan yang berbeda, Anda bisa melakukan beberapa kostumisasi, seperti pada ulasan di bawah ini:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'><h2>POSTING BARU</h2></span>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>POSTING BARU</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-right'><h2>POSTING LAMA</h2></span>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>POSTING LAMA</a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'>BERANDA</a>

Kode yang berwarna merah yang harus dicari & warna biru merupakan kode yang harus ditambahkan. Kurang lebihnya seperti ini nanti jadinya

Demikian Cara Mengganti Link Newer Post dan Older Post jadi Judul Posting PART II, Jika ada yang belum di pahami silahkan tinggalkan pesan di kotak komentar. Semoga bermanfaat.