Membuat Custom Blog Pager Di Postingan Blog

Kini sudah banyak custom template yang telah menggunakan custom blog pager di postingannya. Dengan custom blog pager, kita bisa menampilkan blog pager di mana saja seperti di atas postingan atau di bawah postingan (di antara postingan dan komentar) atau bahkan ditampilkan di keduanya. Ada pula yang mengganti link next post dan previous post dengan judul postingan seperti yang akan saya share kali ini.

Bagi yang template blognya masih menggunakan blog pager default Blogger atau blog pager lama, Anda bisa mencoba menggunakan custom blog pager ini seperti yang terlihat pada screenshot di bawah ini atau silahkan coba pada demonya. Custom blog pager ini juga kini saya gunakan di Kompi Ajaib, bisa Anda lihat di bawah postingan ini.

Membuat Custom Blog Pager Di Postingan Blog


Bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini.

Kode CSS
Silahkan ganti kode CSS blog pager sebelumnya dengan kode CSS di bawah ini


.halaman{margin-top:20px;padding:0;background:#e9e9e9}
.halaman-kiri{width:50%;background:none;float:left;margin:0;padding-bottom:10px;text-align:left;color:#333;transition:all .3s ease-in-out;}
.halaman-kanan{width:50%;background:none;float:right;margin:0;padding-bottom:10px;text-align:right;color:#333;transition:all .3s ease-in-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:red!important}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:red!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:700;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#333;}
.pager-title-left{font-family: 'Trebuchet MS', sans-serif;font-size:28px;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out}
.isihalaman-kiri{margin:5px 10px 10px}
.isihalaman-kanan{margin:5px 10px 10px}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
.blog-pager,#blog-pager{clear:both;text-align:center}
.feed-links{clear:both;line-height:2.5em}

Kemudian silahkan cari kode seperti di bawah ini


<b:includable id='nextprev'>
........
........
</b:includable>

Setelah ketemu silahkan ganti dengan kode di bawah ini


            <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>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
    </div>
  </div>
  </b:if>
</b:if>
  <div class='clear'/>
</b:includable>

Kemudian silahkan cari kode seperti di bawah ini (biasanya berada persis di bawah kode di atas).


<b:includable id='post' var='post'>
........
........
</b:includable>

Silahkan simpan kode di bawah ini tepat di atas penutup kode di atas </b:includable>.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Next</span><br/>
      <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'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Next</span><br/>This is the current newest page</span>
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
<span class='pager-title-left'>Previous</span><br/>
      <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'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Previous</span><br/>This is the oldest page</span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>

Kemudian simpan kode javascript di bawah 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>

Setelah itu silahkan SAVE template-nya dan lihat hasilnya di postingan blog Anda. Selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments