Select Menu

Tutorial

Bahasa

Sastra

Makalah

Tutorial Blog

Tutorial SEO

-

-

Premium Template

-

» » Cara Membuat Related Post (Artikel Terkait) dengan Scroll


Unknown Sunday, February 19, 2012 4

Pengertian Related Post atau Artikel Terkait adalah posting atau artikel yang berhubungan dengan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan, Dengan mengaktifkan fungsi scrolling pada widget related posts maka pengunjung tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah. Apalagi widget related post ini diletakkan di bawah posting. Tertarik ingin memasang related post fungsi scrolling? Tapi tunggu dulu.. Jika anda terlanjur memasang widget related post lama yang pernah saya tulis, maka harus dihapus dulu. Bingung cara menghapusnya? Caranya lakukan dengan alur mundur (dari bawah ke atas) dengan mengikuti petunjuk dari posting saya yang sebelumnya. 
Pada gambar di atas, tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait. Oke, langsung saja ke cara pasang widget related posts dengan fungsi scrolling di bawah posting blog anda.
  1. Login ke blogger dengan id Anda
  2. Klik Rancangan
  3. Pada tab menu, pilih Edit HTML
  4. Centang kotak kecil Expand Template Widget
  5. Cari kode <p><data:post.body/></p>

    Letakkan scrib berikut di bawah kode tadi:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <H2>Related Post:</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 = 50;
    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>

  6. Jika sudah, sekarang cari kode ]]></b:skin>
  7. Letakkan kode berikut di atas kode tadi :

    /*-- modifikasi related posts oleh http://infonetmu.blogspot.com--*/
    .rbbox{border: 1px solid #D8D8D8;padding: 5px;
    background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
    .rbbox:hover{background-color: #EFFBEF;}

  8. Klik Simpan Template
  9. Selesai

«
Next
Newer Post
»
Previous
Older Post

4 comments Cara Membuat Related Post (Artikel Terkait) dengan Scroll

  1. Mengenai cara membuat menu (dropdown hover), silakan kunjungi alamat ini:

    http://www.iskaruji.com/2011/01/memasang-menu-dropdown-hover.html

    Smg berhasil dan tetap eksis blognya karena dapat mendatangkan uang juga dari iklan yg dipasang (asal trafiknya juga tinggi)....

    ReplyDelete
  2. Sama-sama Rudi Hartono. Semoga bisa membantu. :)

    ReplyDelete
  3. Ini hasilnya seperti yang di bawah ini ya gan? Bagus banget....

    ReplyDelete

Tolong tinggalkanlah komentar walaupun hanya sepatah kata. Berkomentarlah dengan sopan dan sesuai dengan artikel yang dibahas.