Cara Mengganti Older Post - Newer Post dengan Judul Tulisan di Blogger

Cara Mengganti Older Post - Newer Post dengan Judul Tulisan di Blogger menjadi NEXT PREVIOUS Berupa Judul Tulisan untuk SEO.

MENU, link, atau tulisan NEXT & PREVIOUS seperti yang ada di bawah tiap posting blog ini disebut Blog Pager (Navigasi Halaman Blog) untuk memandu pengunjung membuka tulisan berikutnya atau sebelumnya.

NEXT & PREVIOUS juga merupakan Internal Link yang bagus buat SEO (ramah mesin pencari) sekaligus ramah pengunjung (User Friendly).

Tulisan NEXT & PREVIOUS ini menjadi trending desain blog/web, sebagai pengganti default link bawaan blogger --Older Post (Posting Lama), Home (Beranda), dan Newer Post (Tulisan Terbaru)-- yang biasa ada di bagian bawah kolom komentar.

Link bawaan blogger itu lalu dimanipulasi oleh para desainer blogger agar lebih seo dan user friendly.

Cara Membuat NEXT PREVIOUS Berupa Judul Tulisan

Berikut ini Cara Membuat NEXT PREVIOUS Berupa Judul Tulisan sebagaimana diterapkan di blog Komunikasi Praktis ini.
 
1. Template > Edit HTML
2. Copas kode CSS berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.halaman{padding:1px;background:#fafafc;border-top:1px solid #ccc;margin-top:10px}
.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:#666!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}
.current-pageleft{padding:0 0 0 15px;}
.current-pageright{padding:0 15px 0 0;}
.halaman-kiri a,.halaman-kanan a{color:#555;}
.pager-title-left{font-family:Arial,sans-serif;font-size:20px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#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}
#blog-pager {margin:1px}
</style>
</b:if>

3. Copas kode HTML berikut ini di atas kode <div id='related post'> atau semisalnya

<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>
</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>
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
</b:if>

4. Copas kode JavaSript berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
$(document).ready(function(){
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);//rgt
});
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:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if>

5. Gunakan Tag Kondisional untuk menyembunyikan Blog Pager bawaan blogger, sehingga di Homepage, Halaman Label, dan Halaman Indeks tetap berupa Older Post - Newer Post.

- Cari kode <b:includable id='nextprev'>
- Ubah menjadi seperti di bawah ini:

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <div class='blog-pager' id='blog-pager'>
            BANYAK KODE LAIN DI SINI
          </div>
</b:if>
</b:if><div class='clear'/>
</b:includable>

Intinya, tinggal menambahkan kode berwarna merah.

6. Save Template!

Jika merasa kurang jelas dengan tips  Membuat NEXT PREVIOUS Berupa Judul Tulisan di Bawah Posting Blog ini, silakan langsung saja ke sumbernya.

Cara Lain Mengganti Older/Newer Post dengan Judul Posting

Jika gagal dengan cara di atas, Anda bisa mencoba tips Cara Mengganti Older Post - Newer Post dengan Judul Tulisan di Blogger yang dishare My Blogger Lab berikut ini.

Cara memasangnya lebih mudah:
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. 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>

3. Save!

Jika dilakukan dengan benar, baik cara pertama maupun cara kedua, maka tulisan/link Newer Post/Older Post sudah berganti menjadi judul posting sehingga lebih SEO dan User Friendly. Wasalam. (http://www.komunikasipraktis.com).*

» Thanks for reading: Cara Mengganti Older Post - Newer Post dengan Judul Tulisan di Blogger