Membuat
Artikel Terkait Bergambar di bawah Postingan ( Related Posts )
Letakan di atas ]]></b:skin>
copy yg di bawah ini
#artikel-terkait a {color:#ddd;}
#artikel-terkait ul {width:100%;margin-bottom:10px;padding:0px;list-style:none;margin-left: 0px;}
#artikel-terkait ul li {background: #111010;
float: left;
height: 204px;
margin: 0 7px 7px 0;
width: 280px;
font: 14px Open Sans;
text-align: center;
padding-top: 10px;
padding: 0;
border-bottom: 1px solid #262525;
transition: all 400ms ease-in-out;overflow: hidden;}
#artikel-terkait img {max-width: 100%;
width: 280px;
height: 180px;
opacity: 1;
padding: 0;
object-fit: cover;
background: none;
box-shadow: none;
transition: all 400ms ease-in-out;}
#artikel-terkait ul li:nth-child(3n+3) {margin-right:0px;}
.hrecipe{line-height:1.7em;font-size:13px;margin:6px 0 0;padding:12px;
background:#f8f8f8;border:none;color:#303641;overflow:hidden;}
]]></b:skin>
Letakan di bawah
<b:else/><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "item"'>
copy yg di bawah ini
<!-- ARTIKEL TERKAIT MULAI -->
<b:if cond='data:blog.pageType == "item"'>
<div id='inikotak'>
Related Posts
</div>
<div id='artikel-terkait'>
<script type='text/javascript'>
//<![CDATA[
var ry='';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();
function related_results_labels(c)
{
for(var b=0;
b<c.feed.entry.length;
b++)
{
var d=c.feed.entry[b];
titles[titlesNum]=d.title.$t;
for(var a=0;
a<d.link.length;
a++)
{
if('thr$total'in d)
{
commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment
}
else
{
commentsNum[titlesNum]=rdisable
};
if(d.link[a].rel=="alternate")
{
urls[titlesNum]=d.link[a].href;
timeR[titlesNum]=d.published.$t;
if('media$thumbnail'in d)
{
thumb[titlesNum]=d.media$thumbnail.url
}
else
{
thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkloxiikL5hhYWwIBx_ehZuJFbInEO7KTHavTwNKnuQoetSoQyOU1D1PW0Y8vigODJDM3PxxXNv71U3ffR2TmUf2afvt8zuDZeumyguWrpgq83x-yX96WbMW7KQx1kDxVHwhiyFP2XFLM/s1600/no+image.jpg'
};
titlesNum++;
break
}
}
}
}
function removeRelatedDuplicates()
{
var b=new Array(0);
c=new Array(0);
e=new Array(0);
f=new Array(0);
g=new Array(0);
for(var a=0;
a<urls.length;
a++)
{
if(!contains(b,urls[a]))
{
b.length+=1;
b[b.length-1]=urls[a];
c.length+=1;
c[c.length-1]=titles[a];
e.length+=1;
e[e.length-1]=timeR[a];
f.length+=1;
f[f.length-1]=thumb[a];
g.length+=1;
g[g.length-1]=commentsNum[a]
}
}
urls=b;
titles=c;
timeR=e;
thumb=f;
commentsNum=g
}
function contains(b,d)
{
for(var c=0;
c<b.length;
c++)
{
if(b[c]==d)
{
return true
}
}
return false
}
function printRelatedLabels(a)
{
var y=a.indexOf('?m=0');
if(y!=-1)
{
a=a.replace(/\?m=0/g,'')
}
for(var b=0;
b<urls.length;
b++)
{
if(urls[b]==a)
{
urls.splice(b,1);
titles.splice(b,1);
timeR.splice(b,1);
thumb.splice(b,1);
commentsNum.splice(b,1)
}
}
var c=Math.floor((titles.length-1)*Math.random());
var b=0;
if(titles.length==0)
{
dw+=rn
}
else
{
dw+=ry;
dw+='<ul>';
while(b<titles.length&&b<20&&b<maxresults)
{
if(y!=-1)
{
urls[c]=urls[c]+'?m=0'
}
if(commentYN=='yes')
{
comments[c]=' - '+commentsNum[c]
}
else
{
comments[c]=''
};
dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c].replace("/s72-c/","/s280/")+'" title="'+titles[c]+'"/></a></div><a href="'+urls[c]+'" title="'+titles[c]+'" rel="nofollow" class="rellu">'+titles[c]+'</a><div class="clear"></div></li></div>';
if(c<titles.length-1)
{
c++
}
else
{
c=0
}
b++
}
dw+='</ul>'
};
urls.splice(0,urls.length);
titles.splice(0,titles.length);
document.getElementById('artikel-terkait').innerHTML=dw
};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/>
</b:if>
<!-- END -->
dengan Script yang sudah di Parsing
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #222;display:block;height:72px;position:relative;width:74px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.6}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
Copy Paste kode Script di bawah ini taruh di atas
</head>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined') thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNC26R2uCDSRD7pJ0mjBEhD1660rjTFHjVI490j3kAq8kEwlbk3gkqKBZR54M2DIFpW4gp3sZkJS5Mgkh1E5mBbdwrR9IPAMsuTKCmCdGUx_EPB14ZSUEA_Zh_clw9uVfaHr2vUqk3nyI/s400/noimage.png"}}if(relatedTitles[relatedTitlesNum].length>35)
relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
ok selanjutanya cari kode
<b:if cond='data:blog.pageType == "item"'><data:post.body/> di dalam template
Jika sudah ketemu lalu Copy pastekan Kode script di bawah ini :
<b:if cond='data:blog.pageType == "item"'>
<h2>Judul bebas</h2>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zLp2sepEYajn-7sxwWrnfiU6ayDWvha72k3i7q_j39yzEG6850scWS5JpcDME3QTToJScTUUfwIlfgzI81RS1h77WEfd1VcGJUqxh95eE4o-gIhg7ubQuPkT_J3cgzxKOIHTlEmIvbA/s1600/no+image.jpg";
var maxresults=7;
</script><script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNC26R2uCDSRD7pJ0mjBEhD1660rjTFHjVI490j3kAq8kEwlbk3gkqKBZR54M2DIFpW4gp3sZkJS5Mgkh1E5mBbdwrR9IPAMsuTKCmCdGUx_EPB14ZSUEA_Zh_clw9uVfaHr2vUqk3nyI/s400/noimage.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if>
ok gaes jika sudah selesai simpan template anda
Langkah pertama silahkan anda copy paste kode Related posts di bawah ini di atas ]]></b:skin> Jika sebelumnya Template sudah menggunakan related Posts silahkan hapus dan di ganti dgn yg ini.
