Cara Membuat Artikel Terkait Tanpa Label Dan JavaScript

20.21    

Cara Membuat related post/artikel posting terkait tanpa menggunakan javascript dan tanpa di ikuti label label dan sekaligus saya juga akan membahasa membuat related post tanpa lebel dengan menggunakan javascript.
Okay langsung saja kita mulai dengan Membuat related post/artikel terkait tanpa label dan javascript
1. Masuk ke Edit Html Template sobat dan klik expand 
2. Masukan kode berwarna merah bi bawah, Diatas </head>.
<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>

3. Setelah cara di atas selesai kemudian cari lagi kode 

     <b:if cond='data:post.labels'>

          <data:postLabelsLabel/>

          <b:loop values='data:post.labels' var='label'>

            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
4. Jika sudah ketemu, masukan kode berwarna hijau dibawah diantara kode diatas. tepatnya seperti terlihat di bawah potongan kode warna merah dan hijau
     <b:if cond='data:post.labels'>

          <data:postLabelsLabel/>

          <b:loop values='data:post.labels' var='label'>

            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          <data:postLabelsLabel/>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
          </b:loop>
        </b:if>
        </b:if>

5. Save dulu hasil edit anda dan meluncur ke langkah selanjutnya, maka carilah kode <data:post.body/>
kalau sudah ada readmore letakan tepat di bawah  <data:post.body/>  di bagian yang ke 2.
<script type="text/javascript">

 removeRelatedDuplicates();

 printRelatedLabels();

</script>

6. Apabila relate post muncul bersama di homepage readmore tambahkan kode berwarna hijau di bawah
<b:widget id='HTML13' locked='false' title='Artikel pada kategori yang sama' type='HTML'>
<b:includable id='main'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Saya menggunakan kode ini untuk menggurangi berat loading blogapabila sobat blogger di rasa cukup rumit cara-cara di atas, saya sarankan menggunakan cara di bawah yang lebih mudah dan simple.
1. Crari Kode ]]></b:skin> biar cepat gunakan Ctrl F, jika sudah ketemu copy paste code yang ada di bawah ini, dan letakan di atas kode ]]></b:skin>

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }#related-posts a{ color:#0000CC; }#related-posts a:hover{ color:#ca1717; }#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }#related-posts a { text-decoration : none; }#related-posts a:hover { text-decoration : none; }#related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }
2. Lalu cari Kode </Head> dan letakan code yang ada di bawah ini di atasnya
<script src='http://infobege.googlecode.com/files/Related-posts.js' type='text/javascript'/>
3. Kemudian cari code <p><data:post.body/></p> Atau <data:post.body/>
(Jika ada dua kode pilihlah kode yg pertama ). lalu copy paste kode berikut dibawahnya.
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<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>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
Selesai mudah bukan???
Demikian saya sampaikan dengan sejujur-jujurnya Cara Membuat related post/artikel posting terkait tanpa menggunakan javascript dan tanpa di ikuti label label