Skip to content Skip to sidebar Skip to footer

Cara Membuat Related Post di Bawah Postingan

 

Cara Membuat Related Post di Bawah Postingan


Rizaluye.my.id - Cara Membuat Related Post di Bawah Postingan,  Hallo Sobat Rizaluye dikesempatan kali ini kita akan berbagi tutorial tentang Cara Membuat Realated Post dibawah postingan blog anda. Realated Post sendiri merupakan sebuah menu tambahan yang di khususnya untuk dipasang dibawah artikel blog, tujuan nya adalah ereferensikan artikel lain yang masih berkaitan dengan artikel yang kita tulis.

Sekarang ini sudah banyak Template Blogger yang telah menyediakan Fitur ini, namuntak sedkitit juga template yang belum menggunakan tampilan ini, alasanya berbagai macam, mulai dari mengurangi kecepatan loading blog itu sendiri maupun tidak cocok dengan kode yang ada di template blogger itu sendiri

Related Post yang kami bagikan kali ini memiliki tempilan sederhana atau simple ,ringan dan tentunya tidak akan mengurangi kecepatan blog itu sendiri.

Tampilan Sebelum dipasang Realeted Post :

Cara Membuat Related Post di Bawah Postingan



Berikut Cara Membuat Related Post Dibawah Postingan:

  1. Pertama-tama siahkan sobat login ke akun blogger kalian.
  2. Menuju kebagian Tema , silahkan backup template kalian terlebih dahulu, Tujuannya adalah jika kode yang dimasukan tidak cocok atau eror sobat gampang untuk merestore ulang   tampilan blog anda.
  3. Jika sudah, Klik Tema lalu kemudian Edit HTML,
  4. Simpan Kode CSS Related Post Berikut ini diatas kode </head>, anda dapat menggunakan fitur pencarian    (CTRL+F) agar mudah menemukan kode </head> tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {margin: 15px 0px;}
#related-posts h2 {font-size:16px;font-weight: bold;color: #666;margin-bottom: 0.75em;}
#related-posts a {font-size: 14px;color: #333;border-bottom:1px dotted #E2E2E2;display:block;padding:5px 0;text-decoration: none;}
#related-posts a:hover {color: #48d;}
#related-posts ul {padding: 0px;list-style-type: none;}
#related-posts li {padding: 0;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>

Cara Membuat Related Post di Bawah Postingan


Lalu Kemudian Save.

5. Selanjutnya silahkan anda cari kode <div class=’post-footer-line post-footer-line-3′>  atau <div class=’post-footer’> atau anda dapat menggunakan fitur pencarian dengan mengetik post-footer ,
Jika terdapat banyak kode post-footer, maka silahkan anda letakan kode berikut dibawah kode post-footer paling terakhir.

<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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div></b:if>

Cara Membuat Related Post di Bawah Postingan


Catatan : Angka 5 dapat anda ubah untuk menampilkan jumlah Realated post yang anda inginkan 

6. Simpan Setingan Template blogger anda
7. Silahkan buka Salah satu artikel blog anda , jika benar maka tampilan nya akan seperti ini 

Cara Membuat Related Post di Bawah Postingan



Akhir Kata

Demikianlah tutorial kali ini tentang cara membuat realeted post di bawah postingan , semoga dapat bermanfaat kepada pembaca Blog Rizaluye.

Post a Comment for "Cara Membuat Related Post di Bawah Postingan"