Jumat, 20 April 2012

0 Membuat artikel terkait atau relatec articles

Chyberart - Sekarang saya akan menjelaskan tentang cara menambahkan artikel terkait dibagian bawah posting anda. Sebelum ke pembahasan akan saya jelaskan terlebih dahulu apa itu artikel terkait atau relatec articles barang kali dari anda ada yang belum paham yang dimaksut dengan artikel terkait.
Artikel  terkait atau relatec articles adalah postingan atau  artikel-artikel yang berhubungan dengan artikel yang lainnya yang berdasarkan dari kategori atau label. Nah..!, sekarang sudah paham kan apa yang dimaksut dengan artikel terkait. Kalau sudah sekarang kita lanjutkan kelagkah-langkah membuat artikel terkait pada blog anda.
  1. Log in ke blog anda
  2. Pilih Rancangan >Edit HTML
  3.  Centang Expand Template Widget
  4. Cari kode  <data:post.body/>
  5. Copas kode berikut letakan dibawah kode <data:post.body/>
  6. <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <br/>

    <br/>

    <H2>Artikel Terkait:</H2>

    <div class='rbbox'>

    <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid

    #ccc;'>

    <div id='albri'/>

    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

    var maxNumberOfPostsPerLabel = 4;

    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 10;

    maxNumberOfLabels = 3;

    function listEntries10(json) {

    var ul = document.createElement(&#39;ul&#39;);

    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?

    json.feed.entry.length : maxNumberOfPostsPerLabel;

    for (var i = 0; i &lt; maxPosts; i++) {

    var entry = json.feed.entry[i];

    var alturl;

    for (var k = 0; k &lt; entry.link.length; k++) {

    if (entry.link[k].rel == &#39;alternate&#39;) {

    alturl = entry.link[k].href;

    break;

    }

    }

    var li = document.createElement(&#39;li&#39;);

    var a = document.createElement(&#39;a&#39;);

    a.href = alturl;

    if(a.href!=location.href) {

    var txt = document.createTextNode(entry.title.$t);

    a.appendChild(txt);

    li.appendChild(a);

    ul.appendChild(li);

    }

    }

    for (var l = 0; l &lt; json.feed.link.length; l++) {

    if (json.feed.link[l].rel == &#39;alternate&#39;) {

    var raw = json.feed.link[l].href;

    var label = raw.substr(homeUrl3.length+13);

    var k;

    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

    var txt = document.createTextNode(label);

    var h = document.createElement(&#39;b&#39;);

    h.appendChild(txt);

    var div1 = document.createElement(&#39;div&#39;);

    div1.appendChild(h);

    div1.appendChild(ul);

    document.getElementById(&#39;albri&#39;).appendChild(div1);

    }

    }

    }

    function search10(query, label) {

    var script = document.createElement(&#39;script&#39;);

    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

    + label +

    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

    document.documentElement.firstChild.appendChild(script);

    }

    var labelArray = new Array();

    var numLabel = 0;

    <b:loop values='data:posts' var='post'>

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

    textLabel = &quot;<data:label.name/>&quot;;

    var test = 0;

    for (var i = 0; i &lt; labelArray.length; i++)

    if (labelArray[i] == textLabel) test = 1;

    if (test == 0) {

    labelArray.push(textLabel);

    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

    labelArray.length : maxNumberOfLabels;

    if (numLabel &lt; maxLabels) {

    search10(homeUrl3, textLabel);

    numLabel++;

    }

    }

    </b:loop>

    </b:loop>

    </script>

    </div>

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

    </div>

    </b:if>
  7. Selanjutnya cari kode ]]></b:skin>
  8. Copas lagi kide dibawah ini letakan diatas kode ]]></b:skin>
  9. .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px; background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: rgb(255, 255, 255);}
  10. Klik Simpan Template dan selesai

0 komentar:

Poskan Komentar