Terbaik 1: Cara Menampilkan Related Post (Thumbnail) Di Bawah Postingan Blog (Responsif)

Terbaik 1: Cara Menampilkan Related Post/Artikel Terkait (Thumbnails/Gambar) Di Bawah Postingan Blog

Terbaik 1: Cara Menampilkan Related Post (Thumbnail) Di Bawah Postingan Blog (Responsif)
Gambar 1. Contoh Related Post Dengan Gambar (Thumbnail) di Bawah Postingan B
Kesempatan kali ini, saya akan membahas tentang cara menampilkan related post atau artikel terkait dengan label di bawah tubuh postingan. Trik ini akan melibatkan pengeditan HTML template blog.
log
>>Cara Membuat Related Post di Bawah Postingan

Step 1>> Login ke Blogger, pilih blog yang akan di edit (jika memiliki lebih dari satu blog)
Step 2>> Pilih Elemen Template, Lalu Pilih Edit HTML (Jangan lupa unduh/download/cadangkan tempalate anda dulu sebelum pengeditan<biar aman coy>)
Step 3 >> Cari kode </body>  atau </head> (Tekan Ctrl+F untuk mempermudah pencarian), setelah anda menemukannya, letakkanlah kode javascript di bawah ini (Copy) dan Pastekan persis di atas kode </body> atau </head>.

<!-- START RELATED POSTS WIDGET BY BANGUET--> 
<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;
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 = 5;
var imageSize = 150;
var roundImages = false;
var relatedTitle = true;
var labelInTitle = true;
var relatedTitleText = "more posts about";
var defaultImage = "";
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 CODE


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>

<div style='display: none ! important;'><a href="http://www.banguet.blogspot.com" rel="dofollow">Blogger Widget</a></div>
<!-- END RELATED POSTS WIDGET BY BLOGSPOT YARD -->

Note : Ganti dulu Tanda Merah URL di dalam dengan alamat URL kamu.

Step 4>> Terakhir, Tekan SAVE TEMPLATE dan lihat hasilnya


COSTUMIZE/RUBAH SESUAI SELERA

Kamu bisa mengedit kode di atas sesuai selera dan bisa lebih enak dilihat sesuai template kamu dan User Friendly terhadap pengunjung.

>>Widget kode dibawah //CODE OPTIONS


Thumbnail Style:
var roundImages = false;

Ini adalah default kodenya dan default thumbnail (bentuk gambar) akan ditampilkan sesuai dengan gaya yang bisa anda ganti menjadi true; (gambar melingkar) atau false; (gambar kotak)

>> Related Posts Number atau Jumlah Postingan yang ingin ditampilkan :


var minimum = 3;
var maximum = 5;

Rubah angka ini (minimum dan maximum) jika ingin menampilkan jumlah related post di bawah postingan

>>Ukuran Thumbnail :
var imageSize = 150;

Rubah angka ini untuk memperbesar atau memperkecil ukuran gambar tumbnail di related post blog

>>Judul Widget (Penting):


var relatedTitleText = "more posts about";

Rubah ini sesuaikan dengan judul yang kamu inginkan.


var relatedTitle = true;

Rubah ini dari true menjadi false jika ingin menghentikan/tidak menampilkan lagi related postnya

>>Judul Label :


var labelInTitle = true;

Rubah ini jika anda ingin menghilangkan Category atau Label yang muncul di related postnya. Rubah true jika ingin label juga terlihat, dan false untuk menghilangkan label

Ok, Semoga trik ini bermanfaat
SILAHKAN COPY PASTE ARTIKEL PBBLOG DAN GENERATE MENJADI ARTIKEL UNIK ANDA


BACA JUGA

Trik Widget 3894141202563192171

Posting Komentar

Scroll All Content

Memuat konten...

RANDOM POST

Memuat...

Google+ Badge

item