Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE

Related Posts DTE
Related Post merupakan sebuah widget blog yang sangat berguna dan dianjurkan untuk dipasang di blog. Selain memudahkan pengunjung untuk mendapatkan artikel sejenis, related posts juga berguna untuk mengurangi nilai bounce suatu blog.

Namun seiring dengan validasi HTML5, banyak script related posts yang malah menyumbangkan error pada validasinya.

Nah jika Anda ingin memasang related posts yang valid HTML5, saya menyarankan untuk mencoba menggunakan related post dari DTE. Ada 5 jenis tampilan related posts dari DTE ini, Anda bisa memilihnya sesuai dengan selera Anda. 

Related posts dari DTE ini memungkinkan pengguna untuk memodifikasinya lagi agar lebih sesuai dengan keinginan pengguna. Silahkan modifikasi tampilannya pada kode CSS-nya.

Nah kali ini kita mencoba sedikit memodifikasi tampilan related posts DTE style 3 yang menampilkan thumbnail dan judul artikelnya. Untuk mendapatkan scriptnya silahkan menuju Widget Configurator-nya pada link di bawah ini:
  • http://blogger-json-experiment.googlecode.com/svn/resources/related-post/widget-configuration.html
Kemudian silahkan pilih Related Post Style-nya pada Style 3 kemudian klik tombol "Preview & Get Code".

Secara default, bentuk thumbnail-nya berupa segi empat sama sisi ( tinggi dan lebarnya sama ). Nah kali ini kita akan merubah lebar thumbnailnya menjadi lebih lebar seperti tampak pada gambar di bawah ini.

Related Posts default
Related Posts

Setelah dimodifikasi
modifikasi Related Posts DTE


Untuk memodifikasinya silahkan perhatikan kode CSS-nya seperti di bawah ini.

.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 3 */
.related-post-style-3,
.related-post-style-3 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-3 .related-post-item {
  display:block;
  float:left;
  width:80px;
  height:auto;
  padding:10px;
  border-left:1px solid #eee;
  margin-bottom:-989px;
  padding-bottom:999px;
}
.related-post-style-3 .related-post-item:first-child {border-left:none}
.related-post-style-3 .related-post-item-thumbnail {
  display:block;
  margin:0 0 10px;
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-3 .related-post-item-title {font-weight:bold}

.related-post h4 adalah judul widgetnya, silahkan rubah persentase font-size-nya untuk memperbesar ukuran judul widgetnya.

.related-post-style-3 .related-post-item untuk mengatur item related post-nya, silahkan rubah width-nya sesuai keinginan kita misalnya menjadi 140px. Dan hapus kode border-left:1px solid #eee; untuk membuang garis pinggir tiap-tiap item-nya.

Silahkan hapus juga kode berikut: .related-post-style-3 .related-post-item:first-child {border-left:none}

.related-post-style-3 .related-post-item-thumbnail untuk mengatur tampilan thumbnailnya. Silahkan rubah dan samakan width-nya dengan width pada kode .related-post-style-3 .related-post-item di atas tadi (140px). Untuk height-nya silahkan rubah sesuai keinginan Anda, misalnya menjadi 90px.

Selesai... kemudian silahkan simpan kode CSS-nya yang sudah dirubah tapi di atas kode ]]></b:skin> atau </style>

Untuk menambahkan title tag pada thumbnailnya, kita harus mengedit pada kode javascriptnya. Silahkan buka kode js-nya dan nanti Anda akan menemukan kode seperti ini.


<img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'">

Silahkan ganti semuanya dengan kode di bawah ini


<img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'">

Kemudian save perubahannya dan silahkan upload ulang kode js-nya. Anda bisa menggunakan Google Drive untuk mengupload kode js-nya. Untuk mengupload file di Google Drive silahkan baca lagi postingannya pada link di bawah ini.

Kemudian silahkan simpan kode HTML berikut javascriptnya di bawah kode <data:post.body/> yang paling bawah atau terakhir. Jangan lupa menambahkan tag conditional untuk menampilkan widget hanya di postingan saja.

Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments