Mengganti Link Posting Lama, Beranda, dan Posting Baru Menjadi Judul

Baca Juga

Cara mengubah tulisan link "Posting Lama" (Older Post), "Beranda" (Home), dan "Posting Baru" (Newer Post) menjadi judul artikel biar lebih SEO friendly.

POSTING ini lanjutan tips "Mengganti Link Newer Post, Home, Older Post dengan Judul Posting". Tutorial sebelumnya berlaku untuk blog yang sudah menggunakan navigasi halaman (blog pager) berupa nomor/angka (numbered page navigation).

Nah, jika navigasi halaman blognya masih berupa Posting Lama - Posting Baru, maka tips sebelumnya akan memunculkan masalah di halaman label, yakni link "Older Post" dan "Newer Post"-nya pun menjadi judul di halaman depan dan halaman post per label.

Jika template blog Anda belum menggunakan navigasi halaman nomor, dan ingin mengubah link posting lama (older post), beranda (home), dan posting baru (newer post) menjadi judul posting yang tentunya lebih SEO Friendly dan User Friendly, maka gunakan cara berikut ini.

Demonya bisa dilihat di New Johny Wuss yang sukses memasang kode ini.

Cara Mengganti Link Posting Lama, Beranda, dan Posting Baru Menjadi Judul

1. Di dashboard blog, klik "Template" > "Edit HTML"

2. Temukan (Ctrl+F) kode </head>

3. Copy & Paste kode berikut ini di bawah kode </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#blog-pager-newer-link {font-size:13px;width:290px;float:left; text-align:left;}

#blog-pager-older-link {font-size:13px;width:290px;float:right; text-align:right;}

#blog-pager-older-link a{width:280px;text-align:right;color:#555;font:bold 13px Arial;padding:5px}

#blog-pager-newer-link a{width:290px;text-align:left;color:#555;font:bold 13px Arial;padding:5px}

a.home-link{display:none}

</style>

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

<script type="text/javascript" src="http://yourjavascript.com/4635837019/blogpager.js"></script>

</b:if>

CATATAN:

Jika di template blog Anda sudah ada kode warna merah, berapa pun serinya, maka hapus saja, gak usah diikutkan!

4. Save Template!

Sekarang coba klik salah satu posting, apakah sudah link "posting terbaru", "beranda", dan "posting lama"-nya berubah. Jika belum berubah, berarti Anda gagal :)

Silakan ulangi lagi dengan teliti. Jika berhasil, maka di halaman depan tetap akan ada menu/tombol link "home" (beranda) dan "older post" (posting lama), sedangkan di halaman dalam (single post/single page) akan 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

Demikian cara Mengganti Link Posting Lama, Beranda, dan Posting Baru Menjadi Judul Tulisan. Good Luck & Happy Blogging! (www.contohblog.com).*