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.
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).
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.
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 == "item"'>
<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
3. Simpan kode berikut ini di atas kode </head> .
4. Cari dan hapus kode berikut ini
5. Ganti dengan kode berikut ini:
6. Cari kode seperti di bawah ini
7. Copas kode berikut ini tepat di atas kode </b:includable>
8. Cari kode berikut ini:
9. Hapus dan ganti dengan kode berikut ini:
10. Copas kode berikut ini di atas kode </body>
Save! Simpan Template
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 != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 == "item"'>
<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next Post »</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>
<b:include name='nextprev'/>
9. Hapus dan ganti dengan kode berikut ini:
<b:if cond='data:blog.pageType == "index"'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <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 != "index"'>
<script type='text/javascript'>
$(document).ready(function(){ 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 }); 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:first").text(); $("a.blog-pager-newer-link").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
« Prev Post
Next
Next Post »
Next Post »
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.
ReplyDeleteGenesis SEO didesain khusus sudah sangat seo, jadi kodenya gak cocok :)
DeleteOke mbak. Eh, mas :D
DeleteTerima kasih mas
ReplyDeleteterima kasih mas..berhasil juga di template ane..nice share
ReplyDeleteakhirnya ketemu juga mengganti ponsting lama menjadi judul tulisan, terima kasih kang sudah berbagi pengetahuan, sangat bermanfaat untuk sayaa ^^
ReplyDeleteSangat bermanfaat boz agan
ReplyDeletepositif hasilnya
ReplyDeleteini lebih seo friendly ya jadinya?
ReplyDeleteDi saya gak muncul nama postingnya om
ReplyDelete