Blogger Related Post dengan Gambar

Blogger Related Post dengan Gambar Model Baru. Disebut model baru karena semua kodenya diletakkan di bawah yaitu di footer bukan di head sehingga tidak mengurangi kecepatan loading (loading spped) dan tidak merusak SEO website atau blog kita.

Cara pasang:

1. Bukan blogger.com
2. Template -> Edit HTML
3. Letakkan kode berikut di atasnya </body>

<!-- BEGIN CODE IT PRETTY RELATED POSTS GALLERY CODE -->
<b:if cond='data:blog.pageType == "item"'>

<style>
.related-posts {
width: 100%;
margin: 2em 0;
float: left;
}

.related-posts ul li {
list-style: none;
margin: 0 5px;
float: left;
text-align: center;
font-size: 110%;
border: none;
}
</style>


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

//<![CDATA[
$(document).ready(function() {



//CODE OPTIONS

var maxSearched = 500;
var minimum = 3;
var maximum = 4;
var imageSize = 140;
var roundImages = false;
var relatedTitle = true;
var labelInTitle = false;
var relatedTitleText = "Related Posts:";
var defaultImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBPZCxE5P_7kTjla8EnVe1OqONVT4HYe9ZtYnmFWd-vcTNA7vmON-DUXZUt0DzGXGdGuGqJ_41O3woaKPne4Xr98vJRSZsU9pqSbIO4TmeE18b89VMVPgGmMTyo7Jzom7cQLeOmWu1v6u/s1600/konsultasi-syariah-logo.jpg";
var campaignTracking = false;
var campaignSource = "";
var campaignMedium = "";
var campaignName = "";
var postLabels = $('.post-labels a');
var insertBefore = $('.post-footer');


//END CODE OPTIONS - DO NOT EDIT BELOW THIS LINE

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>

</b:if>
<!-- END CODE IT PRETTY RELATED POSTS GALLERY CODE -->

4. Klik Save Template. Selesai.

CATATAN:

- Ganti image default dengan gambar yang anda sukai.
- Related artikel minimal 3, maksimal 4, anda bisa ganti sesuai selera
- Ukuran gambar 140, anda bisa ganti ke yang lebih kecil atau lebih besar.