Artikel/Posting Terkait dengan atau tanpa Scroll Bar

Ada Tiga Jenis Aplikasi Artikel terkait:

  1. Alikasi artikel/Posting terkait tanpa gambar/thumbnail.  (Yang akan anda baca saat ini)
  2. Alikasi artikel/Posting terkait dengan gambar dan judul saja.
  3. Alikasi artikel/Posting terkait dengan gambar, judul, dan deskripsi.

perbedaannya hanya pada tiga komponen penting yaitu Gambar/Thumbnail, Judul Artikel, dan Deskripsi Artikel.
Dan berikut ini adalah model elemen posting terkait berbentuk daftar yang lebih sederhana dan praktis:

artikel terkait blogspot

Untuk membuatnya, ikutilah langkah-langkah kebenaran Saya ini:

  • Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
  • Salin kode pemodel ini, kemudian letakkan di atas kode </style> atau ]]></b:skin>:
    #mamas-topik {
    margin-top:100px;
    clear:both;
    display:block;
    }


    .paling-ganteng {
    border:2px solid #666;
    padding:5px;
    background-color:#efefef;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:inset 0 0 7px #666;
    -moz-box-shadow:inset 0 0 7px #666;
    box-shadow:inset 0 0 7px #666;
    }


    .paling-ganteng:hover {background:#f9f9f9;}

    .sedunia {
    padding:10px;
    border:1px solid #bbb;
    height:165px;
    overflow:auto;
    }
  • Setelah itu salin juga kode ini:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='mamas-topik'>
    <h2>Tutorial Sejenis:</h2>
    <div class='paling-ganteng'>
    <div class='sedunia'>
    <div id='hompimpa'/>
    <script type='text/javascript'>
    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 7;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 50;
    maxNumberOfLabels = 7;
    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;hompimpa&#39πŸ˜‰.appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement(&#39;script&#39πŸ˜‰;
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/'
    + label +
    '?alt=json-in-script&amp;callback=listEntries10');
    script.setAttribute('type', '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>
    </div>
    </div>
    </b:if>

    Kemudian letakkan tepat di bawah kode yang tampak seperti ini:

    <data:post.body/>

    atau seperti ini:

    <p><data:post.body/></p>

    atau seperti ini:

    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

  • Klik Simpan Template dan lihat hasilnya (pada halaman item).

Sedikit Penyesuaian:

  • Ganti kode yang Saya beri warna merah (Saya harap Anda tidak buta warna) dengan judul yang kalian inginkan.
  • Di situ juga terdapat beberapa variabel yang bisa kalian utak-atik, tapi Saya rasa itu tidak telalu penting. Langsung simpan saja.
  • Jika kalian tidak menghendaki scroll bar dalam elemen ini, hapus saja deklarasi overflow:auto; dan ganti value 165px dalam properti height: dengan auto sehingga hasilnya menjadi seperti ini:
    .sedunia {
    padding:10px;
    border:1px solid #bbb;
    height:auto;
    }

    Dengan begitu tampilan scroll bar akan hilang, sementara tinggi artikel/posting terkaitmu akan menyesuaikan diri dengan banyaknya daftar yang ada di dalamnya.

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s