Cara Mengganti Newer Post & Older Post dengan Next & Previous plus Judul Posting.
SECARA default, navigasi halaman
blogger (blog pager) akan berupa link & teks "Newer Post" (Posting Lebih Baru) dan "Older Post" (Posting Lebih Lama) dan "Home" (Beranda) di bawah kolom komentar.
Berhubung link itu jarang digunakan user alias tidak user friendly, malah hanya nambah beban loading, maka kita bisa menggantinya dengan teks & link NEXT - PREVIOUS berupa judul tulisan sehingga lebih seo dan user friendly.
Tulisan NEXT bisa diganti menjadi BERIKUNYA dan PREVIOUS menjadi SEBELUMNYA.
Cara Mengganti Newer Post & Older Post dengan Next & Previous plus Judul Posting
Berikut ini Cara Mengganti Newer Post & Older Post dengan Next & Previous plus Judul Posting agar lebih seo dan user friendly.
1. Login > Blogger Dashboard
2. Klik "Template" > "Edit HTML"
3. Temukan (Ctrl+F) kode
]]></b:skin> atau
</style>4. Copy & Paste kode berikut ini di atas kode tadi:
/*www.bloggerspice.com Pager*/
#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:'Oswald',sans-serif;font-size:14px;color:#333333;text-transform:uppercase;line-height:1.625em;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:'Oswald',sans-serif;font-size:14px;color:#;text-transform:uppercase;line-height:1.625em;font-weight:700}
.pager-content{width:99.5%;overflow:hidden;margin:10px 0 0;padding:10px 0 0}
.pager-content a:hover,.pager-content{color:#000;text-decoration:none}
.showpageNum a,.showpage a,.showpagePoint{background:#DE3C3C;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;margin-right:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{color:#FFF}
.showpageOf{display:none!important}
5. Cari kode
</head> 6. Copy & Paste kode berikut ini di atas kode
</head>. Lewati tahap ini jika di template Anda sudah ada link jQuery dan link Font Google "Oswald".
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
7. Cari kode <data:post.body/>. Akan ditemukan tiga hingga empat kode tersebut.
8. Copy & Paste kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.
Bisa juga di atas kode <div id='related post'> (kode posting terkait) atau di atas kode <div id='comments'> (kode kotak komentar)<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-content'>
<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: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:if>
</div>
</div>
<div class='clear'/>
</div>
<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>
</b:if>
Sampai tahap ini, link "Newer Post", "Home", dan "Older Post" masih ada, belum jadi Next dan Previous plus judul tulisan.
Kini saatnya memunculkan Next and Previous dan menyembunyikan blog pager yang lama bawaan blogger.
9. Temukan kode berikut ini. Biasanya di bawah kode
<b:includable id='nextprev'> <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'><data:newerPageTitle/></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'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
10. Tambahkan tag kondisional berikut ini di atas dan di bawah kode tersebut.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
Place the above code Here
</b:if></b:if>
Sehingga jadi seperti di bawah ini. Atau jika bingung, hapus kode no. 9 tadi dan gantik dengan kode berikut ini:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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'><data:newerPageTitle/></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'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
</b:if></b:if>
11. Save Template!
Demikian Cara Mengganti Newer Post & Older Post dengan Next & Previous plus Judul Posting biar lebih seo dan user friendly. Good Luck!
Sumber:
http://www.bloggerspice.com/2015/03/Replace-blog-pager-with-next-Previous-post-titles-above-blogger-comment-box.html 
Thanks Tutornya, sangat membantu
ReplyDelete