Cara Mengganti Newer Older Post dengan Judul Posting - Blogger Bandung

Cara Mengganti Newer Older Post dengan Judul Posting

Jika Anda ing mengganti tulisan Newer Post - Home - Older Post atau Posting Terbaru - Beranda - Posting Lama dengan Judul Tulisan, khususnya pengguna template bawaan blogger, gunakan kode di bawah ini.

Mengganti tulisan atau tautan link teks Newer Older Post di bawah tulisan dengan Judul Posting akan membuat blog lebih ramah pengguna (user friendly) dan lebih ramah mesin pencari (seo friendly) karena ada kata kunci yang terindeks oleh mesin pencari.

Mengganti Older Post & Newer Link dengan Judul Posting Blog dimaksudkan agar lebih seo dan user friendly --lebih mudah diindeks mesin telusur dan ramah pengguna karena jelas posting berikutnya atau sebelumnya tentang apa, dibandingkan hanya berupa "older post" atau "newer post" sebagaimana di template bawaan blogger.

Cara Mengganti Newer Older Post dengan Judul Posting

Cara membuatnya:

1. Layout > Add a Gadget > HTML/JavasCript

2. Judul Kosongkan

3. Copas kode berikut ini

<style type="text/css"> #blog-pager-newer-link {font-size:85%;width:200px;text-align:left;} #blog-pager-older-link {font-size:85%;width:200px;text-align:right;} </style> <script type="text/javascript"> $(document).ready(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").text("<< " + newerLinkTitle); }); 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 }); }); </script>

4. Save!

Itu dia Cara Mengganti Newer Older Post dengan Judul Posting. (Sumber).

Cara di atas adalah untuk template blog bawaan Blogger. Jika tidak berfungsi di blog Anda, coba cara kedua berikut ini.

Cara Lain Mengganti Newer Older Post dengan Judul Postingan

Contoh atau demonya seperti di blog yang sedang Anda baca ini. Di bagian bawah posting, sebelum Related Posts.

1. Pasang Link ke jQuery

Copas kode berikut ini di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript></script>

Jika sudah ada, gak usah dipasang lagi.

2. Pasang Kode CSS

Simpan di atas kode </head>

<b:if cond='data:view.isPost'><style type='text/css'>
.halaman{padding:5px 0;background:#fff;border-top:1px solid #ccc;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:'Oswald',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>

3. Pasang HTML/XML

Copas di atas kode <data:post.body/> yang kedua atau ketiga, atau di atas kode <div class='related posts'>

<b:if cond='data:view.isPost'><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>

4. Pasang Kode JavaScript

Simpan di atas kode </body>

<b:if cond='data:view.isPost'>
<script type="text/javascript">
$(document).ready(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").text(newerLinkTitle);
});
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);
});
});
</script>
</b:if>

5. Save! 

Simpan Template. Beres.

Kode-kode di atas sudah dilengkapi kode tag kondisional sehingga teks Older Post & Newer Link dengan Judul Posting Blog hanya muncul di halaman dalam, tidak muncul di halaman depan atau halaman indeks dan label.

Demikian Cara Mengganti Older Post & Newer Link dengan Judul Posting Blog. (Blogger Bandung).*