Cara mudah merubah Next Prev menjadi judul postingan

Untuk meningkatkan SEO blog yang dasar adalah menambahkan artikel terkait dibawah postingan dan yang lain sebagainya.

Tahukah kamu menambah fitur next dan prev berupa judul postingan adalah sama pentingnya untuk SEO blog kita.

Saya bukanlah ahli SEO
jika ditanya apa itu kepanjangan dari SEO ? Sudah pasti saya lupa menjawabnya karena .

Bagi saya SEO bukan sekedar tau artinya,
Lebih bagus tau cara penerapannya dari pada cuma artinya.
Karena gak semua orang tau penerapan untu mengoptimalkan blog di alat pencari google dan sebagainya.

Baiklah kita akan merubah Next post dan Previous post menjadi judul post.

Cara mudah merubah Next Prev menjadi judul postingan

Pastikan dulu blog kamu sudah memasang jQuery.
Kamu bisa coba baca ini :
Trik sederhana mengakali script JQuery untuk meringankan loading blog

Jika sudah memasang jQuery, lanjut ke langkah berikutnya.

pasang css ini ke kumpulan css kamu

.home-link {
display:none;
}
#blog-pager-newer-link {
font-size:12px; 
width:45%;
float:left; 
text-align:left;
}
#blog-pager-older-link {
font-size:12px;
width:45%;
float:right; 
text-align:right;
}

Sesuaikan dengan selera dan skill cssmu

script merubah next prev menjadi judul post

pasang script ini di atas kode </body>

<script type="text/javascript">
$(document).ready(function(){
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);
});
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);
});
});
</script>

Script diatas mengganti next prev menjadi judul post postingan namun disemua halaman.

Nah selanjutnya tinggal penerapan dimana kamu mau menampilkannya.

Saya contohkan saya akan menampilkannya hanya dihalaman item posting.
Maka saya membungkus script diatas dengan tag conditional kusus di halaman item posting, seperti ini hasilnya

<!-- kondisi item post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type="text/javascript">
$(document).ready(function(){
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);
});
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);
});
});
</script>

</b:if> 

Kali ini Script akan bekerja dan merubah next prev menjadi judul dan hanya di halaman item post.

Sampai disini kamu berhasil membuat next prev menjadi judul postingan yang hanya di halaman post

Tapi kok dia di bawah banget toh ?
Maunya saya dia dibawah postingan / dibawah artikel terkait

Pengen menaruh di bawah/atas kode tertentu ?
Gampang, kita modifikasi elemen pada paket next prevnya (incudable)
temukan paket next prev nya
Kodenya biasanya seperti ini dalam kebanyakan di template blogger

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    ...kode isi next prev standart...
  </div>
  <div class='clear'/>
</b:includable>

Kita akan membuat dua tipe tampilan.
1. Tampilan standart jika selain di halaman item post dan
2. Tampilan berupa judul ketika di halaman post

maka kita akan membiarkan kode next prev yang standart dan menambahkan kode next prev judul dengan pembungkus kondisi / tag conditional di halaman item post, jadilah seperti ini :

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>

<!-- kondisi selain ( != ) item post-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<!-- next prev standart -->
    ...kode next prev standart...

<b:else/> <!-- kondisi item post-->

<!-- next prev + Judul -->
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
&#8592; NEXT<br/>
      <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'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
PREV &#8594; <br/>
      <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'><data:olderPageTitle/></a>
      </span>
    </b:if>

</b:if>

  </div>
  <div class='clear'/>
</b:includable>

Nah kita sudah memodifikasi paketnya.
Dari hasil diatas maka dapat di artikan kalau :

1. Next Prev tampil standar jika berada di selain halaman item post
2. Next Prev tampil berupa judul jika di halaman item post

Nah karena kita akan meletakkannya di suatu tempat yang kita inginkan, maka kita biarkan next prev standart namun kita sembunyikan ketika berada di halaman post

Sekarang kita cari kode pemanggilnya (include) :

<b:include name='nextprev'/>

Karena terlalu dibawah, kita sembunyikan dia jika berada di halaman post.
Maka bungkus dia dengan kode pengecualian seperti ini :

<!-- kondisi selain ( != ) item post-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:include name='nextprev'/>
</b:if>

Dia akan muncul selain di item post.

Selesai sudah menyembunyikan next prev di halaman post yang terlalu di bawah tadi.
Selanjutnya menaruh dimana next prev judul ingin kamu tampilkan.
Misalnya dibawah postingan pass, maka taruh script pemanggil dibawah kode
<data:post.body> yang berada pada pembungkus kondisi item post.

Skema contohnya seperti ini :

<!-- kondisi item post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <!-- isi post -->
    <data:post.body> 

    <!-- next prev judul-->
    <b:include name='nextprev'/>

</b:if>

Dimanapun kamu mau menampilkannya.
entah itu di atas judul postingan, di atas postingan, diatas komentar, atau di manapun yang penting taruh dia didalam pembungkus kondisi halaman item

Jika kamu masih belum paham tentang paket, pemanggil dan kondisi halaman / tag conditional, kamu bisa baca dan pelajari di sini :
Pengertian, Fungsi dan contoh Tag Conditional Blogger

Artikel ini bukan cuma cara copy paste,
tapi cara yang benar-benar bertujuan supaya kamu akan dan
supaya kamu tau tentang beberapa xml blogger.
Karena belajar itu asik, hanya orang bodoh dan gak mau maju yang tidak mau belajar

Kalau kamu cuma berharap copy paste tanpa mempelajarinya, itu tidak ada bedanya dengan memakai template orang yang kamu rakit ulang. Salam kekreatifitasan

jika ada yang kurang jelas maupun bla bla bla... silahkan coret-coret di kolom komentar.

mungkin juga kamu tertarik untuk membaca ini :

Terima kasih, salam Colongan !

Bantu kami lebih baik lagi.
Apa Reaksi anda tentang blogger :
"Cara mudah merubah Next Prev menjadi judul postingan" ?