Cara Mengganti Older Post & Newer Link dengan Judul Posting Blog

Cara Mengganti Older Post & Newer Link dengan Judul Posting Blog

Mengganti Older Post & Newer Link dengan Judul Posting Blog dimaksudkan agar lebih seo dan user friendly --lebih mudah diindeks mesin telusur dan ramah pengguna karena jelas posting berikutnya atau sebelumnya tentang apa, dibandingkan hanya berupa "older post" atau "newer post" sebagaimana di template bawaan blogger.

Contoh atau demonya seperti di blog yang sedang Anda baca ini. Di bagian bawah posting, sebelum Related Posts.

Cara Mengganti Older Post & Newer Link dengan Judul Posting Blog

1. Pasang Link ke jQuery
Copas kode berikut ini di atas kode </head>

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

Jika sudah ada, gak usah dipasang lagi.

2. Pasang Kode CSS
Simpan di atas kode </head>

<style type='text/css'>
.halaman{padding:5px 0;background:#fff;border-top:1px solid #ccc;margin:10px 0 0}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#48d;}
.pager-title-left,.pager-title-right{font-family:'Oswald',sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}

</style>

3. Pasang HTML/XML
Copas di atas kode <data:post.body/> yang kedua atau ketiga, atau di atas kode <div class='related posts'>

<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Previous</span><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'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
You are reading the newest post
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Next</span><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'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
You are reading the latest post
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>

4. Pasang Kode JavaScript
Simpan di atas kode </body>

<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);
    });
    });
    </script>

5. Tambahkan Kode Tag Kondisional
Penambahan kode berikut ini agar  Older Post & Newer Link dengan Judul Posting Blog hanya muncul di halaman dalam, tidak muncul di halaman depan.

Cari kode <b:includable id='nextprev'> dan akan ditemukan kode berikut ini:

          <div class='blog-pager' id='blog-pager'>

            BANYAK KODE LAIN DI SINI

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

Tambahkan kode tah kondisional (warna merah) sehingga menjadi:

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <div class='blog-pager' id='blog-pager'>

            BANYAK KODE LAIN DI SINI

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

6. Save Template!

Demikian Cara Mengganti Older Post & Newer Link dengan Judul Posting Blog.*