Terbaik 1: Cara Menampilkan Related Post/Artikel Terkait (Thumbnails/Gambar) Di Bawah Postingan Blog
 |
| Gambar 1. Contoh Related Post Dengan Gambar (Thumbnail) di Bawah Postingan B |
>>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>.
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;
>>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;
>>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