Membuat menu scroll pada Artikel terkait di Blogger

,,hai sobat blogger semua,,,mlm2 gini enaknya otak-atik blog kali ya,,,hehehehe,,,
malam ini tgl 3 mei 2011, tepat jam 23:18 WIB, , , saya ingin share ama sobat semua tentang bagaimana cara membuat artikel terkait di blogger.
Gak usah lama2 ya,,langsung aja,,,

  1. Buka Blogger, dan login dengan ID Sobat
  2. Kemudian masuk di Rancangan, dan Pilih Tata Letak
  3. Pilih Edit HTML.
    Lagi - lagi berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu. 
  4. Tambahkan kode  <data:post.body/> . Jika sebelumnya sobat sudah pernah menggunakan artikel terkait, hapus saja dulu kode artikel terkait yang lama milik sobat.
    Dan jika sobat sudah menggunakan read more, sobat akan menemukan 2 kode <data:post.body/>.
  5. Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama.

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

  6. Setelah itu, letakkan kode berikut ini diatas kode ]]></b:skin>

    .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);}
    Simpan Template.
 Semoga berhasil ! Jika ada pertanyaan jangan sungkan - sungkan tanya ke saya di kolom komentar, kalau saya sempat akan saya balas. Terima kasih telah membaca artikel - artikel saya. Jangan lupa follow  ya...!!!

    0 komentar:

    Posting Komentar

    Terima kasih anda telah berkunjung diblog saya,,,!!!
    Jangan lupa comment ya,,,!!!! U Comment I Follow!!!
    comment anda sangat berarti buat kemajuan blog saya,,
    Blog ini DoFollow