0 Cara Membuat Related Post Versi Loading Cepat

Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Related Post Versi Loading Cepat. Biasanya artikel terkait ini ditambahkan di bawah postingan artikel blog. Fungsi dari Related Postini merupakan salah satu teknik untuk menambah pageview halaman, sesuai dengan posting artikel yang terkait dengan label secara otomatis.

DEMO

Versi sebelumnya lihat Artikel Terkait Sederhana
Versi Related Post ini bisa dibilang cepat karena memakai script yang kecil sedangkan cara membuat artikel terkait ini hanya memerlukan waktu beberapa waktu saja. Related Post Versi ini cukup bagus untuk ditambahkan karena loadingnya yang cepat, dan tampilannya pun cukup baik. Related Post Versi Cepat ini hanya menampilkan judulnya saja. Tentu saja tampilannya dapat sedikit di modifikasi sesuai keinginan, seperti Merubah namanya jadi "Related Post", "Baca Juga Artikel Dibawah ini" danlain sebagainya.

Berikut Langkah-langkah Cara Membuat Artikel Terkait Versi Loading Cepat.

1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2, 
    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), 
    Dan cari kode berikut  ]]></b:skin> 
    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas  ]]></b:skin>

/* Related Post Cepat

--------------------------------- */

#related-posts { float : left; width : 100%; margin-top:5px; margin-left : 0px; font-size : 13px; font-family:Arial,serif; margin-bottom:0px; } 

#related-posts a { text-decoration : none; } 

#related-posts a:hover { text-decoration : none; } 

#related-posts ul { border : medium none; margin : 10px 0px 10px 0px; padding : 0; } 
#related-posts ul li { display : block; background : url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 30px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

Warna Oranye adalah link gambar rss dan sebaiknya diganti sesuai keinginan.

7. Cari kode berikut  </head>
8. Masukan Kode berikut diatas  </head>

<!-- Related Post Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}

i++;}

document.write('</ul>');}//]]>

</script>

</b:if>

<!-- Related Post End-->

9.   Cari kode berikut  div class='post-footer'
      Kode tersebut mungkin ada 2, pertama untuk versi mobile, 
      kedua untuk versi web (biasanya yang kedua).
10. Masukan Kode berikut diatas  <div class='post-footer'>  yang kedua (versi web).

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<font style='font-size:19px; color:#CC333B; font-family:Arial;'><b>Artikel Terkait: </b>

</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>

<b:if cond='data:label.isLast != &quot;true&quot;'/><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=5&quot;' type='text/javascript'/>

</b:if></b:loop></font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>

</div>

</b:if>

    Kira-kira tampilannya seperti ini

    ...Kodenya...
    <div class='post-footer'>
  
  Keterangan:

  Artikel Terkait berwarna pink: dapat Diganti namanya sesuai keinginan, berikut kode warnanya

  Text berwarna hijau dapat dirubah angkanya untuk jumlah tampilan judul. 

7. Save Template, dan lihat hasilnya.

Demikian Cara Membuat Related Post Versi Loading Cepat di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

Rating: 3

Tweet

Komentar →