2. »
    3. »

Mengganti Navigasi Next dan Previous dengan Judul Postingan

Membuat Navigasi Next Prev Menjadi Judul Postingan

Secara default, menu blog pager atau navigasi Blogger pada halaman post hanyalah berupa tulisan "Next" dan "Previous" atau "Newer" dan "Older" saja. Mengganti tulisan tersebut menjadi judul postingan akan membuat struktur navigasi menjadi lebih baik. Juga akan membantu pengunjung untuk mengetahui apa pembahasan dari artikel sebelum atau selanjutnya. Tentunya ini akan menjadikan blog lebih SEO friendly dan user friendly.

Cara berikut hanya akan berpengaruh pada menu navigasi di halaman postingan tunggal saja ya. Kalau mau mengubah navigasi di halaman utama bisa coba cara membuat navigasi halaman bernomor di homepage Blogger.

PERTAMA. Pastikan blog kamu sudah dilengkapi dengan library jQuery agar scriptnya bisa berkerja dengan baik. Untuk mengetahuinya carilah kode berikut apakah sudah tertulis atau belum:
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Kalau belum ada tambahkan dulu kode ini "SETELAH / DI BAWAH" <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

KEDUA. Cari <b:includable id='nav-post'> dan ganti semua isinya menggunakan kode ini.
<b:includable id='nav-post'>
  <b:if cond='data:view.isPost'>
    <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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Newer</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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Older</a>
        </span>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'> Home</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:if>
</b:includable>

Jika Tidak Ada <b:includable id='nav-post'>

Artinya kemungkinan kamu menggunakan template v3 generasi Contempo, Emporio, Soho, dan Notable. Ingat ya, cara dibawah ini hanya dilakukan jika tidak ada <b:includable id='nav-post'>. Kalau sudah ada skip saja dan lanjut ke langkah ketiga.

Carilah kode <b:includable id='postPagination'> dan ganti semua isinya seperti ini.
<b:includable id='postPagination'>
  <b:if cond='data:view.isPost'>
    <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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Newer</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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Older</a>
        </span>
      </b:if>
      <a class='home-link' expr:href='data:blog.homepageUrl'> Home</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:if>
</b:includable>

Lalu cari ini.
<b:includable id='postFooter' var='post'>

Kodenya pasti ada lebih dari satu. Pilihlan yang ada di dalam widget Blog1. Kemudian tambahkan kode ini di dalamnya.
<b:include cond='data:view.isPost' name='postPagination'/>

Sehingga hasil akhirnya seperti ini.
<b:includable id='postFooter' var='post'>
  <div class='post-bottom'>
    <div class='post-footer float-container'>
      <b:include name='footerBylines'/>
      <b:include cond='data:view.isPost' name='postPagination'/>
      <b:include cond='data:widget.type == "Blog"' data='post' name='postFooterAuthorProfile'/>
    </div>
    <b:if cond='data:view.isSingleItem'>
        <b:include data='{ shareButtonClass: "post-share-buttons-bottom invisible", overridden: true }' name='maybeAddShareButtons'/>
    <b:else/>
      <b:include data='post' name='postFooterJumpLink'/>
    </b:if>
  </div>
</b:includable>

KETIGA. Agar tampilan dari blog pager next previous dengan judul postingan ini makin cantik tambahkan kode CSS berikut. Simpan "SEBELUM / DI ATAS" </head>.
<b:if cond='data:view.isPost'>
<style>
  /* Navigasi Blogger dengan Judul by igniel.com */
  #blog-pager a.home-link {display:none}
  #blog-pager {margin:20px 0px; display:inline-block; width:100%;}
  #blog-pager a.blog-pager-newer-link, #blog-pager a.blog-pager-older-link {font-weight:600; font-size:16px; padding:0px; overflow:hidden; line-height:initial; display:block; width:100%; border:0px; background:transparent;}
  #blog-pager a.blog-pager-newer-link {padding-right:5px;}
  #blog-pager a.blog-pager-older-link {padding-left:5px;}
  .blog-pager-newer-link span:first-child, .blog-pager-older-link span:first-child {font-size:20px; color:#000; text-transform:uppercase;}
  .blog-pager-newer-link span:last-child, .blog-pager-older-link span:last-child{display:block; line-height:24px; font-weight:400; text-transform:none;}
  #blog-pager a.blog-pager-newer-link:hover, #blog-pager a.blog-pager-older-link:hover{color:#ff5722; background:transparent;}
  #blog-pager-newer-link {float:left; text-align:left; width:50%;}
  #blog-pager-older-link {float:right; text-align:right; width:50%;}
  #blog-pager-older-link span:first-child::after {margin-right:-10px; width:35px; height:35px; vertical-align:-10px; display:inline-block; transition:all .3s ease; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%231d2129'/></svg>") no-repeat; content:''}
  #blog-pager-newer-link span:first-child:before {margin-left:-10px; width:35px; height:35px; vertical-align:-10px; display:inline-block; transition:all .3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' fill='%231d2129'/></svg>") no-repeat; content:''}
  @media only screen and (max-width:640px){
    #blog-pager {display:block;}
    #blog-pager-newer-link, #blog-pager-older-link {float: none; width: 100%; display: block; text-align: center;}
    #blog-pager-older-link {margin-top:20px;}
  }
</style>
</b:if>

KEEMPAT. Tambahkan script ini dan tempatkan "SEBELUM / DI ATAS" </body>.
<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    // Navigasi Blogger dengan Judul by igniel.com
    !function(t) {
   var next = 'Next';
   var prev = 'Previous';
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('E b=["\\d\\p\\B\\k\\o\\l\\i\\g\\d\\l\\e\\j\\i\\f\\e\\I\\e\\j\\i\\k\\m\\f\\D","\\d\\p\\B\\k\\o\\l\\i\\g\\d\\l\\e\\j\\i\\o\\k\\z\\e\\j\\i\\k\\m\\f\\D","\\A\\j\\e\\u","\\d\\c\\c\\j","\\q\\h\\g\\d\\f\\s","\\q\\w\\h\\g\\d\\f\\s\\y\\q\\h\\g\\d\\f\\s","\\c\\e\\G\\c","\\u\\m\\j\\h\\c","\\p\\g\\o\\h\\c\\y\\p\\g\\o\\h\\c\\i\\c\\m\\c\\k\\e","\\u\\m\\f\\z","\\q\\w\\h\\g\\d\\f\\s","\\A\\c\\H\\k","\\l\\e\\c"];E a=t(b[0]),n=t(b[1]);t[b[C]](a[b[3]](b[2]),x(n){a[b[r]](b[4]+F+b[5]+t(n)[b[9]](b[8])[b[7]]()[b[6]]()+b[v])},b[r]);t[b[C]](n[b[3]](b[2]),x(a){n[b[r]](b[4]+J+b[5]+t(a)[b[9]](b[8])[b[7]]()[b[6]]()+b[v])},b[r])',46,46,'|||||||||||_0x3670|x74|x61|x65|x6E|x70|x73|x2D|x72|x6C|x67|x69||x6F|x2E|x3C|11|x3E||x66|10|x2F|function|x20|x64|x68|x62|12|x6B|var|next|x78|x6D|x77|prev'.split('|'),0,{}));}(jQuery);
  //]]> </script>
