Blogger Editor: Related Post Box Template

Related Post Box Template

648px x 516px

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style>
.related-posts { float: left; padding-bottom: 10px; }
.related-posts h5 { font-size: 20px; font-weight: normal !important; margin: 0px !important;}
.related-posts ul { display: flex; padding: 5px !important;}
.related-posts ul li {  list-style: none; margin-right: 10px; float: left; text-align: center; border: 1px solid #ccc !important; background-color: white; flex: 1; margin-bottom: 20px; filter: grayscale(100%); -webkit-filter: grayscale(100%);   -moz-transition: all 0.3s;  -webkit-transition: all 0.3s;  transition: all 0.3s;}
.related-posts ul li:hover { border: none !important; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); cursor: pointer; filter: none; -webkit-filter: none; -moz-transform: scale(1.05);  -webkit-transform: scale(1.05);  transform: scale(1.05); }
.related-posts a { text-decoration: none; color: black; font: normal 12px Trebuchet MS; line-height: 18px;}
.related-posts img{ object-fit: none; object-position: top; height: 80px !important; width: 100% !important; padding-bottom: 5px;}
</style>

<script type='text/javascript'>
$(document).ready(function() {

var maxSearched = 500;
  var minimum = 4;
  var maximum = 4;
  var imageSize = 100;
  var roundImages = false;
  var relatedTitle = true;
  var labelInTitle = true;
  var relatedTitleText = "Related Posts About";
  var defaultImage = "";
  var campaignTracking = false;
  var campaignSource = "";
  var campaignMedium = "";
  var campaignName = "";
  var postLabels = $('.post-labels a');
  var insertBefore = $('.post-footer');

var labels=[];var label;var alternateLabel;var minposts=minimum-1;if(postLabels.length===1){label=postLabels.text().trim()}else if(postLabels.length>1){$(postLabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css({"max-width":imageSize,"border":"none","padding":"0"});if(roundImages===true){$(".related-posts ul li img").css({"width":imageSize,"height":imageSize,"border-radius":"50%"})}else{$(".related-posts ul li img").css({"max-width":imageSize,"height":"auto"});}}})}
});
</script>

<div class="related-posts">
<h5>Related Posts About <span class="related-term">featured</span></h5>

<ul>

<li style="max-width: 120px; border: none; padding: 0px;"><a href="http://v5demo.blogspot.com/2016/05/what-beatles-could-learn-from-mutual.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsOHLSfVdvo5EiD9jJUKN37GKD6MqVe5Ja5q1dA6zpR4Xs7LOh14XluC-6yNgd46v71eIaS3wmd0DG4Lr3JXsWtBBm7EE128nvdLCar4wkWfPhjNrDiY2pZRopWHrWez5UcEGXSpr1HZAY/s120-c/business_the-spirit_118K.jpg" alt="What the beatles could learn from mutual funds" nopin="nopin" style="max-width: 120px; height: auto;">What the beatles could learn</a></li>

<li style="max-width: 120px; border: none; padding: 0px;"><a href="http://v5demo.blogspot.com/2016/05/8-least-favorite-cultural-solutions.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bBGWkBPCvTMcYzNmm92FsbKcG1XU3zP4uovXeYqEcCDPtj7tOJC11J0Micijhviu9AkZCb8Fd_1mlogDYsc7yvZeI4dqRXleIyJjmyNsaUu129JKdqqr2759WBgK1UzEA4usxc6SSYJ-/s120-c/travel_icy-polar_022K.jpg" alt="8 least favorite cultural solutions" nopin="nopin" style="max-width: 120px; height: auto;">8 least favorite cultural solutions</a></li>

<li style="max-width: 120px; border: none; padding: 0px;"><a href="http://v5demo.blogspot.com/2016/05/the-14-best-business-youtube-videos.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOe0465Tm7yWZ6enXfiQ7k1uh6rluyixdu6_YJkgxe74triHrcLME0AN1xNdmh4kCo9ZwGBYm10b3inIvYcQVkEB2H4cW3PHXv9Zck_lOYqnGCy2wey5esm0tYvSfnlBmmxsnfPktM1eh8/s120-c/business_Fotolia-Subscription-Monthly_145K.jpg" alt="The 14 best business youtube videos" nopin="nopin" style="max-width: 120px; height: auto;">The 14 best business videos</a></li>

<li style="max-width: 120px; border: none; padding: 0px;"><a href="http://v5demo.blogspot.com/2016/05/why-you-never-succeed-at-elementary.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWo2p6lgqU6s-NOK3TEuUCmIOimxRszb-sO4I3wgh7tqAEoS_1o7X1XrW4l1Yk5oe-1Xo4AHSifKOH3mOZRe_57mk6JDl7pQeCcm_b-rfMBlWzTiMRaNpAmVyzM9EksDDIAGoyDsD09pLo/s120-c/world_businessman-as-president_329K.jpg" alt="Why you'll never succeed at elementary schools" nopin="nopin" style="max-width: 120px; height: auto;">Why you'll never succeed at life</a></li>

</ul></div>