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

Baca Juga

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

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).*

Sumber