Secara default, menu blog pager atau navigasi Blogger pada halaman post hanyalah berupa tulisan "Next" dan "Previous" atau "Newer" dan "Older" saja. Mengganti tulisan tersebut menjadi judul postingan akan membuat struktur navigasi menjadi lebih baik. Juga akan membantu pengunjung untuk mengetahui apa pembahasan dari artikel sebelum atau selanjutnya. Tentunya ini akan menjadikan blog lebih SEO friendly dan user friendly.
Cara berikut hanya akan berpengaruh pada menu navigasi di halaman postingan tunggal saja ya. Kalau mau mengubah navigasi di halaman utama bisa coba cara membuat navigasi halaman bernomor di homepage Blogger.
PERTAMA. Pastikan blog kamu 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.jsKalau belum ada tambahkan dulu kode ini 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 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 kamu 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.
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>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'/>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>KETIGA. Agar tampilan dari blog pager next previous dengan judul postingan ini makin cantik tambahkan kode CSS berikut. Simpan DI ATAS </style> atau ]]></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;}
}KEEMPAT. Tambahkan script ini dan tempatkan DI ATAS </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>| 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 Blogger dengan judul artikel.
Kamu juga bisa mencoba Infinite Scroll Blogger agar halaman berikutnya bisa dimuat tanpa harus reload terlebih dulu. Mudah-mudahan jelas ya. Tutorial yang berhubungan dengan template memang agak ribet karena nama class dan id setiap template biasanya berbeda tergantung selera si pembuat.
Ini bisa diterapkan di blog yang sebelumnya ngga ada next & prev di bawah postingannya, mbak?
BalasHapusNext prev harus dimunculkan dulu. Pakai layout v3?
Hapussy lupa nama templatenya mbak, template jadul sih.. coba mbak cek di tulisandesocom
HapusPunya saya juga gitu, gimana tu?
HapusKalau nggak ada, tambahkan aja 'postPagination'-nya. Kodenya sesuai tutorial di atas.
Hapus<b:includable id='postPagination'>
....
....
</b:includable>
Lalu panggil kodenya di dalam area 'postFooter' sesuai petujuk di atas.
Mantppppp... Blog nya..
BalasHapusberhasil mbak terima kasih atas postingan nya :D
BalasHapusSimple dan sederhana pnjelasannya.. mksih work
BalasHapusCara memunjulkannya di main post gimana ya stah??
BalasHapusKok malah ilang ya
main post itu maksudnya homepage? Script di atas khusus biar halaman posting aja. Kalau di homepage gak bakal ada.
Hapusdi template blog saya tidak ada
BalasHapusataupun
bagai mana itu mas ?
kok hilang sih tulisannya yg di atas.
BalasHapusmaksudnya tidak ada -- includable id='nav-post
maupun -- includable id='postPagination
itu bagaimana cara mengatasinya mas ?
Kalau nggak ada, tambahkan aja 'postPagination'-nya. Kodenya sesuai tutorial di atas.
Hapus<b:includable id='postPagination'>
....
....
</b:includable>
Lalu panggil kodenya di dalam area 'postFooter' sesuai petujuk di atas.
mbak di blog saya saat "includable id='nav-post" diganti
Hapustampilan blog saya jadi ancur, itu kenapa ya mbak ?
<b:includable id='postPagination'>
BalasHapus<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div>
</b:includable>
apakah kode diatas harus diganti semua atau hanya kode <b:includable id='postPagination'> pada template soho....terima kasih
Ganti semua ya
HapusTemplate Viomagz gak ada mba dua"nya
BalasHapusBerarti tinggal ditambahin.
Hapusmbak, saya pake templete Textrim V2. saya coba pake cara diatas kx gk work ya. judul lagu di navigasi gk kelihatan cuma muncul next & previous. trus navigasi yang di home juga hilang. tolong di bantu mbak terimakasih
BalasHapusMinta request dong, Mba. Cara biar kata 'pengikut' di atas tombol untuk follow bisa diganti. Saya custom di tata letak, yang ganti cuma judulnya aja. Saya cari-cari di templatenya, saya ngga ngerti juga ttg ini.
BalasHapusContohnya ada di blog saya Mba. https://hasanaskary,blogspot,com. Di situ saya tulis 'Teman' tapi keterangan di atas tombol masih tetep 'Pengikut'.
Makasih min
BalasHapus