Senin, 04 Juli 2011

Cara Membuat Widget Related Post Di Sidebar

SEO Blogspot - Related post atau biasa disebut posting terkait / artikel terkait selain sebagia navigasi juga  memudahkan pengunjung untuk menjelajah blog Anda. Selian itu pula search engine juga menyukai blog yang memiliki related post.

Disini admin ingin berbagi tips mengenai Cara Membuat Widget Related Post Di Sidebar seperti widget "artikel terkait lainnya" seperti yang ada di blog ini. ( lihat widget "Artikel terkait lainnya" disamping >> )

Cara Membuat Widget Related Post Di Sidebar adalah :

Langkah pertama
  • Login ke blogger > Design > Edit HTML
  • Letakkan kode dibawah ini di atas kode </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>

  • Kemudian klik Save
Langkah kedua
  • Cari kode dibawah ini :

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

  • Jika sudah ketemu ganti dengan kode dibawah ini

    <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: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>

  • Simpan Template

Langkah ketiga
  • Klik Design > Page elements
  • Klik Add Gadget
  • Klik HTML/Javascript
  • Ketik "Aritkel Terkait Lainnya" di bagian judul
  • Selanjutnya Copy Paste kode dibawah ini

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

Langkah keempat
  • Klik Design > Edit HTML
  • Centang Expand Widget Template
  • Cari judul widget yang telah dibuat pada langkah ketiga. Caranya tekan CTRL + F dan ketik "artikel terkait lainnya"
  • Setelah ketemu tambahkan kode warna merah diatara kode berikut :

    <b:widget id='HTML13' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
    <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>
    </b:includable>
    </b:widget>


    Catatan : Pada kode diatas ID widget adalah HTML13, ini mungkin tidak sama dengan ID widget Anda, jadi abaikan saja (jangan diganti)

Tidak ada komentar:

Posting Komentar