Cara Mengganti Blog Pager Next-Previous Post dengan Judul Posting

Baca Juga

Cara Mengganti Blog Pager Next-Previous Post dengan Judul Posting di Blogger Lama dan Baru.

BLOG Pager adalah navigasi link halaman postingan blog. Defaultnya berupa Newer Post, Home, dan Older Post, baik di halaman depan maupun di halaman artikel.

Kita bisa mengubah blog pager itu menjadi navigasi berupa angka (nomor) untuk halaman depan dan indeks. Untuk halaman artikel/postingan, kitaa bisa menggantinya menjadi judul postingan atau judul tulisan, seperti dalam gambar di atas.

Berikut ini Cara Mengganti Blog Pager Next-Previous Post dengan Judul Posting, baik di Blogger Lama (Versi 2) maupun di Blogger yang baru (versi 3).

1. Mengganti Next-Previous Post dengan Judul Postingan di Blogger Terbaru

Ini cara mengganti next-prev menjadi judul artikel di Blogger terbaru (versi 3). 

1. Di Dashboard Blogger terbaru Anda, klik Theme > Edit HTML

2. Pastikan dulu ada kode link ke kode jQuery seperti di bawah ini. Jika tidak ada, pasang (copas) di atas kode </head>

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

3. Cari kode <b:includable id='postPagination'>

4. Ada dua kode. Ganti semuanya dengan kode 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>

5. Pasang Kode CSS untuk mengatur desain tampilannya. Copas di atas kode </b:skin>

#blog-pager {margin: 20px 0 0;display: inline-block;width: 100%;border-bottom: 1px solid #eee;padding-bottom: 15px;}

#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:700; font-size:14px; 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:15px; color:#c00; text-transform:uppercase;}

.blog-pager-newer-link span:last-child, .blog-pager-older-link span:last-child{display:block; line-height:normal; font-weight:700; text-transform:none;color: #48d;}

#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:-7px; width:25px; height:25px; vertical-align:-7px; 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:-7px; width:25px; height:25px; vertical-align:-7px; 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;}

}

6. Pasang Kode JS Navigasi Blog Pager Next - Previous Post Berupa Judul Postingan berikut ini di atas kode </body>

    <b:if cond='data:view.isPost'>

  <script> //<![CDATA[

    // Navigasi Next Prev

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

Catatan:

- Di Blogger V3 biasanya sudah ada kode

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

untuk menampilkan navigasi link next-prev. Jika tidak ada, maka tambahkan kode itu di bawha kode

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

7. Simpan! Save template.

Demikian cara membuat navigasi blog pager Next - Previous Post berupa Judul Postingan di Blogger terbaru. 

2. Cara Mengganti Next-Prev Post Jadi Judul Tulisna di Blogger Lama

Kode Next Previous dengan Judul Posting Blog. Blog pager atau navigasi halaman yang mengarahkan pengunjung blog ke tulisan berikutnya (next post) atau tulisan sebelumnya (previous).

Ini trending desain blogger masa kini. Ini Kode Next Previous dengan Judul Posting Blog dan cara memasangnya.

1. Theme > Edit HTML

2. Copas kode CSS berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.halaman{padding:1px;background:#fafafc;border-top:1px solid #ccc;margin-top:10px}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#666!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.current-pageleft{padding:0 0 0 15px;}
.current-pageright{padding:0 15px 0 0;}
.halaman-kiri a,.halaman-kanan a{color:#555;}
.pager-title-left{font-family:Arial,sans-serif;font-size:20px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}
#blog-pager {margin:1px}
</style>
</b:if>

3. Copas kode HTML berikut ino di atas kode <div id='related post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Previous</span><br/>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Newest</span></span>
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Next</span><br/>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>

4. Copas kode JS berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if>

5. Untuk menyembunyikan next-prev judul postingan ada di halaman depan dan indeks, sembunyikan dengan cara menggunakan tag kondisional blog berikut ini.

Cari kode <b:includable id='nextprev'> dan tambahkan kode warna merah, sehingga menjadi seperti ini:

                        <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <div class='blog-pager' id='blog-pager'>
            BANYAK KODE LAIN DI SINI
          </div>
</b:if>
</b:if>
        <div class='clear'/>
        </b:includable>

Itu dia Cara Mengganti Blog Pager Next-Previous Post dengan Judul Posting. Dengan demikian, linknya jadi lebih deskriptif, user friendly, dan otomatis menjadikan blog lebih SEO friendly.

Template blog hasil custom biasanya sudah demikian --blog pager berupa judul tulisan, termasuk template blog yang saya gunakan ini (hasil modif Simple).*