Cara Baru & Mudah Membuat Blog Pager Next-Prev dengan Judul Posting

Baca Juga

Cara Baru & Mudah Membuat Blog Pager Next-Prev dengan Judul Posting

MEMBUAT blog pager Next-Prev dengan Judul Posting yaitu mengganti text link Older Post, Home, Newer Post atau Posting Lama, Beranda, Posting Terbaru dengan Judul Tulisan. Seperti gambar berikut ini:

Cara baru dan termudah membuat blog pager Next-Prev dengan Judul Posting ini sudah CB ujicoba dan diterapkan dengan sukses di blog demo CB Newspaper dan demo Template SEO Friendly lainnya.

Link teks berupa tulisan older-post, home, newer-post merupakan bawaan blogger yang biasa muncul di bawah kotak komentar.

Karena jarang digunakan pembaca, khususnya karena linknya "gak jelas" dalam pengertian tidak user friendly, maka banyak desain blog mengubahnya menjadi judul posting.

Menjadikan blog pager sebagai Next Previous plus Judul Posting akan menjadikan blog semakin user firnely, tentu juga menjadikan blog lebih SEO Friendly.

Cara Baru & Mudah Membuat Blog Pager Next-Prev dengan Judul Posting

1. Klik "Template" > "Edit HTML"
2. Copas dan simpan kode berikut ini di atas kode <div id='related-posts'>

<!-- Blog Pager New Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
<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>
<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if>
<!-- Blog Pager New End -->

3. Save Template!

Lakukan perubahan pada kode css (lebar/tinggi dll) jika ada yang kurang "pas".

GAGAL?
Jika tidak berhasil diterapkan di template Anda, maka berarti cara di atas tidak cocok :) Silakan coba dengan cara lainnya di Cara Membuat Next-Prev Judul Posting.

Jika masih gagal juga, Ganti Template saja atau Serahkan pada Ahlinya :) Good Luck! (http://www.contohblog.com).*