Cara Menciptakan 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 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 sebab Anda sanggup menciptakan 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 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 aba-aba 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 aba-aba berikut ini di atas aba-aba <div class='related posts> atau <div id='related post> atau di bawah aba-aba <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 aba-aba berikut ini di atas aba-aba ]]</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/AVvXsEg1hPMu5ujIFdBvHLSAHg69yRcddTreOfbQeqBTN_Txgt2vVktyT_ZWnICpnWPc736t7IbWVNIIAfNGUvSMFKIIDqhXuUIDqiNzRvEL9KFysg2JRWgUihLBjitu6F3zvRbGpY8dGdRQpS0/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/AVvXsEg6S47VA3lc04TDibZk6KMtYLrJWulnzOc3VzQw8N4pylwQ2LgwjwHMhz4qXsR_8CxL3OIZdrHq5rW4PubAZBML2diKIxbS6JAoRBfGO7I_xSgKeExqB4l8Tq3iujCfLztDuSzT6I6wvdU/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 sanggup juga dengan aba-aba berikut ini, simpan di atas aba-aba </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/AVvXsEg1hPMu5ujIFdBvHLSAHg69yRcddTreOfbQeqBTN_Txgt2vVktyT_ZWnICpnWPc736t7IbWVNIIAfNGUvSMFKIIDqhXuUIDqiNzRvEL9KFysg2JRWgUihLBjitu6F3zvRbGpY8dGdRQpS0/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/AVvXsEg6S47VA3lc04TDibZk6KMtYLrJWulnzOc3VzQw8N4pylwQ2LgwjwHMhz4qXsR_8CxL3OIZdrHq5rW4PubAZBML2diKIxbS6JAoRBfGO7I_xSgKeExqB4l8Tq3iujCfLztDuSzT6I6wvdU/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 aba-aba berikut ini di atas  aba-aba </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 aba-aba HTML berikut ini di atas aba-aba <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 aba-aba JavaScript berikut ini di atas aba-aba </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 aba-aba <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 aba-aba berikut ini atas aba-aba <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 aba-aba CSS berikut ini di bawah aba-aba </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/AVvXsEg1hPMu5ujIFdBvHLSAHg69yRcddTreOfbQeqBTN_Txgt2vVktyT_ZWnICpnWPc736t7IbWVNIIAfNGUvSMFKIIDqhXuUIDqiNzRvEL9KFysg2JRWgUihLBjitu6F3zvRbGpY8dGdRQpS0/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/AVvXsEg6S47VA3lc04TDibZk6KMtYLrJWulnzOc3VzQw8N4pylwQ2LgwjwHMhz4qXsR_8CxL3OIZdrHq5rW4PubAZBML2diKIxbS6JAoRBfGO7I_xSgKeExqB4l8Tq3iujCfLztDuSzT6I6wvdU/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 aba-aba <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 gosip perihal Cara Membuat Previous Next Page Pada Blog. Maaf jikalau ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap gosip ini bermanfaat.