Home » Blogger » Cara Mengganti Next-Previous Newer Older Post dengan Judul Tulisan

Cara Mengganti Next-Previous Newer Older Post dengan Judul Tulisan

next previous newer older post judul tulisan

DI bawah postingan blog Blogger, biasanya ada blog pager berupa link bertuliskan Newer Post, Home, dan Older Post atau Next Post dan Previous Post.

Tautan NextPrev tersebut adalah navigasi blog sekaligus link internal ke tulisan sebelumnya dan berikutnya. Kita bisa mengganti link tersebut dengan yang lebih SEO dan ramah pengguna (user friendly), yaitu dengan menggantinya menjadi judul tulisan atau postingan.

Dengan begitu, pembaca akan langsung tahu artikel sebelum dan sesudah postingan yang baru saja dibacanya. Ini contohnya:

 

Next Post Home Older Post dengan Judul

Cara Mengganti Next-Previous Newer Post Older Post dengan Judul Tulisan

Berikut ini Cara Mengganti Next-Previous (Newer Post – Older Post) dengan judul tulisan

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.halaman{padding:5px 0;background:#fff;margin:10px 0 0}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#48d;}
.pager-title-left,.pager-title-right{font-family:&#39;Oswald&#39;,sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}
</style>
</b:if>

2. Simpan kode berikut ini di atas kode <b:if cond=’data:post.hasJumpLink’> atau di atas kode <div class=’post-footer’>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title-left'>Previous</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
You are reading the newest post
</b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Next</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
You are reading the latest post
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
</b:if>

3. Simpan kode berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
$(document).ready(function(){
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);
});
});
</script>
</b:if>

4. Cari dan ganti kode berikut ini:

<!-- navigation -->
<b:include name='nextprev'/>

dengan kode ini:

<!-- navigation -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

5. Simpan Template!

Beres. Kini tulisan Newer Post dan Older Post sudah berganti menjadi judul postingan.

Cara Mudah Mengganti Nextprev dengan Judul

Jika cara di atas dirasa rumit, lakukan cara berikut ini. Namun, Anda tetap harus melakukan langkah no. 4 di atas agar blog pager tidak ganda.

1. Tema > Edit HTML
2. Lakukan langkah no. 4 di atas.
3. Simpan kode berikut ini di atas kode <b:if cond=’data:post.hasJumpLink’> atau <div class=’post-footer’>

<!-- Blog Pager New Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.halaman{padding:5px 0;background:#fff;margin:10px 0 0}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#48d;}
.pager-title-left,.pager-title-right{font-family:&#39;Oswald&#39;,sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}
</style>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title-left'>Previous</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
You are reading the newest post
</b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Next</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
You are reading the latest post
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
<script type='text/javascript'>
$(document).ready(function(){
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);
});
});
</script>
</b:if>
<!-- Blog Pager New End -->

Save!

Itu dia cara mengganti Next-Previous atau link Newer Post – Older Post dengan Judul Tulisan, khususnya di template bawaan Blogger.

Sumber

 

Leave a Reply

Your email address will not be published. Required fields are marked *