-------------------------------------------------------------------------------------------------------

REPLACE YOUR B SKIN TAG WITH BELOW CODE

--------------------------------------------------------------------------------------------------------

#relatedpost a {

font-family:Oswald,sans-serif

}

#relatedpost h3 {

font:bold 16px Oswald;

color:#fff;

background:#111;

border-top:3px solid #63C4F1;

text-transform:uppercase;

margin:0;

padding:7px 15px

}

ul#relpost {

margin:0;

padding:0

}

ul#relpost li {

list-style:none;

width:98%;

float:left;

border-bottom:1px solid #aaa;

text-align:left!important;

margin:0;

padding:5px

}

ul#relpost li a {

display:block;

font-size:12px

}

ul#relpost li img {

background:#fff;

float:left;

width:30px;

height:30px;

margin-right:5px;

outline:1px solid #aaa;

padding:2px

}

ul#relpost li .relatedpost_description {

font: normal 11px Electrolize,sans-serif

}

]]></b:skin>

-------------------------------------------------------------------------------------------------------

REPLACE YOUR HEAD TAG WITH BELOW CODE

--------------------------------------------------------------------------------------------------------

<script type='text/javascript'>

//<![CDATA[

var relatedpost_count = 5;

var relpost_count = 95;

var relatedpost_data = 0;var relatedpost_title=new Array();var relatedpost_url=new Array();var relpost=new Array();var relatedpost_img=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];relatedpost_title[relatedpost_data]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relpost[relatedpost_data]=saringtags(postcontent,relpost_count);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQDOOisshWzVaRd4lCp9q4YogG3svw2qBtIgOcdGJvRvReDMQ_qafGbutVk3ygxGNF97hIgfjyHFVOm15yF5PRg_yDNs4yByM1vF4wKq0ks_vgzotzszigpbGy_v8dhl6kM4Q2PgE9HM/h120/no-image.jpg"}relatedpost_img[relatedpost_data]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relatedpost_url[relatedpost_data]=g.link[f].href;break}}relatedpost_data++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function relatedpost_main(){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<relatedpost_url.length;u++){if(!contains(v,relatedpost_url[u])){v.length+=1;v[v.length-1]=relatedpost_url[u];w.length+=1;w[w.length-1]=relatedpost_title[u];x.length+=1;x[x.length-1]=relpost[u];A.length+=1;A[A.length-1]=relatedpost_img[u]}}relatedpost_title=w;relatedpost_url=v;relpost=x;relatedpost_img=A;for(var u=0;u<relatedpost_title.length;u++){var B=Math.floor((relatedpost_title.length-1)*Math.random());var i=relatedpost_title[u];var s=relatedpost_url[u];var y=relpost[u];var C=relatedpost_img[u];relatedpost_title[u]=relatedpost_title[B];relatedpost_url[u]=relatedpost_url[B];relpost[u]=relpost[B];relatedpost_img[u]=relatedpost_img[B];relatedpost_title[B]=i;relatedpost_url[B]=s;relpost[B]=y;relatedpost_img[B]=C}var r=0;var D=Math.floor((relatedpost_title.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relatedpost_count){if(relatedpost_url[D]!=t){q="<li>";q+="<a href='"+relatedpost_url[D]+"' target='_blank'><img alt='"+relatedpost_title[D]+"' src='"+relatedpost_img[D]+"' title='"+relatedpost_title[D]+"/></a>";q+="<a href='"+relatedpost_url[D]+"' title='"+relatedpost_title[D]+"' target='_blank'>"+relatedpost_title[D]+"</a>";q+="<span class='relatedpost_description'>"+relpost[D]+"...</span>";q+="</li>";document.write(q);r++;if(r==relatedpost_count){break}}if(D<relatedpost_title.length-1){D++}else{D=0}if(D==z){break}}};

//]]>

</script>

</head>

-------------------------------------------------------------------------------------------------------

1- FIND POST THUMBNAIL LINE AND OPEN THIS CODE

<b:includable id='post' var='post'>

2-FIND POST FOOTER  LINE AND REPLACE BELOW CODE

<div class='post-footer'>

--------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<div class='post-footer'>

<div class='post-author'>

  <strong>Diposting Oleh:</strong> <span class='vcard author'><span class='fn'><data:post.author/></span></span>

</div>

<div id='relatedpost'>

<h3>Related Post</h3>

<b:loop values='data:post.labels' var='label'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>

</b:loop>

<ul id='relpost'>

<script type='text/javascript'>relatedpost_main();</script>

</ul>

</div><div style='clear:both'/>

</div></b:if>

<div class='post-footer'>


-----------------------------------------------------------------------------------------------
RELATED POST WIDGET STYLE 2
ADD BELOW CODE BEFORE THIS RED LINE
<div class='post-footer-line post-footer-line-1'>
---------------------------------------------------------------------------------------------------




----------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
-----------------------------------------------------------------------------------------------------------

<!--RELATED POST TAB WIDGET START -->

<style type='text/css'>
#related-post h4{font:1.6em/normal  &quot;Racing Sans One&quot;,&quot;Trebuchet MS&quot;,Helvetica,sans-serif;margin:0;position:relative}
#related-post .related-post-style-2,#related-post .related-post-style-2 li{
background:#FFFBCC;
border: 6px double;
color:Green
}
#related-post .related-post-style-2 li{padding:10px;border-top:1px solid #bdc3c7;overflow:hidden}
#related-post .related-post-style-2 li:first-child{border-top:none}
#related-post .related-post-style-2 .related-post-item-thumbnail{
background:#fff;width:60px;height:60px;border:1px solid #bdc3c7;padding:4px;float:left;margin:0 10px 0 0;transition:all .5s}
#related-post .related-post-style-2 .related-post-item-thumbnail:hover{border:1px solid #666}
#related-post .related-post-style-2 .related-post-item-title{font-weight:bold;font-size:14px}
#related-post .related-post-style-2 .related-post-item-summary{display:block;font:13px/1.3em &quot;Roboto&quot;,&quot;Trebuchet MS&quot;,Helvetica,sans-serif;overflow:hidden}
</style>

<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedPostConfig = {
    homePage: &quot;<data:blog.homepageUrl/>&quot;,
    widgetTitle: &quot;&lt;h4&gt;Related Post for <data:post.title/>&lt;/h4&gt;&quot;,
    numPosts: 89,
    summaryLength: 180,
    titleLength: &quot;auto&quot;,
    thumbnailSize: 60,
    noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
    containerId: &quot;related-post&quot;,
    newTabLink: false,
    moreText: &quot;&quot;,
    widgetStyle: 2,
    callBack: function() {}
};


</script>

<script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

//]]>
</script>


<!--RELATED POST TAB WIDGET END -->


---------------------------------------------------------------------------------------------------------------------
 SIMPLE CODE FOR RELATED POST WIDGET

CODE SHOW LIKE THIS:
<script src='//blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>

/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

---------------------------------------------------------------------------------------------------------------------

<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedPostConfig = {
    homePage: &quot;<data:blog.homepageUrl/>&quot;,
    widgetTitle: &quot;&lt;h4&gt;Related Post for <data:post.title/>&lt;/h4&gt;&quot;,
    numPosts: 5,
    summaryLength: 180,
    titleLength: &quot;auto&quot;,
    thumbnailSize: 60,
    noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
    containerId: &quot;related-post&quot;,
    newTabLink: false,
    moreText: &quot;&quot;,
    widgetStyle: 2,
    callBack: function() {}
};
</script>
<script src='//blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>