BERIKUT ini cara Mengubah Link Older Post - Newer Post menj adi Next-Previous berupa Judul Posting di Template Premium Genesis SEO.
Perubahan link "posting lama", "beranda", "posting baru" ini jelas untuk menambah SEO blog. Link navigasi halaman blog akan menjadi lebih SEO Friendly dan User Friendly.
Lakukan langkah berikut ini dengan seksama dan penuh ketelitian :
1. Klik "Template" > "Edit HTML"
2. Copas kode berikut ini di bawah kode ]]></b:skin>
<!-- Blog Pager NextPrev-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border-top:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pager-isi a,.pager-isi .linkgrey{width:46%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:105%;font-weight:normal}
a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjyloOq-StkjdlGzFDzd9HjPdyQioASWlFcvzkICVxcErSe91Sj0fypYKqoXT5OHuwLc-aEbDXZu6Q3P16_1PbHtJrCV9lO0IlfxvgmL4QbSjH-ILlryWHG-F4BKZjWQxenBxteQqIZcQ/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiesouMSFX84GoqnAZrGiWRIEW_OwCmkky6Yu6eo48K0S-70oyzeUs3kTwdt6DR7El1EeqOx_3slC7wRBTopbBX6uMuOefgVngdQaPwZEDvSpsKUK8JdpErDQvNyh_S-kfAe-g0jAXLU/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{text-align:left;background: none;}
.pager-isi .linkgrey.right{text-align:right;background: none;}
.pager-isi h5 {font-size: 14px;font-family: Arial;font-weight: normal}
#blog-pager a {width:248px;margin-right:1px}
</style>
</b:if>
<!-- NextPrev End-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border-top:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pager-isi a,.pager-isi .linkgrey{width:46%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:105%;font-weight:normal}
a.blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjyloOq-StkjdlGzFDzd9HjPdyQioASWlFcvzkICVxcErSe91Sj0fypYKqoXT5OHuwLc-aEbDXZu6Q3P16_1PbHtJrCV9lO0IlfxvgmL4QbSjH-ILlryWHG-F4BKZjWQxenBxteQqIZcQ/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiesouMSFX84GoqnAZrGiWRIEW_OwCmkky6Yu6eo48K0S-70oyzeUs3kTwdt6DR7El1EeqOx_3slC7wRBTopbBX6uMuOefgVngdQaPwZEDvSpsKUK8JdpErDQvNyh_S-kfAe-g0jAXLU/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{text-align:left;background: none;}
.pager-isi .linkgrey.right{text-align:right;background: none;}
.pager-isi h5 {font-size: 14px;font-family: Arial;font-weight: normal}
#blog-pager a {width:248px;margin-right:1px}
</style>
</b:if>
<!-- NextPrev End-->
3. Copas kode berikut ini di atas kode <div id='related-posts'>
<!-- Nexprev -->
<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-isi'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
<b:else/>
<span class='linkgrey left'>
<h6>PREVIOUS</h6>
<h5>This is the most recent post.</h5></span>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
<b:else/>
<span class='linkgrey right'>
<h6>NEXT</h6>
<h5>This is the last post.</h5></span>
</b:if>
</div>
</div>
</b:if>
<!-- Nextprev End-->
<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-isi'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
<b:else/>
<span class='linkgrey left'>
<h6>PREVIOUS</h6>
<h5>This is the most recent post.</h5></span>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
<b:else/>
<span class='linkgrey right'>
<h6>NEXT</h6>
<h5>This is the last post.</h5></span>
</b:if>
</div>
</div>
</b:if>
<!-- Nextprev End-->
4. Copas kode berikut ini di atas kode </body>
<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>
$(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>
4. Cari dan ganti kode <b:include name='nextprev'/> dengan kode ini:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='nextprev'/>
</b:if></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='nextprev'/>
</b:if></b:if>
6. Save Template!
Demikian Mengubah Older-Newer-Post Jadi Next-Previous Judul Posting di Genesis SEO.
Heading Style
Tambahkan kode berikut ini di atas kode </head>
<style>
.post h1{font-size:22px;font-weight: 700;padding:10px 0;line-height:normal}
.post h2{font-size:20px;font-weight: 700;padding:10px 0;line-height:normal}
.post h3{font-size:18px;font-weight: 700;padding:10px 0;line-height:normal}
.post h4{font-size:16px;font-weight: 700;padding:10px 0;line-height:normal}
</style>
Good Luck! (http://genesisseo.blogspot.com).*
Thanks for reading Mengubah Older-Newer-Post Jadi Next-Previous Judul Posting
sip... makasih mas wkwkwk
ReplyDelete