Membuat Custom Blog Pager Di Postingan Blog

Membuat Custom Blog Pager Di Blog - Membuat Custom Blog Pager
Adalah Hal Yang Bijak Untuk Anda Lakukan Karena Custom Blog Pager Biasa Menguntungkan
Pengunjung Ada Beberapa Keuntungannya :

 
Keuntungan Membuat Custom Blog Pager :

• Pengunjung Lebih Mudah Mengakses Artikel Blog Anda
• Pengunjung Lebih Mengenal/Tau Artikel-Artikel Lama Anda
• Tampilan Blog Menjadi Lebih Rapih & Bagus

Ne CSS Letak Kan Di Atas Kode </style>

.halaman {
    margin-top: 20px;
    padding: 0;
    background: #fff;
}

.halaman-kiri {
    width: 50%;
    background: none;
    float: left;
    margin: 0;
    padding: 10px 0 10px 0;
    text-align: left;
    color: #333;
    transition: all .3s ease-in-out;
}

.halaman-kanan {
    width: 50%;
    background: none;
    float: right;
    margin: 0;
    padding: 10px 0 10px 0;
    text-align: right;
    color: #333;
    transition: all .3s ease-in-out;
}

.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left {
    color: gray!important;
}

.halaman-kanan a:hover,.halaman-kiri a:hover {
    color: gray!important;
}

.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright {
    font-size: 14px;
    font-family: 'Oswald', Tahoma, Sans-serif;
    background: none;
    text-decoration: none;
}

.halaman-kiri a,.halaman-kanan a {
    color: #333;
}

.pager-title-left {
    font-family: 'Oswald', Tahoma, Sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    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 Cari KOde Dibawah Ini

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

setelah ketemu Ganti Dengan Kode Dibawah

<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 Cari Lagi Kode Yg Mirip Kayak diatas

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

Simpan kode di bawah ini tepat di atas kode penutup </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>

Setelah itu letakkan kode dibawah ini diatas Bawah <data:post.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>