Cara Membuat Navigasi Blog Pager Next - Previous Post Berupa Judul Postingan
September 4, 2015
Cara Membuat Navigasi Blog Pager Next - Previous Post Berupa Judul Postingan di Blogger Lama dan Baru.
Hanya saja, kali ini posisi dan tampilannya berbeda. Posisinya di bawah posting atau artikel. Tampilannya juga ada tambahan teks menu Next & Previous. Contohnya ada di bawah posting ini. Screenshotnya:
CB share tiga cara, silakan pilih salah satu. Yang pertama bisa dilihat di mkr-site. Dua lainnya hasil modif yang sudah berhasil diterapkan di sejumlah blog klien di Layanan Premium.
CARA 1 : Membuat Previous Next Posts Blogger
Berikut ini cara mengganti blog pager nex-prev dengan judul postingan. Ada 4 cara. Untuk template Blogger terbaru (Versi 3), silakan langsung terapkan cara nomor #4.
2. Cari kode <b:include name='nextprev'/> dan ganti dengan kode ini:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:include name='nextprev'/> </b:if></b:if>
2. Copas kode berikut ini di atas kode <div class='related posts> atau <div id='related post> atau di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'> <div class='pager-isi'> <b:if cond='data:newerPageUrl'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> <b:else/> <span class='linkgrey left'><h6>Next</h6><h5>This is the most recent post.</h5></span> </b:if> <b:if cond='data:olderPageUrl'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> <b:else/> <span class='linkgrey right'><h6>Previous</h6><h5>This is the last post.</h5></span> </b:if> </div> </div> <script type='text/javascript'> //<![CDATA[ $(window).load(function(){ 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').text(); $('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>'); }); 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').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>'); }); }); //]]> </script> </b:if>
<div class='blog-pager' id='blog-pager'> <div class='pager-isi'> <b:if cond='data:newerPageUrl'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> <b:else/> <span class='linkgrey left'><h6>Next</h6><h5>This is the most recent post.</h5></span> </b:if> <b:if cond='data:olderPageUrl'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> <b:else/> <span class='linkgrey right'><h6>Previous</h6><h5>This is the last post.</h5></span> </b:if> </div> </div> <script type='text/javascript'> //<![CDATA[ $(window).load(function(){ 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').text(); $('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>'); }); 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').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>'); }); }); //]]> </script> </b:if>
3. Copas kode CSS berikut ini di atas kode ]]</b:skin>
.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYkbwacxA3auz57NzCYz6MsC-JzH7Qa5a8RbBIFHiBuMkpRy1sKMCQ2ZHXlcGJINPhH9P2o7ixhgnZyYBwA65cznY3uFedzjtIvO4BRzFw0mZ6XZTY6JUAuHpvenaEs0__iw9ntaB9N4/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvB5fX8vabd1e3j7SnJR6es783TAwH-aon6FZRsSx_HCAa4_Uc2eEJciaq5kHWEBnxDcFkRwq0enMJ_hyphenhyphenSyfkRTlI2C-z9eX6wkQE35IbEcdopIn2K12MggANnMBw-IwGGFpSrHdvmgY/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
Bisa juga dengan kode berikut ini, simpan di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYkbwacxA3auz57NzCYz6MsC-JzH7Qa5a8RbBIFHiBuMkpRy1sKMCQ2ZHXlcGJINPhH9P2o7ixhgnZyYBwA65cznY3uFedzjtIvO4BRzFw0mZ6XZTY6JUAuHpvenaEs0__iw9ntaB9N4/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvB5fX8vabd1e3j7SnJR6es783TAwH-aon6FZRsSx_HCAa4_Uc2eEJciaq5kHWEBnxDcFkRwq0enMJ_hyphenhyphenSyfkRTlI2C-z9eX6wkQE35IbEcdopIn2K12MggANnMBw-IwGGFpSrHdvmgY/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
</style></b:if>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYkbwacxA3auz57NzCYz6MsC-JzH7Qa5a8RbBIFHiBuMkpRy1sKMCQ2ZHXlcGJINPhH9P2o7ixhgnZyYBwA65cznY3uFedzjtIvO4BRzFw0mZ6XZTY6JUAuHpvenaEs0__iw9ntaB9N4/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvB5fX8vabd1e3j7SnJR6es783TAwH-aon6FZRsSx_HCAa4_Uc2eEJciaq5kHWEBnxDcFkRwq0enMJ_hyphenhyphenSyfkRTlI2C-z9eX6wkQE35IbEcdopIn2K12MggANnMBw-IwGGFpSrHdvmgY/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
</style></b:if>
4. Save template!
Itu dia Cara Membuat Navigasi Blog Pager Next - Previous Berupa Judul. Jika cara di atas tidak berhasil, coba dua cara lainnya berikut ini.
2. Copas kode berikut ini di atas kode </head>
3. Copas kode HTML berikut ini di atas kode <div id='related-posts'>
4. Copas kode JavaScript berikut ini di atas kode </body>
5. Tambahkan Tag Kondisional berikut ini di atas kode <div class='blog-pager' id='blog-pager'> yang ada di bawah kode <b:includable id='nextprev'> :
Hasilnya seperti ini:
6. Save Template!
2. Copas kode berikut ini atas kode <div id='related post'>
3. Copas kode CSS berikut ini di bawah kode </b:skin>
4. Ganti kode <b:include name='nextprev'/> dengan:
5. Save Template!
Memang rumit cara membuat navigasi blog bager berupa Next - Previous plus Judul di bawah tiap posting blog. Makanya, CB kasih tiga jalan di atas, siapa tahu berhasil salah satunya.
Itu dia Cara Membuat Navigasi Blog Pager Next - Previous Berupa Judul. Jika cara di atas tidak berhasil, coba dua cara lainnya berikut ini.
CARA 2 : Membuat Previous Next Posts Blogger
1. Template > Edit HTML2. Copas kode berikut ini di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#blog-pager {border-top: 1px solid #E5E5E5;border-bottom: 2px solid #E5E5E5;margin: 15px 0;padding: 10px 0;width: 98%;}
#blog-pager-newer-link{float:left;width:45%;text-align:left;margin:0;padding:0}
#blog-pager-older-link{float:right;width:45%;text-align:right;margin:0;padding:0}
#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:Arial,sans-serif;font-size:14px;color:#666;text-transform:uppercase;line-height:1.625;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:Arial,sans-serif;font-size:14px;color:#666;text-transform:uppercase;line-height:1.625;font-weight:700}
#blog-pager-older-link a{color:#666;}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover{color:#c00;}
#blog-pager-newer-link a{color:#666;}
</style>
</b:if>
<style type='text/css'>
#blog-pager {border-top: 1px solid #E5E5E5;border-bottom: 2px solid #E5E5E5;margin: 15px 0;padding: 10px 0;width: 98%;}
#blog-pager-newer-link{float:left;width:45%;text-align:left;margin:0;padding:0}
#blog-pager-older-link{float:right;width:45%;text-align:right;margin:0;padding:0}
#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:Arial,sans-serif;font-size:14px;color:#666;text-transform:uppercase;line-height:1.625;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:Arial,sans-serif;font-size:14px;color:#666;text-transform:uppercase;line-height:1.625;font-weight:700}
#blog-pager-older-link a{color:#666;}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover{color:#c00;}
#blog-pager-newer-link a{color:#666;}
</style>
</b:if>
3. Copas kode HTML berikut ini di atas kode <div id='related-posts'>
<b:if cond='data:blog.pageType != "item"'>
<div class='blog-pager' id='blog-pager'>
<div id='blog-pager-newer-link'>
<b:if cond='data:newerPageUrl'>
<h6>Previous</h6>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
<b:else/>
<h6>Previous</h6>
Anda sedang membaca artikel terbaru
</b:if>
</div>
<div id='blog-pager-older-link'>
<b:if cond='data:olderPageUrl'>
<h6>Next</h6>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
<b:else/>
<h6>Next</h6>
Anda sedang membaca artikel terakhir
</b:if>
</div></div>
</b:if>
<div class='clear'/>
<div class='blog-pager' id='blog-pager'>
<div id='blog-pager-newer-link'>
<b:if cond='data:newerPageUrl'>
<h6>Previous</h6>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
<b:else/>
<h6>Previous</h6>
Anda sedang membaca artikel terbaru
</b:if>
</div>
<div id='blog-pager-older-link'>
<b:if cond='data:olderPageUrl'>
<h6>Next</h6>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
<b:else/>
<h6>Next</h6>
Anda sedang membaca artikel terakhir
</b:if>
</div></div>
</b:if>
<div class='clear'/>
4. Copas kode JavaScript berikut ini di atas kode </body>
<script type='text/javascript'>
$(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>
$(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>
5. Tambahkan Tag Kondisional berikut ini di atas kode <div class='blog-pager' id='blog-pager'> yang ada di bawah kode <b:includable id='nextprev'> :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- Kode Banyak Banget di Sini -->
</b:if></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- Kode Banyak Banget di Sini -->
</b:if></b:if>
Hasilnya seperti ini:
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<!-- Kode Banyak Banget di Sini -->
</b:if></b:if>
</b:include>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<!-- Kode Banyak Banget di Sini -->
</b:if></b:if>
</b:include>
6. Save Template!
CARA 3 : Membuat Previous Next Posts Blogger
1. Template > Edit HTML2. Copas kode berikut ini atas kode <div id='related post'>
<!-- Nexprev -->
<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-isi'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
<b:else/>
<span class='linkgrey left'><h6>Next</h6><h5>This is the most recent post.</h5></span>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
<b:else/>
<span class='linkgrey right'><h6>Previous</h6><h5>This is the last post.</h5></span>
</b:if>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
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').text();
$('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>');
});
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').html('<h6>Previous</h6><h5>' + olderLinkTitle +
'</h5>');
});
});
//]]>
</script>
</b:if>
<!-- Nextprev End-->
<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-isi'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
<b:else/>
<span class='linkgrey left'><h6>Next</h6><h5>This is the most recent post.</h5></span>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
<b:else/>
<span class='linkgrey right'><h6>Previous</h6><h5>This is the last post.</h5></span>
</b:if>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
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').text();
$('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>');
});
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').html('<h6>Previous</h6><h5>' + olderLinkTitle +
'</h5>');
});
});
//]]>
</script>
</b:if>
<!-- Nextprev End-->
3. Copas kode CSS berikut ini di bawah kode </b:skin>
<!-- Blog Pager NextPrev-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border-bottom:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pager-isi a,.pager-isi .linkgrey{width:46%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:105%;font-weight:normal}
a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYkbwacxA3auz57NzCYz6MsC-JzH7Qa5a8RbBIFHiBuMkpRy1sKMCQ2ZHXlcGJINPhH9P2o7ixhgnZyYBwA65cznY3uFedzjtIvO4BRzFw0mZ6XZTY6JUAuHpvenaEs0__iw9ntaB9N4/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvB5fX8vabd1e3j7SnJR6es783TAwH-aon6FZRsSx_HCAa4_Uc2eEJciaq5kHWEBnxDcFkRwq0enMJ_hyphenhyphenSyfkRTlI2C-z9eX6wkQE35IbEcdopIn2K12MggANnMBw-IwGGFpSrHdvmgY/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{padding-left:3.5%;text-align:left}
.pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
.pager-isi h5 {font-size: 14px;font-family: Arial;font-weight: normal}
</style>
</b:if>
<!-- NextPrev End-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border-bottom:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pager-isi a,.pager-isi .linkgrey{width:46%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:105%;font-weight:normal}
a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYkbwacxA3auz57NzCYz6MsC-JzH7Qa5a8RbBIFHiBuMkpRy1sKMCQ2ZHXlcGJINPhH9P2o7ixhgnZyYBwA65cznY3uFedzjtIvO4BRzFw0mZ6XZTY6JUAuHpvenaEs0__iw9ntaB9N4/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvB5fX8vabd1e3j7SnJR6es783TAwH-aon6FZRsSx_HCAa4_Uc2eEJciaq5kHWEBnxDcFkRwq0enMJ_hyphenhyphenSyfkRTlI2C-z9eX6wkQE35IbEcdopIn2K12MggANnMBw-IwGGFpSrHdvmgY/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{padding-left:3.5%;text-align:left}
.pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
.pager-isi h5 {font-size: 14px;font-family: Arial;font-weight: normal}
</style>
</b:if>
<!-- NextPrev End-->
4. Ganti kode <b:include name='nextprev'/> dengan:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='nextprev'/>
</b:if></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='nextprev'/>
</b:if></b:if>
5. Save Template!
Memang rumit cara membuat navigasi blog bager berupa Next - Previous plus Judul di bawah tiap posting blog. Makanya, CB kasih tiga jalan di atas, siapa tahu berhasil salah satunya.
CARA 4 : Membuat Previous Next Post Judul Postingan di Blogger Terbaru
Ini cara mengganti next-prev menjadi judul artikel di Blogger terbaru (versi 3).
1. Pastikan ada seperti di bawah ini (kode jQuery). Jika tidak ada, pasang di atas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>
2. Cari kode <b:includable id='postPagination'>
3. Ada dua kode. Ganti semuanya dengan kode 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>
4. Pasang Kode CSS untuk mengatur desain tampilannya. Copas di atas kode </b:skin>
#blog-pager {margin: 20px 0 0;display: inline-block;width: 100%;border-bottom: 1px solid #eee;padding-bottom: 15px;}#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:700; font-size:14px; 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:15px; color:#c00; text-transform:uppercase;}.blog-pager-newer-link span:last-child, .blog-pager-older-link span:last-child{display:block; line-height:normal; font-weight:700; text-transform:none;color: #48d;}#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:-7px; width:25px; height:25px; vertical-align:-7px; 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:-7px; width:25px; height:25px; vertical-align:-7px; 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;}}
5. Pasang Kode JS Navigasi Blog Pager Next - Previous Post Berupa Judul Postingan berikut ini di atas kode </body>
<b:if cond='data:view.isPost'><script> //<![CDATA[// Navigasi Next Prev!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>
Catatan:
1. Di Blogger V3 biasanya sudah ada kode
<b:include cond='data:view.isPost' name='postPagination'/>
untuk menampilkan navigasi link next-prev. Jika tidak ada, maka tambahkan kode itu di bawha kode
<b:includable id='postFooter' var='post'>
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Bismillah........ SEMOGA!
ReplyDeleteDi Cara yang kedua ada yang error mas CB. Tepatnya ada satu kondisi yang kurang. di bagian "a href" tidak ada ">" atau "/>"
ReplyDeletekan sudah ada < /a > ? Yang mana ya?
DeleteMas, kalau style yang kayak di blog ini, cara yang mana itu?
Deletesama saya juga ada yg kurang kodenya Mas?
Deleteini screenshootnya!
https://2.bp.blogspot.com/-xfH4Il99C9k/Vr2sMqfqEWI/AAAAAAAAACY/-aYjJy8Ec5o/s1600/Screenshot_24.png
itu erornya gak ada spasi mas antara tanda ' dan expr nya
Deleteistimewa bos... yang ketiga yang cocok sama blog saya
ReplyDeleteTrims gan, tambah keren!
ReplyDeleteterima kasih atas artikelnya sangat membantu
ReplyDeletegan cara ganti tulisan "next" atau "previous" nya jadi "selanjutnya" atau sebelumnya" gimana?
ReplyDeletenggak bisa ternyata di template blog saya, bentrok dengan kode bawaan template heheheh
ReplyDelete