Cara Membuat Artikel Terkait

Apabila kita membuka dan kemudian membaca artikel yang terdapat pada sebuah blog, maka hampir dapat dipastikan bahwa di bawah setiap artikel yang dibuka dan dibaca tersebut terdapat beberapa tautan dengan berisikan daftar judul artikel yang memiliki keterkaitan kategori atau label dengan artikel yang dimaksud. Dimana model daftar artikel yang ditampilkan pun sangat bervariasi. Mulai dari yang hanya menampilkan daftar tautan, menampilkan daftar link dengan fungsi scroll, menampilkan daftar tautan disertai dengan gambar, dan bahkan dengan menampilkan kombinasi beberapa model tersebut, yang secara umum daftar semacam ini disebut sebagai daftar artikel terkait.

Berbicara mengenai daftar artikel terkait, maka dapat dipastikan bahwa tidaklah terlalu banyak diantara kita yang belum mengenal atau mengetahui tentang teknik serta cara pembuatannya. Karena apabila kita ingin membuat daftar artikel terkait yang akan dimunculkan secara otomatis dalam setiap halaman artikel, maka script beserta langkah-langkah pengerjaannya dapat dengan mudah ditemukan dengan menggunakan bantuan mesin telusur sehingga kita pun dapat dengan mudah memilih model daftar artikel terkait yang dihasilkan oleh script atau kode yang digunakan

Dan selanjutnya apabila Anda ingin membuat daftar artikel terkait dengan menggunakan desain atau model seperti yang tampak pada gambar di atas, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, seperti biasa apabila akan melakukan kustomisasi pada template maka terlebih dulu buka menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya.

.bingkai-dalam-konten {
  height: auto;
  width: 98%;
  padding: 5px;
  overflow: hidden;
  margin: 5px 0px 5px 0px;
  border: 1px solid #666666;
  color: #424242 !important;
  text-align: justify;
  text-shadow: 0 -1px 0 white;
  text-decoration: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #ffffff;
  background: -moz-linear-gradient( center top, #f3f3f3 30%, #ffffff 70% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f3f3f3), color-stop(1, #ffffff) );
}

.area-latar-widget {
  padding: 5px;
  overflow: hidden;
  border: 1px solid #999999;
  background: #ffffff;
  background: -moz-linear-gradient( center top, white 95%, #f3f3f3 100% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #fcfcfc) );
}

.daftar-artikel-terkait li {
  text-align: justify;
}

.daftar-artikel-terkait li:last-child {
  list-style: none;
}

Sumber: http://www.rianwardhana.com/2012/07/cara-membuat-artikel-terkait.html#.UOKE6Jkyd54

Ketiga, cari kode </head> dan kemudian sisipkan rangkaian script berikut ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
function artikelterkini(json) {
var numposts = 5;
  document.write('<ul>');
    for (var i = 0; i < numposts; i++) {
      document.write('<li>');
      var entry = json.feed.entry[i];
      var posttitle = entry.title.$t;
      var posturl;
      if (i == json.feed.entry.length) break;
      for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
      }
      posttitle = posttitle.link(posturl);
      document.write(posttitle);
      document.write('</li>');
    }
  document.write('</ul>');
}
//]]>
</script>


Sumber: http://www.rianwardhana.com/2012/07/cara-membuat-artikel-terkait.html#.UOKE6Jkyd54

Keempat, untuk mempermudah dalam penempatan script, maka cari kode <div class='post-footer'> dan kemudian sisipkan rangkaian script berikut ini tepat di bawahnya.

<!--Artikel Terkait Versi Web Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.labels'>
    <div class='bingkai-dalam-konten'>
      <h4>
        <b>
          Baca Pula Artikel Terkait Dalam Kategori:
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
          .
        </b>
      </h4>
      <div class='area-latar-widget'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast != &quot;true&quot;'>
        
          <b:else/>
            <div class='daftar-artikel-terkait'>
              <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' type='text/javascript'/>
            </div>    
          </b:if>
        </b:loop>
      </div>
    </div>
  </b:if>
</b:if>
<!--Artikel Terkait Versi Web Selesai--


Sumber: http://www.rianwardhana.com/2012/07/cara-membuat-artikel-terkait.html#.UOKE6Jkyd54

Kelima, simpan template.

Sehingga akhirnya terbentuklah sebuah daftar artikel terkait untuk beberapa label atau kategori artikel sekaligus, yang akan dimunculkan secara otomatis dalam setiap artikel (dalam hal ini adalah pada bagian post footer atau di bawah setiap artikel yang diterbitkan). Sedangkan model atau desain tampilan daftar artikel terkait yang dimaksud adalah seperti yang tampak pada gambar di atas. Sehingga apabila warna latar maupun garis yang digunakan belum sesuai dengan desain tampilan halaman blog yang Anda kelola, maka silakan untuk melakukan kustomisasi seperlunya pada kode CSS yang digunakan.