Terwujud

Cara membuat Related Post Responsive dan Valid HTML



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Related post kali ini akan dijelaskan dengan cepat saja ya, sebab related post ini tidak menyediakan versi thumbnail sehingga tampilannya berbentuk list saja.

RELATED
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.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

1 komentar:

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

Copyright © 2014 Terwujud.com - All Rights Reserved