tanpa panjang lebar lagi langsung saja tentang bagaimana penerapan nya yaaa..
DEMO
Cara menerapkan nya pada blog anda:
- Step 1: Silahkan Login pada akun blogger, lalu klik Template
- Step 2: Lalu pilih Edit HTML
Note: Untuk menghindari terjadi ya error karena salah dalam menerapkan tutorial di bawah ini,sobat bisa Backup dulu template nya, untuk jaga-jaga saja..hehe. lanjut
- Step 3: Cari kode </body> pada template, untuk mempermudah pencarian bisa menekan CTRL+F secara bersamaan.
- Step 4: Sekarang silahkan copy semua kode di bawah tepat di atas kode ( </body> )
<!-- START RELATED POSTS WIDGET BY PEPIN NONO -->
<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 = "Artikel Terkait lain nya";
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://pepinnono.blogspot.com" rel="dofollow">Blogger Widget</a></div>
<!-- END RELATED POSTS WIDGET BY PEPIN NONO -->
Keterangan:
widget related post ini bisa anda sesuaikan sesuai selera sobat semua agar terlihat lebih SEO friendly.
maksud dari menyesuaikan widget seperti keterangan di bawah ini silahkan di simak :
Gaya gambar/Thumbnail:
roundImages var = false;
Ini adalah kode default. Dan secara default gambar akan muncul dalam related post anda secara normal,apabila anda mengubah false menjadi true maka gambar pada related post nya akan berputar apabila di lewati/di tunjuk oleh mouse.
Jumlah post yang akan ditampilkan:
var minimum = 3;
var maksimum = 5;
Mengubah minimum dan nilai maksimum 3 & 5 untuk mengatur berapa banyak posting terkait untuk ditampilkan di blog Anda.
Ukuran gambar:
var imagesize = 150;
Angka 150 adalah untuk mengubah ukuran gambar/thumbnail related post widget ini,silahkan di sesuaikan dengan template anda.
Judul Widget:
var relatedTitleText = "Artikel Terkait lain nya";
Silahkan ganti dengan judul Anda sendiri.
var relatedTitle = true;
Dengan Mengubah true menjadi false maka judul widget tidak akan di tampilkan secara otomatis.
Menurut Label:
var labelInTitle = true;
ini untuk mengaktifkan nama tulisan label secara otomatis.jika Anda ingin menonaktifkannya, silahkan di ganti dengan false.
Sekian artikel / tulisan tutorial saya tentang related post blogger dengan thumbnail.Semoga bermanfaat.
Comments