Home » » Cara Membuat Navigasi Blog Pager Next - Previous Berupa Judul

Cara Membuat Navigasi Blog Pager Next - Previous Berupa Judul

CARA Mengubah Menu Navigasi atau Blog Pager "Next" dan "Previous" Berupa Judul Postingan sama dengan mengganti link older post (posting lama) & newer posts (posting baru) seperti yang sudah di-share sebelumnya.

Hanya saja, kali ini posisi dan tampilannya berbeda. Posisinya di bawah posting atau artikel. Tampilannya juga ada tambahan teks menu Next & Previous. Contohnya ada di bawah posting ini. Screenshotnya:

Dengan mengubah tampilan blog pager older-link, home, newe-link menjadi Next Previous plus Judul Posting seperti ini, tentu menjadikan blog lebih SEO Friendly dan User Friendly.

CB share tiga cara, silakan pilih salah satu. Yang pertama bisa dilihat di mkr-site. Dua lainnya hasil modif yang sudah berhasil diterapkan di sejumlah blog klien di Layanan Premium.

CARA 1 : Membuat Previous Next Posts Blogger

1. Template > Edit HTML
2. Cari kode  <b:include name='nextprev'/> dan ganti dengan kode ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:include name='nextprev'/> </b:if></b:if>

2. Copas kode berikut ini di atas kode <div class='related posts> atau <div id='related post> atau di bawah kode <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'> <div class='pager-isi'> <b:if cond='data:newerPageUrl'> <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> <b:else/> <span class='linkgrey left'><h6>Next</h6><h5>This is the most recent post.</h5></span> </b:if> <b:if cond='data:olderPageUrl'> <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> <b:else/> <span class='linkgrey right'><h6>Previous</h6><h5>This is the last post.</h5></span> </b:if> </div> </div> <script type='text/javascript'> //<![CDATA[ $(window).load(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').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>'); }); 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').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>'); }); }); //]]> </script> </b:if>


3. Copas kode CSS berikut ini di atas kode ]]</b:skin>


.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}

Bisa juga dengan kode berikut ini, simpan di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
</style></b:if>

4. Save template!

Itu dia Cara Membuat Navigasi Blog Pager Next - Previous Berupa Judul. Jika cara di atas tidak berhasil, coba dua cara lainnya berikut ini.

CARA 2 : Membuat Previous Next Posts Blogger

1. Template > Edit HTML
2. Copas kode berikut ini di atas  kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#blog-pager {border-top: 1px solid #E5E5E5;border-bottom: 2px solid #E5E5E5;margin: 15px 0;padding: 10px 0;width: 98%;}
#blog-pager-newer-link{float:left;width:45%;text-align:left;margin:0;padding:0}
#blog-pager-older-link{float:right;width:45%;text-align:right;margin:0;padding:0}
#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:Arial,sans-serif;font-size:14px;color:#666;text-transform:uppercase;line-height:1.625;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:Arial,sans-serif;font-size:14px;color:#666;text-transform:uppercase;line-height:1.625;font-weight:700}
#blog-pager-older-link a{color:#666;}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover{color:#c00;}
#blog-pager-newer-link a{color:#666;}
</style>
</b:if>

3. Copas kode HTML berikut ini di atas kode <div id='related-posts'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<div id='blog-pager-newer-link'>
    <b:if cond='data:newerPageUrl'>
        <h6>Previous</h6>
      <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>
      <b:else/>
<h6>Previous</h6>
Anda sedang membaca artikel terbaru
    </b:if>
   </div>
<div id='blog-pager-older-link'>
    <b:if cond='data:olderPageUrl'>
        <h6>Next</h6>
      <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>
  <b:else/>
<h6>Next</h6>
Anda sedang membaca artikel terakhir
    </b:if>
   </div></div>
</b:if>
  <div class='clear'/>

4. Copas kode JavaScript berikut ini di atas kode </body>

<script type='text/javascript'>
$(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>

5. Tambahkan Tag Kondisional berikut ini di atas kode <div class='blog-pager' id='blog-pager'> yang ada di bawah kode  <b:includable id='nextprev'> :

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

<!-- Kode Banyak Banget di Sini -->

</b:if></b:if>


Hasilnya seperti ini:

<b:includable id='nextprev'>
<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'>

<!-- Kode Banyak Banget di Sini -->

</b:if></b:if>
</b:include>


6. Save Template!

CARA 3 : Membuat Previous Next Posts Blogger

1. Template > Edit HTML
2. Copas kode berikut ini atas kode <div id='related post'>

<!-- Nexprev -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
 <div class='pager-isi'>
    <b:if cond='data:newerPageUrl'>
          <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>
<b:else/>
<span class='linkgrey left'><h6>Next</h6><h5>This is the most recent post.</h5></span>
         </b:if>
    <b:if cond='data:olderPageUrl'>
       <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>
<b:else/>
<span class='linkgrey right'><h6>Previous</h6><h5>This is the last post.</h5></span>
       </b:if>
 </div>
  </div>
<script type='text/javascript'>
//<![CDATA[
$(window).load(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').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>');
    });
    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').html('<h6>Previous</h6><h5>' + olderLinkTitle +

'</h5>');
    });
});
//]]>
</script>
</b:if>
<!-- Nextprev End-->

3. Copas kode CSS berikut ini di bawah kode </b:skin>

<!-- Blog Pager NextPrev-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border-bottom:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pager-isi a,.pager-isi .linkgrey{width:46%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:105%;font-weight:normal}
a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{padding-left:3.5%;text-align:left}
.pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
.pager-isi h5 {font-size: 14px;font-family: Arial;font-weight: normal}
</style>
</b:if>
<!-- NextPrev End-->

4. Ganti kode <b:include name='nextprev'/> dengan:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:include name='nextprev'/>
</b:if></b:if>

5. Save Template!

Memang rumit cara membuat navigasi blog bager berupa Next - Previous plus Judul di bawah tiap posting blog. Makanya, CB kasih tiga jalan di atas, siapa tahu berhasil salah satunya.

Kalo CB sih, berhasil semua, makanya berani share! Yang kedua diterapkan di blog ini. Cara yang ketiga contohnya ada di MotoGP Crash.

Update Genesis SEO!
Untuk pengguna template premium Genesis SEO, secara khusus CB sudah buatkan tips mengubah link older-post newer-post menjadi next-previous berupa judul posting ini.

Silakan ke TKP:  Cara Mengubah Older-Newer-Post Jadi Next-Previous Judul Posting di Genesis SEO.

Good Luck & Happy Blogging! (http://contohblognih.blogspot.com).*

Thanks for reading & sharing Cara Membuat Navigasi Blog Pager Next - Previous Berupa Judul

Previous
« Prev Post

8 comments:

Comment Page:
  1. Di Cara yang kedua ada yang error mas CB. Tepatnya ada satu kondisi yang kurang. di bagian "a href" tidak ada ">" atau "/>"

    ReplyDelete
    Replies
    1. kan sudah ada < /a > ? Yang mana ya?

      Delete
    2. Mas, kalau style yang kayak di blog ini, cara yang mana itu?

      Delete
    3. sama saya juga ada yg kurang kodenya Mas?
      ini screenshootnya!
      https://2.bp.blogspot.com/-xfH4Il99C9k/Vr2sMqfqEWI/AAAAAAAAACY/-aYjJy8Ec5o/s1600/Screenshot_24.png

      Delete
    4. itu erornya gak ada spasi mas antara tanda ' dan expr nya

      Delete
  2. istimewa bos... yang ketiga yang cocok sama blog saya

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox