Membuat Sendiri Related Post plus Gambar Thumbnail di Blog

Cara Mudah Membuat Related Post (Artikel/Posting Terkait) plus Gambar Thumbnail di Bawah Posting Blog.

KAYANYA semua blog saat ini sudah punya widget related posts di bawah tiap postingan. Namun, hati-hati, suka ada sisipan link dalam kodenya jika kita tidak berhati hati.

CB sedah sering memposting soal artikel terkait ini. Anda bisa buka Related Post Widget untuk melihatnya. Posting ini merupakan UPDATE dari semua tips posting terkait itu.

Agar related post kita aman dari sisipan link, "intip" saja jika kode posting terkait itu menyertakan link javascript, dengan cara copas linj js-nya ke browser.

Baca juga: Related Post yang Aman dari Sisipan Link.

Untuk keamanan dan kenyamanan, kita bisa membuat related post sendiri, pilihan sendiri, di laman yang sudah disediakan dengan sangat baik oleh DTE.

Ada enam jenis related post yang bisa kita pilih di sana, seperti dalam gambar berikut ini. Sangat lengkap. Jadi, Anda gak usah pergi ke tempat lain untuk mendapatkan kode related post. Cukup di sini:

CB sendiri memilih  Related Post plus Gambar Thumbnail. Kayaknya lagi "trending" model related post begini. Lebih berat ketimbang yang simple (judul posting doang), namun lebih menarik dan seo friendly karena menggunakan gambar.

Kita bisa lakukan konfigurasi sendiri di sana, melihat previewnya, dan mengambil/memasang kodenya dengan aman di blog kita.

Sebagai contoh, kode related post plus thumbnail image yang dipasang di blog ini sebagai berikut:

KODE CSS
Dipasang di atas kode ]]> atau 

/* ==== Related Post Widget Start ==== */

.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
  margin:0;
  padding:0;
  list-style:none;
}
.related-post-style-2 li {
  padding:10px;
  border-top:1px solid #eee;
  overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  float:left;
  margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
  font-weight:bold;
  font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
  display:block;
  overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

/* ==== Related Post Widget End ==== */

KODE XML & JAVASCRIPT
Disimpan di atas kode