Cara membuat Related Post Responsive dan Valid HTML

Related post kali ini akan dijelaskan dengan cepat saja ya, sebab related post ini tidak menyediakan versi thumbnail sehingga tampilannya berbentuk list saja.

Related post ini juga bisa sobat letakkan di dalam postingan atau di luar postingan. Jika di dalam postingan, maka terlebih dahulu sobat harus mem-pharse kodenya, namun jika di luar postingan hal itu tidak perlu dilakukan. Oke, ngak perlu basa-basi, langsung saja ambil kodenya dan tempatkan di tempat yang semestinya (hiiiihiiii, gaya bahasanya muantapp bukan wkwkwkw).

1. Masuk ke menu Blogger ⇛⇛  Tema  ⇛⇛ lalu kik menu “Edit HTML”
2. Salin kode dibawah ini dan letakkan di atas kode </head>

<style type='text/css'>
/* related postpage ibrahim */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<5){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();};
//]]>
</script>

Perhatian:

Pada kode yang berwarna merah bisa diganti sesuai keinginan sobat. Angka 5 menunjukkan jumlah post yang akan tampil sedangkan 70% merupakan ukuran border yang bisa disesuaikan sesuai kebutuhan.

3. Salin kode dibawah ini dan letakkan di postingan atau diluar postingan

<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Artikel terkait:</h4>
<script src='https://www.terwujud.com/feeds/posts/default/-/Kesehatan?alt=json-in-script&callback=related_results_labels&max-results=5' type='text/javascript'></script>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</div>
</div>

Perhatian: Rubah URL  https://www.terwujud.com/feeds/posts/default/-/Kesehatan menjadi url sobat sekaligus nama labelnya. Jika ingin menampilkan lebih dari 1 label, maka sobat harus menggandakan kode dibawah ini.

  <script src='https://www.terwujud.com/feeds/posts/default/-/Kesehatan?alt=json-in-script&callback=related_results_labels&max-results=5' type='text/javascript'></script>

Jika ingin meletakkan related post ke dalam postingan, maka terlebih dahulu kode diatas harus dipharse, kunjungi www.blogcrowds.com/resources/parse_html.php untuk mempharse kodenya.

Sekarang related post sobat bisa dicek dan telah selesai, jika ada kesalahan atau ketidakpahaman mengenai hal ini, silahkan tanyakan kepada saya.