Cara membuat related post dengan gambar di blogger

Tutorialmixs - sobat blogger mania yang saat ini masih berkutat dengan segala macam tampilan untuk mempercantik blog anda, tidak ada salahnya juga kan anda mencoba menyisipkan related post seperti gambar di bawah ini?? dan aku rasa tempilannya oke banget dan terkesan inovatif banget kok sob, di samping pembuatannya juga relative sangat mudah banget

oke langsung saja agar tidak bertele-tele, karena semakin bertele-tele juga jari-jari ini semakin susah untuk di gerakkan..

1. silahkan masuk saja di blogger sobat > template . edit htmlnya yah.. (untuk pemula seperti saya) mohon kalau takut ada apa-apa templatenya di backup terlebih dahulu itu jauh lebih baek.. tetapi untuk para master silahkan di lihat saja..

2. masukkan kode script ini pada template sobat dimana tampilan related ini akan di tampilan.. (silahkan fahami strukture dari template sobat, karena aku memang tidak terbiasa memberikan tutorial dengan langkah pakem. karena apa? itu disebabkan antara template yang satu dengan yang laennya aku jamin mempunyai perbedaan struktur. sekali lagi kenali strukture sobat, kalau ada pertanyaan isi koment aja biar aku bantu.. kalau tidak ada yang nanyak berarti langkahku benar bukan? memberikan tutorial yang singkat dan padat he.e. pis broo) tapi kalau menurut para ahli sih biasanya kode nya di taruh di atas kode <div class='post-footer'> dan silahkan sobat find aja dengan tekan tombol ctrl+F

oke silahkan copy kan kode script di bawah ini dan sisipkan pada baris di mana tampilan related post ini akan sobat tampilkan..

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.related-post-title{font-size: 2em;padding: 0px 0px 15px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: none; line-height: 20px;} #related-posts a:hover { text-decoration: none; color: #06c; } #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; border-bottom: 1px solid #E2E2E2; clear: both; font-family: Helvetica; font-size: 12px; overflow: auto; border: 1px solid #CCC; margin: 5px 5px 8px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #B6B6B6;background:#FAFAFA;} .image_left{ float: left; margin: 0px 10px 10px 2px; border: 1px solid #fff; padding: 0px; width: 80px; height: 56px; box-shadow: 0px 0px 4px #777; } #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;}
</style>
<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGw7d8JNqQgNMKsfZE-zCbQgfn_cFUGQAl3GDDilDxbrZOK4VXLTbLQjuQO2xV5pxiu1V-z03n0oeRfla8ng-al-YnEyb57QKFZq2C885z3YJmZyolAWmPvDyMhUYL5mKTKn4ra96yimY/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if("alternate"==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>":document.getElementById("related_here").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>",t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<div id='related-posts'>
<h4 class='related-post-title'>You may also like:</h4>
<div class='related_all_ul'>
<ul id='related_here'/>
<ul id='related_here2'/>
<div style="font-size: 7px;float: right; margin: 5px;"><a style="font-size: 7px; text-decoration: none;" href="http://goo.gl/URA0fN" rel="nofollow">get related posts widget</a></div>
</div>
<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&max-results=7"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var maxposts=6; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script>
</div>
<div style='clear: both;'/>
</b:if>