Cara Membuat Related Post di Blog

October 24, 2017
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~

7 comments:

  1. wah, aku kebetulan pas pilih template yang sudah ada related postnya berarti yah, kirain tiap blog sudah otomatis ada related post itu...

    ReplyDelete
    Replies
    1. engga muncul nih kalo pake blogger. Maklum gratisan >.< jadi butuh effort dikit~
      kalau kamu pakai yang berbayar ya? Aku juga ga gitu paham nih ama yang gini2
      cuma tau ada wordpress dan blogger aja hahaha~

      Delete
    2. meskipun pas pakai blogger yang gratisan juga udah muncul kok, itu tergantung tamplatenya aja..

      Delete
    3. oh gituuu ('・o・')
      baru tau saya. makasih infonya

      Delete
    4. tapi templatenya yang mana ya kak? tadi cek-cek tapi ga tau mana yang bisa ada relatednya hahaha

      Delete
    5. saya pakai yang Simple minima BT Design
      kalau mau cari disini http://www.btdesigner.net
      bagus2 kok template nya dan gratis pula

      Delete
    6. oh gituu
      kirain template langsung di bloggernya~ ternyata ada dari situs lain juga ya
      makasih infonya sis ^^

      Delete

Powered by Blogger.