Cara membuat Widget Related Post di Blogspot/Blogger

on
Pada tulisan kali ini aku akan membagikan atau sharing cara untuk meng-optimalkan blog sobat-sobat goblog nih yaitu tentang bagaimana menambahkan widget related post di setiap postingan sobat-sobat. Widget related post ini menurutku sangat penting dan berguna untuk meningkatkan navigasi pada blog sobat-sobat, sehingga pengunjung bisa lebih mudah dalam melihat konten-konten dalam blog sobat-sobat. Alhasil jika pengunjung mudah dalam melihat konten blog kita, maka pengunjung akan lebih lama transit di blog kita, itu artinya kita menjadi lebih bermanfaat untuk orang lain hehehe....

Gambar 1. Contoh widget related post di xonote.net

Kalau sobat-sobat lihat di setiap akhir tulisan atau postingan xonote.net, pasti sobat-sobat akan melihat related post disana. Dengan adanya related post ini pengunjung akan terus di sajikan konten-konten yang mirip dan serupa yang dilihat berdasarkan labelnya. Jadi penting buat sobat-sobat untuk memberikan label pada setiap postingan sobat-sobat. Terutama jika blog sobat-sobat isinya ada banyak kategori alias gado-gado seperti xonote.net ini yang berisi banyak bidang minat.

Lalu caranya gimana?
Oke cakep, sabar ya. Jadi caranya sobat-sobat bisa mengikuti langkah-langkah berikut!

1. Login ke blogger sobat-sobat lalu masuk ke Theme --> Edit HTML



2. Klik di dalam kotak kode (dimana saja) lalu tekan CTRL+F
lalu cari kata

</head>

 3. Copy dan paste kode berikut ini sebelum/diatasnya kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf9utDx_DvOXTORy7No0JD3jg-eWcbJnXgsBlDZuJ9p4ISzBKncz8M1G5w3FHGUSWXtDekgi_O8q2gjlgxhegruQq-ptKqcK4ZfqkCphsPJUkLy-AeLAyvZg_bacurBYb0bnhdwIjL9BOO/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Cari kode seperti berikut dengan cara seperti langkah no.2

<div class='post-footer'>

5. Lalu copy-paste kode berikut sebelum kode <div class='post-footer'> atau diatasnya

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://www.xonote.net/2018/03/cara-membuat-widget-related-post-di.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Silahkan di save dan lihat hasilnya di blog sobat-sobat

 Semoga tulisan ini bermanfaat,
Let's make things better

Comments

Post a Comment