'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • Cara Membuat Menu Screol Artikel Terkait

    Rasanya sudah agak lama saya tidak membuat postingan tentang blogspot, pembahasan saya kali ini sebenarnya sudah lama di dunia per blogger an, tapi ga ada salahnya saya coba berikan buat sobat blogger pemula.
    Postingan sebelumnya, saya sudah pernah menulis tentang cara membuat artikel terkait atau related posts. Nah, sama saja dengan yang itu, tapi akan saya tambahkan scroll down menu pada artikel terkaitnya.
    Ga usah panjang lebar ya, langsung aja menuju lokasi.

    1. Buka Blogger, login dengan ID sobat tentunya.
    2. Kemudian klik Tata letak
    3. Pilih Edit HTML. Lagi - lagi berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu. Sudah di backup ? oke..
    4. Tambahkan kode berikut ini tepat dibawah<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);}

    7. Simpan Template.

    Semoga berhasil !

    Share this:

    Post a Comment

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018