Artikel/Posting Terkait dengan atau tanpa Scroll Bar

Tabel Konten
  1. Sedikit Penyesuaian: 

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.

20 Komentar

  • Admin

    wah menarik sekali nih tutornya bt di pelajarin ...

  • Unknown

    Maaf mas ga nyambung. Daftar saja di alexa > site tool > claim site

  • Sang Blogger

    Trims banyak gan, tutorialnya sangat membantu sekali, kebetulan blog saya baru jadi, dan pengen buat seperti yg dimaksud di atas. o y gan, ijin copas ya,,,..

  • Anonim

    mau nyoba tapi nanti ahh kalo udah templatenya saya fix :P

  • Unknown

    kode data:post.body/ nya ga cuma 1 mas
    aduh, gimana ya mas ??? banyak bgt...
    taruh dimana mas ???
    sudah tak coba taruh di yang pertama malah ga jadi...

    saya ada 7 mas taufik...

    trus ada banyak kode b:if cond='data:blog.pageType == "item"'><data:post.body/
    ,,,

    dah aku coba taruh di bawahnya,, gagal hu :(

  • Taufik Nurrohman

    @trii waluyo Haha... :D Berarti templatemu sangar! Ada tujuh???? @@,

    Kalau gitu taruh saja di sekitar kode yang mudah terlihat. Coba taruh di atas kode <div class='post-footer'>. Pada intinya sebenarnya adalah tentang bagaimana kita bisa menampilkan daftar artikel terkait di bawah posting.
    Bahkan kalau mau meletakkannya di atas posting juga bisa. Di atas judul! Tinggal cari tahu saja elemennya di mana.

  • Unknown

    mas, kogh munculnya di atas posting sih, Gimana donk..???
    caba liat deh mas URL dibawah ini..
    http://blogriefs.blogspot.com/

  • Taufik Nurrohman

    @Riefky Sucahyo Pindah kode artikel terkait di atas menjadi di atas <div class='post-footer'>

  • Unknown

    @Taufik Nurrohman
    ok mas berhasil nih trick nya makasih ya... \o/

  • Unknown

    mas, saya sedang mencari tutorial untuk membuat recents post supaya bisa tampil tapi tidak mempengaruhi gambar. trims atas jawabannya nanti saya dicolek.

  • Taufik Nurrohman

    @Paparapzio Holic Nggak mudeng <=)

  • marco

    mas, klo maxNumberOfLabels = 1; tapi urutannya dari belakang,
    atau yang mau ditampilkan adalah label dengan urutan yang terakhir, gmn mas?
    (slx kami coba ngisi maxNumberOfLabels = 1;, tapi yg ditampilkan adalah label urutan pertama).

    • Taufik Nurrohman

      Kurang tahu. JavaScript ini bukan Saya yang buat. Coba ganti appendChild ke prependChild dulu:

      document.getElementById(&#39;hompimpa&#39;).prependChild(div1);
      • marco

        sudah dicoba, tp gak berhasil mas.
        tapi stlh utak-atik, dan coba:

        function search10(query, label) {
        ...
        document.documentElement.firstChild.appendChild(script);
        }

        'firstChild' diganti dengan 'lastChild', berhasil mas.
        urutan label-nya, dimulai dari urutan label terakhir... hehehehe

  • Unknown

    Mas Taufik, kode untuk membuat related post seperti punya sampeyan bagaimana? Maksud saya, yang menampilkan semua judul posting per labelnya. Sejauh ini, saya mencari-cari belum ketemu. Yang ada hanya semua judul tanpa Label, atau dengan label tetapi yang terkait dalam satu label saja. Kalau milik sampeyan saya lihat kan tampil semua mas dari setiap label. Makasih mas. :)

  • kang olis

    salam...pak kalo artikel terkait dibuat bersebelahan dengan email langganan bagaimana? terima kasih
    blog saya home-edukasi2.blogspot.com

  • Yusuf

    ini yang saya cari-cari..
    bolak sana-sini gak ketemu. ehh ternyata DTE ada yang seperti ini
    thanks sob..

  • Randy

    bang kalo artikel terkait cuma ngambil last label alias label terakhir gimana bang?

  • Ijal Fauzi

    Supaya nama labelnya ngga muncul gimana mas?

Komentar telah ditutup.