Membuat Custom Blog Pager Di Postingan Blog

Membuat Custom Blog Pager Di Postingan Blog

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

28 Comments Add Comment

Rnut dan komplit Kang tutorial cara membuat custom blog pager di postingan blon nya. Mantap.

Salam

Balas

Absen dulu Kang, Biarpun tidak dapat PERTAMAK, solar juga ggak pha pha :ng

Balas

wah kebetulan banget nih =)D kemarin pengen minta tutorial buat bikin yang seperti ini, ehh sekarang udah ada tutorialnya :-bd

Balas

Salam juga mas Indra :) Selamat pagi juga :)

Balas

Hehehehe silahkan mas :)

Balas

Hehehehe kalau gitu silahkan dicoba dulu mas :)

Balas

sekalian responsivenya kang, saya gbs maen css soalnya :(

Balas

nah, ada juga tutorialnya padahal mau ngoprek template buat diambil pager postingan :D
makasih kang, saya coba dulu.

Balas

kok di halaman depan juga ikutan berubah ya kang navigasi halamannya ?

cek madtekno.blogspot.com

Balas

kalau begitu css blog pager sebelumnya pindahkan ke tag onditional homepage mas, biasanya di bawah css default. Biasanya seperti ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.........
</style>
</b:if>
</b:if>

Balas

Ini udah responsive :) tampil bagus di semua ukuran device :)

Balas

Silahkan dicoba dulu mas :)

Balas

Kemudian tambahkan juga tag conditional untuk postpage saja pada javascriptnya mas seperti ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
JAVASCRIPT DI SINI
</b:if>

Balas

untuk yang css kayanya gak perlu pake tag ini deh kang, tampilanya jadi ilang gitu hehehe CMIIW:

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

</b:if>

Balas

tag conditional yang itu untuk CSS blog pager sebelumnya mas (sebelum dipasang CSS yang ini) dengan tag conditional di atas itu untuk mengatur tampilan di homepage saja jadi tombol pager di homepage enggak berubah :)

Balas

mas , buat template lagii dongg :D

Balas

Iya mas nanti kalau ada waktunya saya akan buat template lagi :)

Balas

mas kok punya saya gak muncul link untuk posting selanjutnya ? ada apa ya...??

padahal pertama pasang masih ada...

Balas

Ass mas apa kabar, saya baca di blognya siapa lupa, berita kecelakaan putra mas Adhy. Saya hanya bisa berdoa semoga cepet sembuh mas, maaf nggak pernah negur-sapa. Maklum skrg kerjanya agak berat, jd kuli di pasar, berangkat pagi pulang tak diantar.. eh pulang malam. Maaf kalo OOT.. ini kebetulan lagi online nyatol di blognya mas Adhy

Balas

Kabar baik mas :) iya makasih doanya mas... haduuhhh akhirnya Maskolis muncul lagi... syukur deh masih inget saya mas...selama ini saya hanya bisa melihat tweet di widget blog Maskolis hehehe kangen postingannya nih mas :) :) :) makasih sudah mampir di sini mas, masih tetep rumah lama mas :)

Balas

Tutorial yang bagus mas Adhy :) Saya nyari-nyari tutorial kostumisasi blog pager akhirnya ketemu di sini. Alhamdulillah, ketemu lagi sama mas Adhy tutorialnya, hehe :D #Blogwalking mas Adhy :)

Balas

wah disini toh ada caranya....udah lama saya cari cara ini,tapi ga ketemu..ijin praktek mas adhy

Balas

kang kok judul postingannya ga muncul ya kang? Mohon pencerahannya kan di naga-jawa.blogspot.com

Balas

Coba simpan javascriptnya di atas kode </head>

Balas
This comment has been removed by the author.

Alhamdulillah kang sudah bisa,
Yang pengen ane tanyain, untuk tutorial ini apa memang perlu ditambahkan lib jquery kang jika di tempalte-nya belum ada?

Balas

Iya mas, jika kita menambahkan jquery, maka library jquery nya juga harus ada di blog berapa pun versinya.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×