Cara Membuat Related Post/Artikel Terkait di Bawah Postingan
Berikut tutorial membuat related post yang simple dan tidak ribet
Buka Blogger > Tema > Klik tombol Edit HTML dan tambahkan kode berikut ini sebelum kode ]]></b:skin> atau </style>
/* TipsRyand Related Post */
#related-post {margin:0 auto;padding:0;text-align:center;}
#related-post h4{font-size:14px;margin:0 0 10px 0;background:#374760;color:#fff;padding:12px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden}
#related-post h4:after{display:inline-block;content:&quot;\f02c&quot;;font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#2e3b4f;color:#fff;top:0;right:0;padding:13px 20px;position:absolute}
.relhead {font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;}
#related-summary .news-text{display:block;text-align:left;font-weight:normal;color:#888;font-size:12px;margin-top:10px}
ul#related-summary{margin:0 auto;padding:0 10px;list-style:none;word-wrap:break-word}
ul#related-summary li{position:relative;list-style:none outside none;overflow:hidden;margin:0 10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.12)}
ul#related-summary li:last-child{border:0}
ul#related-summary li a{display:block;}
ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:90px;max-height:70px;vertical-align:middle;overflow:hidden;float:left;margin:0 10px 0 0;border:1px solid rgba(0,0,0,0.12);padding:3px;background:#fff;transition:all 1s ease-out}
ul#related-summary li:hover img {opacity:0.96;}
ul#related-summary li a.relinkjdulx{position:relative;color:#2c4584;display:block;font-weight:700;line-height:normal;overflow:hidden;text-align:left;text-transform:none}
ul#related-summary li a.relinkjdulx:hover{color:#374760;}
@media only screen and (max-width:640px){
h1.post-title.entry-title,h2.post-title.entry-title{font-size:180%!important;}
ul#related-summary {padding:0}
ul#related-summary li {padding:5px 0;}
ul#related-summary li:last-child{border-bottom:none;}
ul#related-summary li img,#related-summary .news-text{display:none;}
ul#related-summary li a.relinkjdulx {display:block;font-size:14px;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0;}Langkah selanjutnya, tambahkan kode dibawah ini sebelum kode </body>
<script type='text/javascript'>
//Related Post Thumb
$("ul#related-summary li img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/w200-h140-c/"))});
</script>Tambahkan kode berikut sebelum kode </head>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 5;
var numchars = 120;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+" ... </span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
</b:if>terakhir, tambahkan kode dibawah ini diatas kode <div class='post-footer'> atau dibawah kode<data:post.body/> yang kedua atau ketiga, sampai Related Post muncul.
<div id='related-post'>
<div class='relhead'>
<h4><span>Artikel Terkait</span></h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
</div>Akhirnya jadi juga, jika ada yang ingin ditanyakan silahkan komentar dibawah, jika ada kesempatan akan saya balas. Terimakasih