Cara Menciptakan Previous Next Page Pada Blog

FAST DOWNLOADads
Download
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 sanggup melompat dari satu halaman ke halaman lain atau membuka pada halaman tertentu di blog. Selain itu, navigasi nomor halaman juga sanggup menciptakan blog Anda terlihat lebih menarik alasannya yaitu Anda sanggup menciptakan variasi yang berbeda.
Cara Membuat Previous Next Page Pada Blog Cara Membuat Previous Next Page Pada Blog

Cara Membuat Previous Next Page Pada Blog
Salam kreatif untuk Anda, blogger yang setia mengunjungi Blodroi. Dalam tutorial ini, BloDroi akan mengatakan kepada Anda bagaimana menciptakan 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 isyarat 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>
  1. Copy Paste isyarat berikut ini di atas isyarat <div class='related posts> atau <div id='related post> atau di bawah isyarat <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>
  1. Copy Paste isyarat berikut ini di atas isyarat ]]</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/AVvXsEge-hhDrYEa9R2HwRmmtiB7ZGSzVq0dkLTII4JqAcKVCqXToeCHiaSbFQWIMXY252lQu-FDwVZ5ObB7vmkg-EXbpNqqxC-Oo5a6M1FQqmIF57gWR8UT52_i6Z8LUzqFOPBaqoFq24r30YY/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/AVvXsEjEytrlHIdbZDaAG3SOvtMdmA6AzmzKRhZhnGNnDDxBnLVmAcsa6tx9jz0758ugVtlVsYRjgvT7px86ezLi8SJ7pB_LoUHd7S9AuQTmJ3bd1QPO3P0CAws-RQPGFxWBeGxT5-8rXQY7EEs/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}
  1. Atau sanggup juga dengan isyarat berikut ini, simpan di atas isyarat </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/AVvXsEge-hhDrYEa9R2HwRmmtiB7ZGSzVq0dkLTII4JqAcKVCqXToeCHiaSbFQWIMXY252lQu-FDwVZ5ObB7vmkg-EXbpNqqxC-Oo5a6M1FQqmIF57gWR8UT52_i6Z8LUzqFOPBaqoFq24r30YY/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/AVvXsEjEytrlHIdbZDaAG3SOvtMdmA6AzmzKRhZhnGNnDDxBnLVmAcsa6tx9jz0758ugVtlVsYRjgvT7px86ezLi8SJ7pB_LoUHd7S9AuQTmJ3bd1QPO3P0CAws-RQPGFxWBeGxT5-8rXQY7EEs/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>
  1. Simpan template

CARA 2:
  1. Template > Edit HTML
  2. Copy Paste isyarat berikut ini di atas  isyarat </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>
  1. Copy Paste isyarat HTML berikut ini di atas isyarat <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'/>
  1. Copy Paste isyarat JavaScript berikut ini di atas isyarat </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>
  1. Tambahkan Tag Kondisional berikut ini di atas isyarat <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>
  1. Simpan

CARA 3:
  1. Template > Edit HTML
  2. Copas isyarat berikut ini atas isyarat <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-->
  1. Copas isyarat CSS berikut ini di bawah isyarat </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/AVvXsEge-hhDrYEa9R2HwRmmtiB7ZGSzVq0dkLTII4JqAcKVCqXToeCHiaSbFQWIMXY252lQu-FDwVZ5ObB7vmkg-EXbpNqqxC-Oo5a6M1FQqmIF57gWR8UT52_i6Z8LUzqFOPBaqoFq24r30YY/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/AVvXsEjEytrlHIdbZDaAG3SOvtMdmA6AzmzKRhZhnGNnDDxBnLVmAcsa6tx9jz0758ugVtlVsYRjgvT7px86ezLi8SJ7pB_LoUHd7S9AuQTmJ3bd1QPO3P0CAws-RQPGFxWBeGxT5-8rXQY7EEs/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-->
  1. Ganti isyarat <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>
  1. Save Template
Demikian isu wacana Cara Membuat Previous Next Page Pada Blog. Maaf kalau ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap isu ini bermanfaat.
FAST DOWNLOADads
| Server1 | Server2 | Server3 |
Download
Next Post Previous Post