Cara Membuat Previous Next Page Pada Blog

Cara Membuat Previous Next Page Pada Blog - Halaman Navigasi Angka pada blogger sangat penting selain untuk mengetahui jumlah halaman yang berisi posting artikel, kita juga bisa melompat dari satu halaman ke halaman lain atau membuka pada halaman tertentu di blog. Selain itu, navigasi nomor halaman juga dapat membuat blog Anda terlihat lebih menarik karena Anda dapat membuat variasi yang berbeda.

Cara Membuat Previous Next Page Pada Blog

Salam kreatif untuk Anda, blogger yang setia mengunjungi Blodroi. Dalam tutorial ini, BloDroi akan menunjukkan kepada Anda bagaimana membuat tombol berikutnya dan sebelumnya di blog Anda sehingga blog Anda terlihat lebih keren dan sempurna.
CARA 1:

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>

3. Copy Paste 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>

4. Copy Paste kode 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh82WIvnbnw3oCEnOFVWDwwTg0GQuwYQVU5wwcJssXkb1f-9jehbKeo5RGLyj7zV1boRKCBo9RtT_j4fOTcvq6TLLOt5zX5dvwHiG2TuTDK4DRyPj0zSCZFlzbFMXrLLDlmGhDdzNj-T1Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1ESkmyWRY5QXdt7UrVeEnRRrGjTh2SbYu7kSPxMTGulr8H7lz1HoxHMkT25X1bMbORP6F-1FWYVp5dnZwrUU20clQCgbBjoqs2jIxrf7ykg703DGGSNvLjAIbM8VOFFci9-s69SX0Zg/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}

5. Atau 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh82WIvnbnw3oCEnOFVWDwwTg0GQuwYQVU5wwcJssXkb1f-9jehbKeo5RGLyj7zV1boRKCBo9RtT_j4fOTcvq6TLLOt5zX5dvwHiG2TuTDK4DRyPj0zSCZFlzbFMXrLLDlmGhDdzNj-T1Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1ESkmyWRY5QXdt7UrVeEnRRrGjTh2SbYu7kSPxMTGulr8H7lz1HoxHMkT25X1bMbORP6F-1FWYVp5dnZwrUU20clQCgbBjoqs2jIxrf7ykg703DGGSNvLjAIbM8VOFFci9-s69SX0Zg/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>

6. Simpan template

CARA 2:

1. Template > Edit HTML
2. Copy Paste 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. Copy Paste 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. Copy Paste 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> 

6. Simpan

CARA 3:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh82WIvnbnw3oCEnOFVWDwwTg0GQuwYQVU5wwcJssXkb1f-9jehbKeo5RGLyj7zV1boRKCBo9RtT_j4fOTcvq6TLLOt5zX5dvwHiG2TuTDK4DRyPj0zSCZFlzbFMXrLLDlmGhDdzNj-T1Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1ESkmyWRY5QXdt7UrVeEnRRrGjTh2SbYu7kSPxMTGulr8H7lz1HoxHMkT25X1bMbORP6F-1FWYVp5dnZwrUU20clQCgbBjoqs2jIxrf7ykg703DGGSNvLjAIbM8VOFFci9-s69SX0Zg/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

Demikian informasi tentang Cara Membuat Previous Next Page Pada Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.