Cara Membuat Next Previous ala Blog Rapi Serui - Tidak perlu Mengganti Navigasi Next dan Previous dengan Judul Postingan bila memang widget satu ini sudah ada pada blog sobat. Namun lain cerita dengan template baru saya ini, pada awalnya memang tampil widget blog pager ini. Namun setelah saya edit template, mengatur ulang template agar sedikit RAPI, SEO dan valid html, widget blog pager menjadi tidak tampil.
Pertanyaan dasar adalah Kenapa saya mencoba Cara Membuat Next Previous ala Blog Rapi Serui pada template ini? Alasan dan jawaban dasar adalah siapa tahu diantara sobat blogger pemula seperti saya kesulitan mencari akar masalah dari blog pager yang tidak tampil padahal awalnya tampil. Ternyata ada kode dari blog pager yang terhapus. Dan alasan utamanya adalah Cara Ala Rapi Serui ini bisa sobat terapkan pada template blogger sobat.
Langkah awal yang sobat harus perhatikan adalah backup template sobat dulu, siapa tahu ada kesalahan dalam pengaturan ini. Silahkan logon ke Blogger, masuk TEMA dan Edit HTML
1. Copas kode CSS berikut ini di atas kode penutup kepala </head>
.ikrap{background:#FAFAFA; display: flex; flex-wrap: wrap; padding:12px 0 0; margin:0px 0 28px; overflow:hidden; border:1px solid #eee; color:#bbb; transition:all .3s ease-out;}
.ktarapi {-moz-box-flex: 0; width:calc(100% / 2); padding-left: 12px; padding-right: 12px; padding-bottom:12px;}
.gent-two{text-align:right; }
.ktarapi:hover {color:#ddd!important;}
.ktarapi a{color:#000000;}
.ktarapi a:hover{color:#0000FF!important;}
.krap{color:#0E0674;font-size:22px; font-weight:700; text-transform:capitalize; transition:all .3s ease-out}
2. Cari kode <b:includable id='Delate' var='post'> dan simpan kode dibawah ini tepat dibawah kode <b:includable id='Delate' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class='ikrap'>
<div class='ktarapi'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='krap'>Selanjutnya</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> Prev Post</a>
</span>
<b:else/>
<span class='krap'>Postingan Terbaru</span>
</b:if>
</div>
<div class='ktarapi gent-two'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='krap'>Sebelumnya</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Selanjutnya</a>
</span>
<b:else/>
<span class='krap'>First</span>
</b:if>
</div>
</div>
</b:if>
Langkah terakhir adalah simpan kode berikut dibawah ini tepat diatas kode </body>
<b:if cond='data:blog.pageType == "item"'>
<script>
//Pager
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
</script>
</b:if>
Hasil dari Cara Membuat Next Previous ala Blog Rapi Serui, blog pager sobat Next and Previous-nya akan menjadi Judul Postingan, dengan catatan di template blog sobat sudah terpasang kode javascrift seperti contoh ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
4 Save Template and happy Blogging !
