Skip to main content

Cara Mengganti tombol Next dan Previous Dengan Judul Postingan Artikel

cara ganti navigasi next dan prev dengan judul

Untuk mengganti navigasi next dan previous dengan judul postingan artikel blog yang perlu teman-teman lakukan hanyalah mengedit pada kode template yang anda gunakan dengan menambah dan mengganti kode yang akan saya bagikan di bawah ini.

Jika sebelumnya secara default tombol navigasi pada halaman postingan hanya bertulisan Next atau previous atau Newer dan Older saja. Dengan mengganti tombol next dan previous dengan judul postingan akan membuat navigasi terlihat menjadi lebih baik.

Selain alasan di atas, tombol Next dan Previous yang kita rubah dengan judul postingan artikel akan membuat pengunjung lebih dominan untuk mengunjungi halaman selanjutnya atau sebelumnya karena melihat judul postingan pada tombol navigasi newer atau older.

Cara Mengganti Navigasi Next dan Previous dengan Judul Postingan


1. Sebelum melangkah ke tahap lebih lanjut pastikan blog teman-teman sudah memasang library jQuery. Untuk mengetahuinya silahkan cari kode di bawah ini di dalam menu edit HTML.
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Kalau template yang anda gunakan tidak ada kode tersebut silahkan tambahkan kode di bawah ini setelah kode <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

2. Selanjutnya mulai ke tahap mengganti tombol navigasi next dan previous dengan mencari kode <b:includable id='nav-post'> dan ganti semua isinya dengan kode di bawah.
<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>

3. Namun jika kode <b:includable id='nav-post'> tidak ada silahkan cari kode <b:includable id='postPagination'> lalu ganti semua isinya dengan kode di bawah ini. Perlu di ingat, cara pada tahap nomor 3 ini di lakukan jika tidak ada kode <b:includable id='nav-post'> pada tahap nomor 2, namun jika sudah ada silahkan langsung lanjut ke langkah nomor 4.

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

Selanjutnya cari kode
<b:includable id='postFooter' var='post'>

Jika terdpat lebih dari 1 kode, Pilihlah kode yang berada di dalam widget Blog1, Kemudian tambahkan kode di bawah di dalamnya
<b:include cond='data:view.isPost' name='postPagination'/>

Sehingga hasil akhirnya akan nampak seperti di bawah 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>

4. Agar tampilan navigasi next previous dengan judul postingan artikel semakin menarik, tambahkan css berikut di atas kode </head>
<b:if cond='data:view.isPost'>
<style>
  /* Navigasi Blogger dengan Judul by masigun.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>

5. Berikutnya copy paste script di bawah ini lalu tempatkan di atas kode </body>
<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    // Navigasi Blogger dengan Judul by masigun.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>

Nah itulah cara mengganti tombol next previous dengan judul postingan artikel blog. Untuk mengedit sebuah template blog memang ribet, jadi saya sarankan untuk membackup templatenya terlebih dahulu jika terjadi kesalahan.


Jika teman-teman kesusahan dalam menerapkan cara di atas silahkan tanyakan di kolom komentar dan saya ucapkan terima kasih mengikuti tutorial mengganti tombol next dan prev pakai judul postingan.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Jika postingan ini bermanfaat silahkan bagikan postingan ini ke teman kamu atau dengan mengklik tombol bagikan di atas. Berkomentar di blog ini gratis..!!!
Buka Komentar
Tutup Komentar