Home Blogging Cara Membuat Previous Next Pada Blog

Sabtu, 23 Juni 2018

Cara Membuat Previous Next Pada Blog

Diterbitkan
Tags

Cara Membuat Previous Next Pada Blog - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Cara Membuat Previous Next Pada Blog, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.


Judul : Cara Membuat Previous Next Pada Blog
link : Cara Membuat Previous Next Pada Blog

Baca juga


Cara Membuat Previous Next Pada Blog

Salam kreatif bagi kalian para blogger yang setia mengunjungi BloDroi. Pada tutorial kali ini, BloDroi akan menunjukkan cara membuat tombol next dan previous pada blog agar blog kalian terlihat lebih keren dan perfect.
Cara Membuat Previous Next Pada Blog:
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>
  1. 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>
  1. 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/AVvXsEi1b1_qcGea1Gi7JLjwUo3SGUEdKgUN86-QaTd0MpyJUwLV_uY71KFC0HPYacivjC0C59R8y58ilS9MvyLa2mnFRY5ldyZufWLVX3GsVSkKaqPWPhkrJp4oVIUqd5DpBtrO8hBQfuitnfo/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/AVvXsEhvdGtV81nKRyMb_tp7YbISczDLm4d-pXQ6FAJuWE21FJyDmwkXzZapOHwDwH3n2GHwJs91EL2T_OPaywdSGbnAiPOwU3m-CrBj4H6oiQMukKFuRQXvHYNKlhk7iYjRcR5zz2KmGJVcsXg/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 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/AVvXsEi1b1_qcGea1Gi7JLjwUo3SGUEdKgUN86-QaTd0MpyJUwLV_uY71KFC0HPYacivjC0C59R8y58ilS9MvyLa2mnFRY5ldyZufWLVX3GsVSkKaqPWPhkrJp4oVIUqd5DpBtrO8hBQfuitnfo/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/AVvXsEhvdGtV81nKRyMb_tp7YbISczDLm4d-pXQ6FAJuWE21FJyDmwkXzZapOHwDwH3n2GHwJs91EL2T_OPaywdSGbnAiPOwU3m-CrBj4H6oiQMukKFuRQXvHYNKlhk7iYjRcR5zz2KmGJVcsXg/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 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>
  1. 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'/>
  1. 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>
  1. 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>
  1. 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-->
  1. 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/AVvXsEi1b1_qcGea1Gi7JLjwUo3SGUEdKgUN86-QaTd0MpyJUwLV_uY71KFC0HPYacivjC0C59R8y58ilS9MvyLa2mnFRY5ldyZufWLVX3GsVSkKaqPWPhkrJp4oVIUqd5DpBtrO8hBQfuitnfo/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/AVvXsEhvdGtV81nKRyMb_tp7YbISczDLm4d-pXQ6FAJuWE21FJyDmwkXzZapOHwDwH3n2GHwJs91EL2T_OPaywdSGbnAiPOwU3m-CrBj4H6oiQMukKFuRQXvHYNKlhk7iYjRcR5zz2KmGJVcsXg/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 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>
  1. Save Template
Sedikit rumit Cara Membuat Previous Next Pada Blog plus Judul di bawah tiap posting blog. Terlebih template anda bukan bawaan atau default blogger. BloDroi Menyediakan tiga cara di atas, mungkin berhasil salah satunya. Semoga berhasil dan terima kasih.

Sekian Artikel Cara Membuat Previous Next Pada Blog

Sampailah kita pada akhir artikel Cara Membuat Previous Next Pada Blog kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.
sobat sekarang membaca artikel Cara Membuat Previous Next Pada Blog dengan alamat link https://naparom.blogspot.com/2018/06/cara-membuat-previous-next-pada-blog.html

Artikel Terkait

Bryan

Next Post
Previous Post


EmoticonEmoticon

Langganan: Posting Komentar (Atom)