June 15, 2015

Mengganti Link Newer Post, Home, Older Post dengan Judul Posting

June 15, 2015

Cara Mengubah atau mengganti link (tautan) Posting Terbaru (Newer Post), Beranda (Home), Posting Lama (Older Post) dengan Judul Posting Blog.

Mengganti Link Newer Post, Home, Older Post dengan Judul Posting

DI bagian bawah posting blog biasanya ada link "Newer Post", "Home", dan "Older Post" sebagai navigasi internal untuk memudahkan user membuka posting sebelumnya atau berikutnya.

Biar lebih user friendly dan seo friendly, anchor text pada link tersebut bisa diubah menjadi judul posting sehingga lebih memberikan kejelasan tentang topik posting sebelum/sesudah, juga lebih ramah mesin telusur karena berupa judul tulisan yang mengandung kata kunci.

Mengganti Link Newer Post, Home, Older Post dengan Judul Posting

Caranya sangat mudah. Contoh atau demonya bisa dilihat di bagian bawah kolom komentar blog ini.

1. Layout > Add a Gadget > pilih "HTML/Javascript"
2. Judul kosongkan
3. Copas kode berikut ini di kolom "Content"

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css"> a.home-link{display:none}#blog-pager-newer-link {font-size:85%;width:280px;text-align:left;} #blog-pager-older-link {font-size:85%;width:280px;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>

Keterangan:
Kode warna merah tidak usah disertakan jika kode jQuery tersebut sudah ada di dalam template blog Anda.

4. Save!

Kini tulisan older post, home, dan newer post sudah berubah menjadi judul posting.

CARA LAIN

Jika cara Mengganti Link Newer Post, Home, Older Post dengan Judul Posting di atas tidak ngaruh, lakukan cara berikut ini.

1. Tema > Edit HTML
2. Cari kode berikut ini dan hapus

#blog-pager-newer-link{float:left;font-size:100%;border-right:1px solid #eee;} #blog-pager-older-link{float:right;font-size:100%;border-left:1px solid #eee;} .blog-pager,#blog-pager{clear:both;text-align:center;border:1px solid #eee;} #blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#666;transition:all .3s ease-in-out} #blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#1F5CA8} a.blog-pager-older-link,a.blog-pager-newer-link,a.home-link{display:block;padding:8px 20px;transition:all .3s ease-in-out;} a.home-link{font-size:140%;} #blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover,a.home-box:hover,.mobile-desktop-link a.home-link:hover{color:#1F5CA8;} .mobile-desktop-link a.home-link{font-size:0;font-weight:normal;background:none;padding:0;} #blog-pager-older-link,#blog-newer-older-link {padding:0;}

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

<style type='text/css'>
 .halaman {background:#ecf0f1;padding:10px 0;margin:20px 0 auto;} .halaman-kiri{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out;} .halaman-kanan{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out} .halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#ddd!important;} .halaman-kiri a,.halaman-kanan a{color:#999;} .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: 'Roboto Condensed',Helvetica,Arial,sans-serif;font-weight:400;background:none;text-decoration:none} .current-pageleft{padding:0 0 0 15px;} .current-pageright{padding:0 15px 0 0;} .pager-title-left{font-family: 'Poppins',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out} .isihalaman-kiri{margin:0} .isihalaman-kanan{margin:5px 10px 10px} #blog-pager-newer-link{float:left;padding:0 0 0 15px;} #blog-pager-older-link{float:right;padding:0 15px 0 0;} .blog-pager,#blog-pager{clear:both;text-align:center}
</style>

4. Cari dan hapus kode berikut ini

<b:includable id='nextprev'>
--- ada kode lain di sini ---
</b:includable>

5. Ganti dengan kode berikut 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'> <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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><i class='fa fa-arrow-circle-o-left'/></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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-arrow-circle-o-right'/></a> </span> </b:if> <div class='mobile-link-button' id='blog-pager-home-link'> <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a> </div> <div class='mobile-desktop-link'> <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a> </div> </div> </b:if> </b:if> <div class='clear'/> </b:includable>

6. Cari kode seperti di bawah ini

<b:includable id='post' var='post'>
--- ada kode lain ---
</b:includable>

7. Copas kode berikut ini tepat di atas kode </b:includable>

<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'>Next</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'>Latest</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'>Previous</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'>First</span></span> </b:if> </div> </div> </div> <div style='clear: both;'/> </div> </b:if> 
8. Cari kode berikut ini:
<b:include name='nextprev'/>

9. Hapus dan ganti dengan kode berikut ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:include name='nextprev'/>
</b:if>
</b:if>
</b:if>

10. Copas kode berikut ini di atas kode </body>

<b:if cond='data:blog.pageType != &quot;index&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>

Save! Simpan Template.

Sebelumnya CB juga sudah share tentang cara menghapusnya jika tidak berkenan dengan link-link tersebut. (Cara Menghapus Tombol Newer Post, Home, dan Older Posts).

Demikian Cara Mengganti Link Newer Post, Home, Older Post dengan Judul Posting. Good Luck and Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

4 comments on Mengganti Link Newer Post, Home, Older Post dengan Judul Posting

  1. Pertamaxnya di ambil dulu gan....

    ReplyDelete
  2. Bismillah. Semoga genesisseo-nya semakin sangar....

    ReplyDelete
  3. gak ngaruh Om :D

    ReplyDelete
  4. berhasil thx kang

    ReplyDelete

Contact Form

Name

Email *

Message *