Cara Cepat dan Mudah Membuat Next Previous Pada Blog

Cara cepat dan mudah membuat next previous pada blog - Secara default, menu blog page atau navigasi blogger pada halaman post hanyalah berupa tulisan "Next" dan "Previous" atau "Newer" dan "Olders" saja. Tapi tahukah sobat, bahwa mengganti tulisan tersebut menjadi judul post akan membuat struktur navigasi menjadi lebih baik. Selain itu, akan membantu pengunjung untuk mengetahui judul pembahasan dari artikel sebelum atau selanjutnya. Istilahnya, pemilihan kata kunci terkait. Tentunya ini akan menjadikan blog sobat saki lebih SEO friendly dan user friendly. Nah, untuk membuatnya, sobat saki bisa mengikuti panduan langkah-langkahnya dibawah ini.

1. Cara Cepat dan Mudah Membuat Next Previous Pada Blog
#1. Buka blogger.

#2. Pilih menu tema > pilih edit html.

#3. Pastikan blog sobat 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 ATAS/DI BAWAH" <head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

#4. 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 sobat 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.
#a. 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>

#b. Lalu cari ini.

<b:includable id='postFooter' var='post'>

#c. Kodenya pasti ada lebih dari satu. Pilihlah yang ada di dalam widget Blog1. Kemudian tambahkan kode ini di dalamnya.

<b:include cond='data:view.isPost' name='postPagination'/>

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

#5. Agar tampilan dari blog pager next previous dengan judul postingan ini makin cantik tambahkan kode CSS berikut. Simpan "DI ATAS/DI BAWAH" </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>

#6. Kemudian tambahkan kode ini dan tempatkan "DI ATAS/DI BAWAH" </body>.
#7. Selesai.

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

Variable	Keterangan
`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 blog dengan judul artikel.

Baca juga : lelah membuat eksternal link satu per satu di blog? mau cara cepatnya? yuk klik disini!!

Mudah-mudahan dapat dimengerti. Tutorial yang berhubungan dengan template blog memang agak ribet, karena nama class dan id class tiap template biasanya berbeda-beda tergantung selera si pembuat. Jadi cobalah pahami nama class dan id class, agar sobat nantinya tidak kesulitan dalam mengatur tampilan template blog sobat. Mungkin itu aja sih dari aku hari ini. Terima kasih. Selamat beraktifitas hehehe.

Cara Cepat dan Mudah Membuat Next Previous Pada Blog

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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel