Cara Ubah Link “Artikel Sebelumnya/Sesudahnya”, Menjadi Link Judul Artikel/Konten

"Artikel sebelumnya/sesudahnya”, 

berada pada akhir atau paling bawah setiap artikel (postingan blog)

Jika Anda perhatikan, dalam sebuah blog atau website, Anda akan menemukan navigasi berupa "Next" dan "Previous" . 

Secara default, navigasi dalam blog untuk setiap halaman post adalah "Next" (sesudahnya) dan "Previous" (sebelumnya) ataupun "Newer" dan "Older". 

Namun, pernahkah Anda melihat disebuah website yang tidak ada lagi "Next" dan "Previous"? 

Akan tetapi navigasi diganti dengan judul postingan! 
Ubah Sebelumnya Sesudahnya
Penggunaan navigasi dengan judul artikel terlihat lebih menarik perhatian pengunjung situs website. 

Ilustrasi tampilan seperti berikut ini:
Artikel Sebelumnya Sesudahnya

Bagaimana caranya? Simak caranya sebagai berikut

Cara Mengubah Link “Sebelumnya / Sesudahnya” dengan Judul Artikel 

Penggunaan link dengan menggunakan judul artikel akan lebih menarik minat pengunjung untuk membaca artikel selanjutnya, karena melihat judul yang membuatnya penasaran. 

Nah, untuk mengubahnya, ikuti langkah-langkah sebagai berikut:

1. Pertama, pastikan blog Anda sudah terpasang library jQuery. Jika Anda belum yakin, Anda bisa cek di Edit HMTL. 

Masuk ke dashboard - klik Tema atau Template - Edit HTML.

Cek apakah kode di bawah ini sudah ada dalam tag HTML blog Anda?

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Jika Anda menemukan kode di atas dalam tag HTML blog Anda, artinya blog sudah terpasang library jQuery

Namun jika belum Anda bisa tambahkan kode di bawah ini setelah tag <head>.

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

2. Selanjutnya salin kode di bawah pada tag <b:includable id='nav-post'>.

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

Kira-kira kurang lebih tampilan HTMLnya seperti ini:
Artikel Sebelumnya Sesudahnya1
Jika Anda tidak menemukan <b:includable id='nav-post'> dalam HTML blog, maka gunakan cara ketiga berikut di bawah ini!

Baca Tips Ampuh Redsobek Berikut:



3. Carilah tag <b:includable id='postPagination'>. Kemudian ganti dengan kode di bawah 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>

Tampilannya kurang lebih sebagai berikut:
Artikel Sebelumnya Sesudahnya2
4. Masih di halaman Edit HTLM, cari kode seperti di bawah ini:

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

selanjutnya tambahkan kode berikut ke bagian tag tersebut.

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

Perhatikan gambar di bawah ini, agar peletakan kode di atas tidak salah. 
Artikel Sebelumnya Sesudahnya3

5. Selanjutnya, tambahkan kode CSS berikut sebelum atau di atas tag </head>

<b:if cond='data:view.isPost'>
<style>
  /* Navigasi Blogger dengan Judul by Redsobek.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>

*ganti dengan nama blog Anda
6.  Terakhir, tambahkan script berikut ini sebelum tag <body>

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    // Navigasi Blogger dengan Judul by Redsobek.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>

*ganti dengan nama blog Anda

Selesai. 

Jangan lupa simpan pengaturannya dan lihat hasilnya. Demikianlah Cara Ubah Link “Artikel Sebelumnya/Sesudahnya”, Menjadi Link Judul Artikel/Konten yang lebih menarik. Selamat mencoba. Salam Blogger Redsobek. 

0 Response to "Cara Ubah Link “Artikel Sebelumnya/Sesudahnya”, Menjadi Link Judul Artikel/Konten"

Post a Comment

Iklan Atas Artikel

OM Swastyastu, OM Awighnamastu Namo Siddham, OM Siddirhastu Tad Astu Svaha, 
OM Hrang Hring Sah Parama Sivaditya Ya Namah.

Kami Sebagai Publisher Online Menghaturkan Pangaksama Permohonan Maaf Ke Hadapan Ida Sanghyang Widhi Wasa (Ida Sanghyang Parama Kawi) Beserta Bhatara-Bhatari Leluhur Serta Junjungannya, Tatkala Kami Menceritakan Keberadaan Para Leluhur Yang Sudah Menempati Nirwana, Kiranya Kami Terlepas Dari Kutuk Neraka Apabila Kami Menyebarkan Informasi Dari Berbagai Sumber Yang Kurang Tepat Atau Adanya Kekeliruan. 

OM Tat Pramadat Ksama Svamam Ya Namah. OM Shanti, Shanti, Shanti OM.

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel