Membuat Tombol Next dan Previous di Bawah Postingan

Membuat Tombol Next dan Previous di Bawah Postingan - Tombol ini terletak di bawah postingan. Berbeda dengan tombol blog pager  bawaan blogger yang biasanya diletakkan di bawah sendiri setelah komentar. Untuk demonya, anda bisa lihat di bawah postingan ini. Tombol ini cukup sederhana sebetulnya, tidak ada yang istimewa. Tapi, agar lebih menarik, saya beri warna pada tombolnya. 

Baiklah, untuk memasangnya, simpan kode di bawah ini di atas ]]></b:skin> atau </style>

.pagebutton-nextprevious {margin-bottom: 10px;   overflow:hidden; padding:0;margin-right:5px;margin-left:5px;}
.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left;  border-right:1px solid #ddd; padding:0; background:#5498c9;color:#ffffff;}
.pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px}

.pagebutton-nextprevious li.previous {float: right; padding:0; background:#5498c9; margin:0;color:#ffffff}
.pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right;padding-bottom:20px }

.pagebutton-nextprevious li.next:hover, .pagebutton-nextprevious li.previous:hover  {background:#5498c9;color:#ccc }

.pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; }
.pagebutton-nextprevious li a { position: relative; min-height: 55px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

.pagebutton-nextprevious li i { color: #ffffff; font-size: 18px; }

.pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #ffffff; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}

.pagebutton-nextprevious li a span { font-size: 15px; color: #ffffff;  font-family:oswald,Helvetica, arial; margin:0;}
.pagebutton-nextprevious li a:hover span,
.pagebutton-nextprevious li a:hover i { color: #ccc; }
.pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; }
.pagebutton-nextprevious li.next i { float: right;margin-top: 15%;margin-right: 5%; }

.pagebutton-nextprevious li.next i, .pagebutton-nextprevious li.previous i ,
.pagebutton-nextprevious li.next,  .pagebutton-nextprevious li.previous{transition-duration: 0.4s; transition-timing-function: ease-out; }

Kemudian, silahkan copy kode HTML dan Javascriptnya di daerah bawah postingan blog Anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<ul class='pagebutton-nextprevious'>

<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='buttonside-left'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next' title='Newer Post'/>
<b:else/>
<i class='buttonside-left'/><a rel='next'><strong>Next</strong> <span>This is the current newest page</span></a>
</b:if>
</li>

<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='buttonside-right'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous' title='Older Post'/>
<b:else/>
<i class='buttonside-right'/><a rel='previous'><strong>Previous</strong> <span>This is the current oldest page</span></a>
</b:if>
</li>

</ul>


<script type='text/javascript'>
//<![CDATA[
(function($){ 
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h2.post-title').text()+'</span>'); 
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h2.post-title').text()+'</span>'); 
},"html");
})(jQuery);
//]]>
</script>

</b:if>

Sesuaikan warna tombol dengan template blog anda. Bisa anda utak-atik sendiri. Untuk kode yang saya beri warna itu adalah kode judul postingan blog anda. Silahkan sesuaikan sendiri dengan template anda, karena setiap template mempunyai kode CSS title post yang berbeda-beda. Bisa anda ubah menjadi .post h1.

Setelah semua selesai, mungkin di blog anda masih terdapat blog pager  bawaan blogger pada template anda. Biasanya, terletak setelah komentar di bawah sendiri. Untuk itu, silahkan sembunyikan blog pager  tersebut. Kurang lebih kode blog pager  adalah seperti ini.

<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;' 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:includable>

Tapi, kode HTML tersebut sulit untuk dihapus. Jika coba anda hapus, dan lihat hasilnya. Blog pager  masih terlihat. Solusinya, silahkan perhatikan kode CSS blog pager  nya berikut.

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center;}

Silahkan tambahkan display:none  jika ingin menyembunyikannya, sehingga akan menjadi seperti ini

#blog-pager-newer-link{float:left;display:none}
#blog-pager-older-link{float:right;display:none}
#blog-pager{text-align:center;}

Jika sudah selesai, Save template anda.

UPDATE

Ternyata dengan menggunakan display:none, akan menjadikan error atau HTML blog tidak terbaca. Sebagai penggantinya, gunakan kode visibility:hidden, dan silahkan ganti kode yang lama dengan kode yang baru tersebut.