Komunikasi Praktis

Blog tentang komunikasi media jurnalistik, menulis, public speaking, pembawa acara mc, siaran radio, presentasi, humas pr, public relations, blogging, podcast

  • HOME
  • Jurnalistik
  • Media
  • Humas
  • Speaking
  • Blogging
    • Templates
    • Tips SEO
    • AdSense
    • Posting
  • Komunikasi
  • About
  • Kontak
  • Sitemap
  • Disclaimer
  • Iklan
Home Tips SEO Cara Mengganti Older Post - Newer Post dengan Judul Tulisan di Blogger

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

Romeltea Komunikasi Praktis Romeltea
September 15, 2015
Romeltea Follow @romel_tea
Romeltea

Baca Juga

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

NEXT PREVIOUS Berupa Judul Tulisan
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 | Tags: Blogging Desain Blog Tips SEO

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

0 komentar on Cara Mengganti Older Post - Newer Post dengan Judul Tulisan di Blogger

Post a Comment

Subscribe to: Post Comments (Atom)

Recent Posts

Popular Posts

  • Contoh Naskah Pembukaan oleh Pembawa Acara (MC)
  • Cara Menjadi Pembawa Acara (MC) yang Baik
  • Karya Tulis Ilmiah: Pengertian, Karakteristik, dan Jenis-Jenis
  • Contoh Naskah MC (Pemandu Acara) untuk Acara Agustusan
  • Teknik Debat dan Cara Berdebat yang Baik
  • Daftar Kata Baku – Tidak Baku Bahasa Indonesia
  • Pengertian Literasi Secara Bahasa dan Istilah
  • Jurnalisme Kuning Jadi Trend Situs Berita
  • Arti dan Asal-Usul Teks Lorem Ipsum Dolor Sit Amet
  • WhatsApp Makin Menggerus Budaya Menulis

Join us on Facebook

Komunikasi Praktis

Info Bola & MotoGP

Recommended Yeuh!

Hosting Unlimited Indonesia

Categories

Bahasa Bahasa Jurnalistik Bisnis Online Blogging Desain Blog Google Adsense Humas Internet Jurnalistik Jurnalistik Online Komunikasi Media Media Online Pers Presentasi Public Speaking Radio Teknik MC Template Blog Tips SEO

About

Komunikasi Praktis adalah blog tentang keterampilan komunikasi: jurnalistik, media massa, kepenulisan, public speaking, mc, siaran radio, presentasi, humas, public relations, blogging, podcasting, dll.

Web Partners

  • Romeltea Online
  • Romeltea Media
  • Contoh Blog
  • Bandung Aktual
  • Risalah Islam

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Copyright © Komunikasi Praktis. All rights reserved