Cara Membuat Related Post di Blog

Gw pengen berbagi tips cara membuat related post di blog yang menggunakan blogger. Buat kalian yang baca post di blog gw, sadar ga ada 5 related post di akhir post gw? Kaya gambar di samping ini~ Nah kenapa sih gw pakai ini? Ya supaya pembaca yang mampir ke blog gw bisa lebih lama berkunjung di blog gw. Jadinya kan viewer post-post gw makin banyak. Huehehehe *evil laugh* (ಠ益ಠ)

Nah cara membuat related post di blogger ini juga ga gw ciptain sendiri. Secara gw bukan orang IT ya. Jadi ga paham coding juga, meski gw pernah ngoding tapi cuma sebatas yang cimpi-cimpi. >.< Untuk itu, gw tanyakan saja pada om Google dan gw menemukan post dari blog sebelah yang oke nih! Monggo mampir ke sini untuk membaca tutorial membuat related post di blogger.

Tutorialnya pakai bahasa Inggris sih. Jadi buat yang ga paham-paham amat sama Bahasa Inggris, gw bantu menerjemahkan menggunakan bahasa Indonesia yang baik dan benar gaul ya. So, check it dot out Cara Membuat Related Post di Blog~

1. Mengedit HTML

Cara mengedit HTML itu dengan pergi ke menu Theme dan klik edit HTML. Nih gw kasih lihat gambarnya biar kalian kebayang.

2. Menambahkan Style pada Related Post
Setelah kebuka tuh tampilan berisi coding dalam blogmu, tambahin code untuk menambahkan style pada related post. Caranya....pertama-tama cari tulisan </head>
biar mudah tekan saja ctrl+f dan akan muncul kolom search yang berada di pojok kanan atas seperti bagian yang dikotaki merah pada gambar. Lalu copy dan paste tulisan </head> pada kolom tersebut.

setelah ketemu si </head>, copy dan paste code berikut sebelum tulisan </head> yang sudah dicari pakai ctrl+f sebelumnya.

<!--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 h2 { 
    margin-top: 10px;
    background:none;padding:3px; 
}
#related-posts .related_img { 
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out; 
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{ 
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover { 
    text-decoration: underline; 
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVO033bg6emygqH_3JBJgbdYdzFxx008Bk_O3Ulgu6VqTq5PQr1SfC6TnFIMcyJArh5yd4vkXynqG6GvXYYZtZ0dKW8XhAsq_UkezI4mg3vUzeXGoytcYJ5I04BVFWpQDdv9LRX4Pmf6gw/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}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/AVvXsEjVO033bg6emygqH_3JBJgbdYdzFxx008Bk_O3Ulgu6VqTq5PQr1SfC6TnFIMcyJArh5yd4vkXynqG6GvXYYZtZ0dKW8XhAsq_UkezI4mg3vUzeXGoytcYJ5I04BVFWpQDdv9LRX4Pmf6gw/s1600/no-thumbnail.png'}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('<h2>'+relatedpoststitle+'</h2>');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-->

3. Menambahkan Related Post dengan Thumbnail
Nah ini nih code yang paling penting (kayanya sih). Sekali lagi dengan menggunakan ctrl+f, cari tulisan ini <div class='comments' id='comments'>
lalu copy (ctrl+c) and paste (ctrl+v) suatu code. Langkah 3 ini harus kalian lakukan dua kali.

Tapi mana code-nya??? 

Berhubung pada blog aslinya bagian ini dikunci, jadi gw tidak enak untuk membagikan code-nya.  Tenang, kalian cukup berkunjung ke blog ini, lalu subscribe Youtube yang empunya blog dan ta daa~ kalian bisa copy code-nya.

Nah setelah itu, simpan ya dan kalian bisa cek langsung deh tampilan blog kalian. Pasti di bawah pos kalian akan ada related post gitu. Logik dari related post ini ya dengan menyocokkan labels yang sama dari pos yang kalian buat itu. So, silahkan kalian coba! Kalau ada pertanyaan, bisa komen di pos ini. Gw akan dengan senang hati menjawab pertanyaan-pertanyaan kalian. ^^
Gampang kan cara membuat related post di blog? Tinggal niatnya saja untuk mengulik sedikit sama setting di blogmu~