August 30, 2015

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

August 30, 2015

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

newer post older post blog pagerPOSTING 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.

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


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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

10 comments on Mengganti Link Posting Lama, Beranda, dan Posting Baru Menjadi Judul

  1. Di template genesis ada dua kode dengan seri 1.7.1 dan 1.10.2 ...Udah di oprek habis-habisan belum bisa mas. Gagal terus dari kemarin. Hiks.

    ReplyDelete
    Replies
    1. Genesis SEO didesain khusus sudah sangat seo, jadi kodenya gak cocok :)

      Delete
    2. Oke mbak. Eh, mas :D

      Delete
  2. terima kasih mas..berhasil juga di template ane..nice share

    ReplyDelete
  3. akhirnya ketemu juga mengganti ponsting lama menjadi judul tulisan, terima kasih kang sudah berbagi pengetahuan, sangat bermanfaat untuk sayaa ^^

    ReplyDelete
  4. Sangat bermanfaat boz agan

    ReplyDelete
  5. ini lebih seo friendly ya jadinya?

    ReplyDelete
  6. Di saya gak muncul nama postingnya om

    ReplyDelete

Contact Form

Name

Email *

Message *