Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Artikel/Posting Terkait dengan atau tanpa Scroll Bar

Jika kalian merasa tidak suka dengan gaya artikel/posting terkait dengan gambar/thumbnail, 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/-/&#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>
    </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.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 20 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!