Cara Mudah membuat Next Prev Di bawah Postingan blog

adscblog

Tombol Next atau tombol Previous tidak hanya bisa tampil di bagian Home Page saja tetapi juga kita bisa tampilkan di halaman postingan,seperti yang anda ketahui tombol Next adalah tombol yang dimana kita akan melanjutkan ke halaman selanjut nya sedangkan sebalik nya,tombol Previous adalah tombol dimana kita akan melihat kehalaman sebelum nya.

Namun disini saya akan berbagi pengalaman bagaimana kita akan menyimpan atau membuat Next Prev di bawah halaman postingan,dan kelebihan dari tombol Next Prev ini dari tombol bawaan blogger yaitu,tombol ini akan di sertai link atau judul halaman,jadi kita juga bisa mengetahui Judul halaman yang akan kita kunjungi selanjut nya.

Cara pembuatan tombol Next Prev ini tidak lah susah,karena kita hanya perlu menyimpan sebagian kode kedalam template kita,dan kita juga harus sedikit meng edit nya agar sesuai dengan template yang kita pakai agar tidak terlalu mencolok,Jadi jika ini adalah artikel yang anda cari maka mari ikuti langkah langkah pembuatan tombol Next Prev ini

1:: Silahkan anda login dulu ke blogger
2:: Setelah anda Login masuk ke Template > Edit Html
3:: Setelah itu silahkan anda tekan tombol Ctrl+F Secara bersamaan
4:: Kemudian silahkan anda carai kode ]]></b:skin> Kemudian letakan kode berikut di atas kode tersebut

#blog-pager-older-link h6{margin:0;padding-right:5px;text-align:right;font-family:'Oswald',sans-serif;font-size:18px;color:#999;text-transform:uppercase;line-height:1.625em;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding-left:5px;text-align:left;font-family:'Oswald',sans-serif;font-size:18px;color:#999;text-transform:uppercase;line-height:1.625em;font-weight:700}
.pager-content{border:1px solid #ddd;;width:99.7%;overflow:hidden;margin:10px 0 0;padding:10px 0 0}
.pager-content a:hover,.pager-content{color:#000;text-decoration:none}
.showpageNum a,.showpage a,.showpagePoint{width:30%;background:#DE3C3C;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;margin-right:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{width:30%;color:#FFF}
.showpageOf{display:none!important}

5:: Langkah selanjut nya silahkan anda cari lagi kode </head> dan letakan JQuery ini di atas nya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Namun jika kode yang berwarna merah tersebut sudah ada gk perlu anda simpan
6:: Langkah selanjutnya silahkan anda letakan kode berikut di atas Related post atau di bawah nya,atau juga tergantung ke inginan anda dimana meletak kan nya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-content'>
<div id='blog-pager-newer-link'>
<b:if cond='data:newerPageUrl'>
<h6>&lt;&lt; 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:if>
</div>
<div id='blog-pager-older-link'>
<b:if cond='data:olderPageUrl'>
<h6>Next &gt;&gt; </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:if>
</div>
</div>
<div class='clear'/>
</div>
<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>
</b:if>

7:: Setelah anda memasang semua kode di atas,silahkan anda cari kode Page bawaan blogger kira kira seperti kode berikut

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Previous Post'>&#171; Prev Post</a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Next Post'>Next Post &#187;</a>
      </span>
    </b:if>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

Setelah ketemu silahkan anda hapus kode di atas semua dan mengganti nya dengan menggunakan kode berikut

<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'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <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>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <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>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>

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

Kemudian Save Template dan lihat hasil nya,semoga bermanfaat.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 21 September and have 0 komentar