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 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 DI ATAS </style> atau ]]></b:skin>.

/* Navigasi Next Prev 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;}
}

KEEMPAT. Tambahkan script ini dan tempatkan DI ATAS </body>.

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    // Navigasi Next Prev Blogger dengan Judul by igniel.com
    !function() {
      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}('C c=["\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\f\\e\\H\\e\\h\\j\\i\\m\\f\\z","\\g\\s\\B\\i\\u\\n\\j\\k\\g\\n\\e\\h\\j\\u\\i\\A\\e\\h\\j\\i\\m\\f\\z","\\x\\h\\e\\t","\\g\\d\\d\\h","\\p\\l\\k\\g\\f\\o","\\p\\v\\l\\k\\g\\f\\o\\J\\p\\l\\k\\g\\f\\o","\\d\\e\\I\\d","\\t\\m\\h\\l\\d","\\s\\e\\f\\d\\h\\E\\j\\d\\m\\d\\i\\e","\\t\\m\\f\\A","\\p\\v\\l\\k\\g\\f\\o","\\x\\d\\G\\i","\\n\\e\\d"];C a=$(c[0]),b=$(c[1]);$[c[y]](a[c[3]](c[2]),w(r){a[c[q]](c[4]+F+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q]);$[c[y]](b[c[3]](c[2]),w(r){b[c[q]](c[4]+K+c[5]+$(r)[c[9]](c[8])[c[7]]()[c[6]]()+c[D])},c[q])',47,47,'||||||||||||_0x9c5e|x74|x65|x6E|x61|x72|x6C|x2D|x70|x73|x69|x67|x3E|x3C|11|_0x42fcx3|x2E|x66|x6F|x2F|function|x68|12|x6B|x64|x62|var|10|x79|next|x6D|x77|x78|x20|prev'.split('|'),0,{}));
    }();
  //]]> </script>
</b:if>

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

Kamu juga bisa mencoba Infinite Scroll Blogger agar halaman berikutnya bisa dimuat tanpa harus reload terlebih dulu. 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.

Artikel Terkait

33 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Takanulis
    04 April, 2021
    Profil: https://www.blogger.com/profile/01230509647052706348
    Mba untuk penggunaan pure javascript bagaimana yah?
    • Seorang Manusia yang Lahir di Indonesia
      14 Oktober, 2021
      Profil: https://www.blogger.com/profile/06890823464453117871
      Untuk penggunaan pure javascript tidak bisa untuk saat ini.
  • Dava
    18 Februari, 2021
    Profil: https://www.blogger.com/profile/10484396665384776297
    alhamdulillah work
  • Ois Chanel
    10 Oktober, 2020
    Profil: https://www.blogger.com/profile/03768382552947955413
    Apa bisa ditampilkan thumnail dan cuplikan postnya kak? Kalau bisa request tutorialnya kak. Makasih
  • Gea Putri
    15 Agustus, 2020
    Profil: https://www.blogger.com/profile/04039929339146690343
    Kak cssnya bisa diganti gak? Soalnya tumpang tindih sama css next prev Homepage.
    Mau ganti kelas tp skripnya di encript 😔
  • Redaksiana
    21 Juli, 2020
    Profil: https://www.blogger.com/profile/15709280952598590160
    kak itukan, tulisan berikutnya sebelah kiri dan setelahnya sebelah kanan, gimana cara rubahnya kak, udah saya coba2 sendiri nggk bisa2 dan maunya pas di rubah itu simbol < ikut menyesuaikan. begini jadinya < sebelumnya & berikutnya >
  • Redaksiana
    21 Juli, 2020
    Profil: https://www.blogger.com/profile/15709280952598590160
    kak itukan, tulisan berikutnya sebelah kiri dan setelahnya sebelah kanan, gimana cara rubahnya kak, udah saya coba2 sendiri nggk bisa2 dan maunya pas di rubah itu simbol < ikut menyesuaikan. begini jadinya < sebelumnya & berikutnya > {margin:0; padding:10px 15px}
  • May
    31 Mei, 2020
    Profil: https://www.blogger.com/profile/09412154931194597082
    Mbak biar nextnya sebelah kanan dan previosnya sebelah kiri gimana ya mbak ?
  • May
    31 Mei, 2020
    Profil: https://www.blogger.com/profile/09412154931194597082
    mbak di blog saya tidak ada
    includable id='nav-post
    maupun -- includable id='postPagination

    saya lihat komentar mbak solusinya " tambahkan aja 'postPagination'-nya "

    yang jadi permasalahan 'postPagination'-nya itu di letakkan di mana ?
  • Agung Irianto
    16 Maret, 2020
    Profil: https://www.blogger.com/profile/07611365078246922139
    Di template viomagz tidak ada mbak dua duanya. Cara nambahinnya bagaimana mbak?
  • Unknown
    09 Maret, 2020
    Profil: https://www.blogger.com/profile/00489547633930801029
    maaf ka, apkah ini bisa diterapkan pada widget recent post ?
    caranya bgaimana?
    sya pake widget recent post kaka yang ini 'https://www.igniel.com/2018/11/related-post-thumbnail-snippet-list.html' maunya si yg ini 'https://www.igniel.com/2018/11/related-post-thumbnail-grid.html'
    tapi gmbrnya kecil sudah diubah pun angkanya tetep kecil gmbrnya.
    sya pake themplate emporio . terimaksih sebelumnya.
    • Igniel
      09 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa?
      Mau biar thumbnailnya nggak kecil aja kan?
  • Kang Awèr
    24 Januari, 2020
    Profil: https://www.blogger.com/profile/15397195276896684845
    Makasih min
  • Marhaen
    21 Desember, 2019
    Profil: https://www.blogger.com/profile/01277602508476376781
    Minta request dong, Mba. Cara biar kata 'pengikut' di atas tombol untuk follow bisa diganti. Saya custom di tata letak, yang ganti cuma judulnya aja. Saya cari-cari di templatenya, saya ngga ngerti juga ttg ini.

    Contohnya ada di blog saya Mba. https://hasanaskary,blogspot,com. Di situ saya tulis 'Teman' tapi keterangan di atas tombol masih tetep 'Pengikut'.
  • Kanal Lirik
    17 Desember, 2019
    Profil: https://www.blogger.com/profile/11759718745299492373
    mbak, saya pake templete Textrim V2. saya coba pake cara diatas kx gk work ya. judul lagu di navigasi gk kelihatan cuma muncul next & previous. trus navigasi yang di home juga hilang. tolong di bantu mbak terimakasih
  • cakruf
    27 November, 2019
    Profil: https://www.blogger.com/profile/07743069094899030256
    Template Viomagz gak ada mba dua"nya
  • Syukma Groups
    15 Agustus, 2019
    Profil: https://www.blogger.com/profile/00654438512234548260
    <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
  • Unknown
    25 Januari, 2019
    Profil: https://www.blogger.com/profile/00870608482016246401
    kok hilang sih tulisannya yg di atas.
    maksudnya tidak ada -- includable id='nav-post
    maupun -- includable id='postPagination

    itu bagaimana cara mengatasinya mas ?
    • Igniel
      01 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.

    • Unknown
      06 Februari, 2019
      Profil: https://www.blogger.com/profile/00870608482016246401
      mbak di blog saya saat "includable id='nav-post" diganti
      tampilan blog saya jadi ancur, itu kenapa ya mbak ?
  • Unknown
    25 Januari, 2019
    Profil: https://www.blogger.com/profile/00870608482016246401
    di template blog saya tidak ada
    ataupun

    bagai mana itu mas ?
  • A L
    10 Januari, 2019
    Profil: https://www.blogger.com/profile/04026688796924537859
    Cara memunjulkannya di main post gimana ya stah??

    Kok malah ilang ya
    • Igniel
      28 Oktober, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      main post itu maksudnya homepage? Script di atas khusus biar halaman posting aja. Kalau di homepage gak bakal ada.
  • A L
    10 Januari, 2019
    Profil: https://www.blogger.com/profile/04026688796924537859
    Simple dan sederhana pnjelasannya.. mksih work
  • Takanulis
    22 Desember, 2018
    Profil: https://www.blogger.com/profile/01230509647052706348
    berhasil mbak terima kasih atas postingan nya :D
  • sugar
    14 November, 2018
    Profil: https://www.blogger.com/profile/16372590804576444884
    Mantppppp... Blog nya..
  • Tulisan Ndeso
    09 November, 2018
    Profil: https://www.blogger.com/profile/05487761607909429713
    Ini bisa diterapkan di blog yang sebelumnya ngga ada next & prev di bawah postingannya, mbak?
    • Igniel
      09 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Next prev harus dimunculkan dulu. Pakai layout v3?
    • Tulisan Ndeso
      10 November, 2018
      Profil: https://www.blogger.com/profile/05487761607909429713
      sy lupa nama templatenya mbak, template jadul sih.. coba mbak cek di tulisandesocom
    • Yonanda Adhitya
      01 Februari, 2019
      Profil: https://www.blogger.com/profile/12217604437020520135
      Punya saya juga gitu, gimana tu?
    • Igniel
      01 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.