√ Cara Ganti Navigasi Next Previous Dengan Judul Postingan Blog
Mengganti navigasi tombol / Button Next dan Previous Sebenarnya sudah cukup umum dilakukan oleh Para Blogger untuk mempercantik tampilan Blog maupun website mereka.
Jika pada umunya Button Next dan Previous ini akan terlihat monoton dan tidak menarik lantaran hanya terlihat text "Selanjutnya" dan "Sebelumnya" saja.
Jika anda lihat pada sajian navigasi blog ini akan terlihat navigasi Next diikuti dengan Judul postingan berikutnya, sedangkan pada Navigasi Previous Terlihat diikuti dengan Judul postingan Sebelumnya.
Cukup menarik bukan??
Selain tampilannya menarik juga dapat meningkatkan page view blog anda, lantaran judul akan tetap terlihat terang pada ketika visitor sedang membaca postingan anda, tentunya Visitor akan ingin tau dengan judul yang terlihat pada sajian navigasi Next previous ini.
Jika anda suka dan ingin memasangnya pada Blog/website, silakan ikuti langkah-langkahnya..
Cara Mengganti Next Previous dengan Judul Postingan
1. Login ke Blog terlebih dahulu
2. Pilih >> theme / template
3. Pilih >> Edit HTML
4. Pastikan template Blog anda sudah terpasang dengan Jquery ibarat dibawah ini.
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.jsUntuk memastikanya silakan anda cari isyarat tersebut dengan memakai CTRL+F.
Jika belum ada, ikuti langkahnya dibawah ini.
1. Langkah pertama
Carilah kode <head> biasanya isyarat tersebut berada di paling atas, namun jikalau anda galau untuk mempermudah pencarian gunakan Ctrl+f.
Jika sudah ketemu,silakan tambahkan isyarat jquery diatas, dan letakan sempurna di bawah isyarat <head>.
2. Langkah kedua
Silakan cari isyarat dibawah ini.
<b:includable id='nav-post'>Jika sudah ketemu silakan Hapus semua isyarat yang dibungkus includable dan Ganti dengan isyarat dibawah 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 ketemu isyarat <b:includable id='nav-post'> kemungkinan anda memakai template generasi V3.
Jika tidak menemukan isyarat <b:includable id='nav-post'> tersebut sebagai gantinya anda cari isyarat dibawah ini
<b:includable id='postPagination'>
Jika sudah ketemu silakan hapus semua Kode yang dibungkus oleh <b:includable id='postPagination'> dan GANTI dengan isyarat dibawah 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>
Kemudian silakan anda cari lagi isyarat dibawah ini
<b:includable id='postFooter' var='post'>
Jika sudah ketemu, niscaya kodenya lebih dari satu bahkan dapat hingga 3. Maka Kamu pilih yang didekat kode Blog1
Selanjutnya tambahkan isyarat dibawah ini didalam isyarat <b:includable id='postFooter' var='post'> tersebut.
<b:include cond='data:view.isPost' name='postPagination'/>
Makara penempatanya akan terlihat ibarat berikut ini, lihat text yang diwarnai biru :
<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'/>
3. Langkah ketiga
Agar tampilan Next dan previous lebih bagus dan Menarik, carilah isyarat dibawah ini.
</head>
Jika sudah ketemu silakan copy isyarat dibawah ini dan letakan sempurna diatas isyarat </head>
<b:if cond='data:view.isPost'> <style> /* Navigasi syilent.blogspot.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>4. Langkah Keempat
Silakan cari isyarat dibawah ini untuk menambahkan Css.
</body>biasanya berada di paling bawah, silakan cari memakai CTRL+F.
Jika sudah ketemu tambahkan isyarat dibawah ini, dan letakkan sempurna diatas isyarat </body> tersebut.
<b:if cond='data:view.isPost'> <script> //<![CDATA[ // Navigasi syilent.blogspot.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>
Jika sudah, Silakan SAVE dan lihat hasilnya....
Itulah cara mengganti navigasi Next prev diikuti dengan judul postingan Blog.
Semoga bermanfaat.
Sumber https://syilent.blogspot.com/
