Membuat Custom Blog Pager Pada Postingan Blog

Sebenarnya blog pager bisa ditaruh dimana saja, namun (menurut saya) yang paling strategis adalah dibawah postingan, bukan dibawah form komentar! Seperti kebanyakan template pada umumnya, blog pager selalu ditaruh dibawah form komentar, nah kali ini saya akan membuatnya berpindah posisi dan mempercantiknya dengan CSS. Hasil Custom Blog Pager ini bisa anda lihat dibawah setiap artikel di blog ini \m/

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....

http://www.kompiajaib.com/2014/06/membuat-custom-blog-pager-di-postingan-blog.html

Tweet