</b:if>

PENGATURAN
VariableKeterangan
var next Default: Next.
Tulisan untuk navigasi ke artikel selanjutnya.
var prev Default: Previous.
Tulisan untuk navigasi ke artikel sebelumnya.

Perbandingan sebelum dan sesudah memakai script untuk mengubah navigasi next previous Blogger dengan judul artikel.
Mengubah Navigasi Blog Pager Next Prev Menggunakan Judul

Mudah-mudahan jelas ya. Tutorial yang berhubungan dengan template memang agak ribet karena nama class dan id setiap template biasanya berbeda tergantung selera si pembuat.
Baca Juga
... Pin Share Share

KLIK
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

14 Komentar

  1. Tulisan Ndeso09 November, 2018

    Ini bisa diterapkan di blog yang sebelumnya ngga ada next & prev di bawah postingannya, mbak?

    ReplyDelete
    Replies
    1. Igniel09 November, 2018

      Next prev harus dimunculkan dulu. Pakai layout v3?

      Delete
    2. Tulisan Ndeso10 November, 2018

      sy lupa nama templatenya mbak, template jadul sih.. coba mbak cek di tulisandesocom

      Delete
    3. Bro Tutorial01 February, 2019

      Punya saya juga gitu, gimana tu?

      Delete
    4. Igniel01 February, 2019

      Kalau nggak ada, tambahkan aja 'postPagination'-nya. Kodenya sesuai tutorial di atas.
      <b:includable id='postPagination'>
      ....
      ....
      </b:includable>
      Lalu panggil kodenya di dalam area 'postFooter' sesuai petujuk di atas.

      Delete
  2. Deddy Hidayat14 November, 2018

    Mantppppp... Blog nya..

    ReplyDelete
  3. CodingT22 December, 2018

    berhasil mbak terima kasih atas postingan nya :D

    ReplyDelete
  4. Yanflow10 January, 2019

    Simple dan sederhana pnjelasannya.. mksih work

    ReplyDelete
  5. Yanflow10 January, 2019

    Cara memunjulkannya di main post gimana ya stah??

    Kok malah ilang ya

    ReplyDelete
  6. Riau Berbagi25 January, 2019

    di template blog saya tidak ada
    ataupun

    bagai mana itu mas ?

    ReplyDelete
  7. Riau Berbagi25 January, 2019

    kok hilang sih tulisannya yg di atas.
    maksudnya tidak ada -- includable id='nav-post
    maupun -- includable id='postPagination

    itu bagaimana cara mengatasinya mas ?

    ReplyDelete
    Replies
    1. Igniel01 February, 2019

      Kalau nggak ada, tambahkan aja 'postPagination'-nya. Kodenya sesuai tutorial di atas.
      <b:includable id='postPagination'>
      ....
      ....
      </b:includable>

      Lalu panggil kodenya di dalam area 'postFooter' sesuai petujuk di atas.

      Delete
    2. Mardakom06 February, 2019

      mbak di blog saya saat "includable id='nav-post" diganti
      tampilan blog saya jadi ancur, itu kenapa ya mbak ?

      Delete
  8. Syukma Groups15 August, 2019

    <b:includable id='postPagination'>
    <div class='blog-pager container' id='blog-pager'>
    <b:include cond='data:newerPageUrl' name='previousPageLink'/>
    <b:include cond='data:olderPageUrl' name='nextPageLink'/>
    <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
    </div>
    </b:includable>

    apakah kode diatas harus diganti semua atau hanya kode <b:includable id='postPagination'> pada template soho....terima kasih

    ReplyDelete

  1. Untuk menulis kode gunakan <i>KODE</i>
  2. Untuk menyisipkan kode ke dalam Syntax Highlighter gunakan <em>KODE YANG LEBIH PANJANG</em>
  3. Kode harus di-parse terlebih dulu agar bisa ditulis.
  4. Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email.