Membuat Navigasi Next Prev Menjadi Judul Postingan Cara Buat Blog- Mengganti Navigasi Next dan Previous dengan Judul Postingan

Secara default, hidangan blog pager atau navigasi Blogger pada halaman post hanyalah berupa goresan pena "Next" dan "Previous" atau "Newer" dan "Older" saja. Mengganti goresan pena tersebut menjadi judul postingan akan menciptakan struktur navigasi menjadi lebih baik. Juga akan membantu pengunjung untuk mengetahui apa pembahasan dari artikel sebelum atau selanjutnya. Tentunya ini akan mengakibatkan blog lebih SEO friendly dan user friendly.

Cara berikut hanya akan kuat pada hidangan navigasi di halaman postingan tunggal saja ya. Kalau mau mengubah navigasi di halaman utama dapat coba cara menciptakan navigasi halaman bernomor di homepage Blogger.

PERTAMA. Pastikan blog kau sudah dilengkapi dengan library jQuery semoga scriptnya dapat berkerja dengan baik. Untuk mengetahuinya carilah isyarat berikut apakah sudah tertulis atau belum:
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Kalau belum ada tambahkan dulu isyarat ini "SETELAH / DI BAWAH" <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

KEDUA. Cari <b:includable id='nav-post'> dan ganti semua isinya menggunakan isyarat 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 kau menggunakan template v3 generasi Contempo, Emporio, Soho, dan Notable. Ingat ya, cara dibawah ini hanya dilakukan jikalau tidak ada <b:includable id='nav-post'>. Kalau sudah ada skip saja dan lanjut ke langkah ketiga.

Carilah isyarat <b:includable id='postPagination'> dan ganti semua isinya ibarat 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 niscaya ada lebih dari satu. Pilihlan yang ada di dalam widget Blog1. Kemudian tambahkan isyarat ini di dalamnya.
<b:include cond='data:view.isPost' name='postPagination'/>

Sehingga hasil jadinya ibarat 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>

KETIGA. Agar tampilan dari blog pager next previous dengan judul postingan ini makin bagus tambahkan isyarat CSS berikut. Simpan "SEBELUM / DI ATAS" </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>

KEEMPAT. Tambahkan script ini dan tempatkan "SEBELUM / DI ATAS" </body>.
<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>

PENGATURAN
VariableKeterangan
var next Default: Next.
Tulisan untuk navigasi ke artikel selanjutnya.
var prev Default: Previous.
Tulisan untuk navigasi ke artikel sebelumnya.

Perbandingan sebelum dan setelah menggunakan script untuk mengubah navigasi next previous Blogger dengan judul artikel.
Membuat Navigasi Next Prev Menjadi Judul Postingan Cara Buat Blog- Mengganti Navigasi Next dan Previous dengan Judul Postingan

Mudah-mudahan terang ya. Tutorial yang berafiliasi dengan template memang agak ribet alasannya nama class dan id setiap template biasanya berbeda tergantung selera si pembuat.
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours