#1. Buka blogger.
#2. Pilih menu tema > pilih edit html.
#3. 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.js<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/><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.#a. 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><b:includable id='postFooter' var='post'><b:include cond='data:view.isPost' name='postPagination'/><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>#5. Agar tampilan dari blog pager next previous dengan judul postingan ini makin cantik tambahkan kode CSS berikut. Simpan "DI ATAS/DI BAWAH" </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>#7. Selesai.
<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>| Variable | Keterangan |
|---|---|
var next | Default: Next.Tulisan untuk navigasi ke artikel selanjutnya. |
var prev | Default: Previous.Tulisan untuk navigasi ke artikel sebelumnya. |
Baca juga : lelah membuat eksternal link satu per satu di blog? mau cara cepatnya? yuk klik disini!!
