Cara Mengganti Next Previous Post dengan Judul Tulisan - Blogger Bandung

Cara Mengganti Navigasi Next dan Previous dengan Judul Postingan di Blog. Gambar di bawah ini cukup menjelaskan apa yang dimaksud.



Secara default, menu blog pager atau navigasi posting (post navigation) Blogger pada halaman posting berupa tulisan "Next" dan "Previous" atau "Newer" dan "Older".

Mengganti tulisan tersebut menjadi judul postingan akan membuat struktur navigasi menjadi lebih baik. 

Mengganti Navigasi Next Previous Post dengan Judul Tulisan juga akan membantu pengunjung untuk mengetahui apa pembahasan dari artikel sebelum atau selanjutnya. Tentunya next prev dengan judul artikel juga akan menjadikan blog lebih SEO friendly dan user friendly.

Cara berikut hanya akan berpengaruh pada menu navigasi di halaman postingan.

Cara Mengganti Next Previous Post dengan Judul Tulisan

Berikut ini Cara Mengganti Navigasi Next Previous Post dengan Judul Tulisan sebagaimana dishare blog igniel.com. Lakukan dengan cermat.

1. Edit HTML

Buka kode template dengan klik Tema > Edit HTML

2. Kode jQuery

Pastikan template blog sudah dilengkapi dengan library jQuery, agar scriptnya bisa berkerja dengan baik. 

Untuk mengetahuinya carilah kode berikut, apakah sudah ada atau belum di template blog yang digunakan:

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

Kalau belum ada, tambahkan dulu kode tersebut di atas kode </head>

3. Ganti Kode

Cari kode <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 kode <b:includable id='nav-post'>, kemungkinan kamu menggunakan template V3 generasi Contempo, Emporio, Soho, dan Notable. 

Maka, di template blogger terbaru versi 3, cari 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'/>

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>

4. Pasang Kode CSS

Agar tampilan dari blog pager next previous dengan judul postingan ini makin cantik tambahkan kode CSS berikut. Simpan di atas kode ]]></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;}}

5. Kode JavsScript

Tambahkan javascript ini dan tempatkan DI ATAS kode </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>

6. Save! Simpan Template!

Demikian Cara Mengganti Navigasi Next Previous Post dengan Judul Tulisan.*