Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett
  • Selasa, 08 Februari 2011

    HOME , Cara Membuat Artikel Yang Berhubungan

    Cara Membuat Artikel Yang Berhubungan


    Tip Trik Blogger sebelumnya saya telah membahas bagaimana Cara Membuat Kotak Link Exchange dan kali ini saya akan menjelaskan bagaimana Cara Membuat Artikel Yang Berhubungan atau Related Post dengan Fungsi Scroll
    Berikut langkah-langkahnya :

    Login ke Blogger
    Klik Rancangan Edit HTML
    Klik tulisan Download Template Lengkap

    Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
    Beri tanda centang pada kotak di samping tulisan Expand Template Widget
    Kemudian cari <data:post.body/>

    Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

    Jika sudah ketemu silahkan Copy kode berikut dan letakkan dibawahnya
    Kalau ada dua kode pilih yang pertama

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <br/>
    <br/>
    <H2> Artikel Yang Berhubungan </H2>
    <div class='artikel'>
    <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>
    Untuk menambahkan efeknya cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

    .artikel{border: 1px solid #87CEEB; padding: 5px; background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
    .artikel:hover{background-color: #ffffff; border: 1px solid #ff6100;}

    jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

    Selamat mencoba


    Artikel Terkait

    Tidak ada komentar:

    Posting Komentar