Cara Memasang Artikel Terkait Pada Blog, How to Install Related Articles On Blog, Kali ini saya akan membagikan script artikel terkait yang lumayan keren untuk dipasang pada blog, seperti yang kita ketahui bersama bahwa dengan memasang artikel terkait pada blog merupakan salah satu tekhnik seo yang berfungsi juga agar pengunjung blog membaca artikel yang ada pada blog itu sendiri.
Disini saya tidak panjang lembar untuk menjelaskan secara rinci fungsi dari artikel terkait, karena saya anggap Anda sudah mengerti tentang fungsi secara garis besar.
Oke, langsung saja ketahap pemasangan artikel terkait yang saya maksudkan dan bentuknya juga seperti pada gambar di atas.
1. Seperti biasa, masuk di blog
2. Edit HTML
3. Masukkan code di bawah ini tepat diatas code
]]></b:skin> atau di atas code
</head>
/* css related posts */
#related_posts { background-color:#FFF;
margin:10px 0 0 0; padding:10px; -moz-box-shadow:inset 0 0 1px #000000;
-webkit-box-shadow:inset 0 1px 1px #000000; box-shadow:inset 0 0 1px
#000000 }
#related_posts h4 { color:#fff; font-size:15px;
margin:-10px -10px 10px; padding:5px 3px; text-align:center;
font-weight:bold; -moz-text-shadow:2px 0 0 #333; -webkit-text-shadow:2px
0 0 #333; text-shadow:2px 0 0 #333; position:relative;
background-color:#0b86a5 }
#related_posts ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#related_posts ul { margin-top:10px }
#related_posts li { float:left; width:100%; margin:0 0 5px}
#related_posts
.gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0;
padding:3px; border:1px solid #ddd; -moz-border-radius:2px;
-webkit-border-radius:2px; border-radius:2px }
#related_posts strong { font-weight:normal; font-size:15px; line-height:1.1em }
#related_posts p { margin:2px 0 0; font-size:12px }
.loadingxx
{ width:100%; min-height:150px; background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUFIuf0tv-94VufEFPcemm-qCtg01NRWbWOYd296OjXGkDuUvGgpbjEaimxTlnHCTjK1WgpLtHsIOLsp5xAVVKijbJ1B_laOvNNTwT0-616SMG22cUshUZXuMFZXJgJnkmPsJDRKb2QKx_/s1600/loading-dip.gif)
no-repeat center; display:block; text-indent:-9999px }
.kotak-dalem {
background-color:transparent; padding:0; -moz-box-shadow:none;
-webkit-box-shadow:none; box-shadow:none; border:none; margin-bottom:0 }
4. Selanjutnya cari code <data:post.body/> dan letakkan code di bawah ini, tepat di bawah code <data:post.body/>
<div id='related_posts'/>
<script type='text/javascript'>
//<![CDATA[
function
relatedPostsWidget(a){(function(e){var
f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:100,relatedTitle:"Artikel
Terkait",readMoretext:"Read
more",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjdPmDidjYKjRuAMqIyH-Dc8RuU-o5pp4gUD37McbqzM7s6afjF1MeqxGYKeNn9k3ERlk-N51c81v17gddBuJUvmmTlWmYVItnfrFpQ3BGKOVK24eL3vVtCwnPOFFJ9Flcs5gosEI1f_w/s70-c/20.jpg",rlt_thumb:55,recentTitle:"Recent
Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var
k=0,b=null,g=null;if(!f.containerSelector){document.write('<div
id="related_posts"></div>');f.containerSelector="#related_posts"}var
c=function(t,n){k++;if(t.feed.entry){for(var
o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var
m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content"
in r){var l=r.content.$t}else{if("summary" in r){var
l=r.summary.$t}else{var l=""}}var
l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var
l=l.substring(0,f.rlt_summary)+"..."}var
q=r.title.$t;if("media$thumbnail" in r){var
s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var
s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#related-posts-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var
i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var
t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var
n=o-1;n>=0;n--){var
m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a
class="jdlunya" href="'+p+'"
title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span
class="gmbrrltd"><img
style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block"
alt="'+s+'"
src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a
title="'+s+'"
href="'+p+'">'+f.readMoretext+"</a></p></li>")};var
j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var
h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var
d=function(){if(f.containerSelector!="#related_posts"){var
l=e(f.containerSelector);if(l.length!=1){return}b=e('<div
id="related_posts"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var
n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div
id="related-posts-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul
"+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var
m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#related_posts",
maxPosts: 5,
loadingClass: "loadingxx",
rlt_thumb: 50
});
//]]>
</script>
</div>
5. Save template
Catatan :
Biasanya dalam template terdapat lebih dari 3 code <data:post.body/> jadi letakkan di bawah code <data:post.body/> yang ke 2 dan bilah tidak bisa coba letakkan pada code yang saya maksud satu persatu sampai berhasil.
Demikian Cara Memasang Artikel Terkait pada blog, smoga dengan tutorial di atas berhasil diterapkan pada blog Anda.