Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts Dte
Related Post merupakan sebuah widget blog yang sangat mempunyai kegunaan dan dianjurkan untuk dipasang di blog. Selain memudahkan pengunjung untuk mendapat artikel sejenis, related posts juga mempunyai kegunaan untuk mengurangi nilai bounce suatu blog.
Namun seiring dengan validasi HTML5, banyak script related posts yang malah menyumbangkan error pada validasinya.
Nah kalau Anda ingin memasang related posts yang valid HTML5, aku menyarankan untuk mencoba memakai related post dari DTE. Ada 5 jenis tampilan related posts dari DTE ini, Anda dapat memilihnya sesuai dengan selera Anda.
Related posts dari DTE ini memungkinkan pengguna untuk memodifikasinya lagi biar lebih sesuai dengan impian pengguna. Silahkan modifikasi tampilannya pada arahan CSS-nya.
Nah kali ini kita mencoba sedikit memodifikasi tampilan related posts DTE style 3 yang menampilkan thumbnail dan judul artikelnya. Untuk mendapat 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 lalu 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 menyerupai tampak pada gambar di bawah ini.
Related Posts default
Setelah dimodifikasi
Untuk memodifikasinya silahkan perhatikan arahan CSS-nya menyerupai 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 yaitu 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 impian kita contohnya menjadi 140px. Dan hapus kode border-left:1px solid #eee; untuk membuang garis pinggir tiap-tiap item-nya.
Silahkan hapus juga arahan 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 impian Anda, contohnya menjadi 90px.
Selesai... lalu silahkan simpan arahan CSS-nya yang sudah dirubah tapi di atas kode ]]></b:skin> atau </style>
Untuk menambahkan title tag pada thumbnailnya, kita harus mengedit pada arahan javascriptnya. Silahkan buka arahan js-nya dan nanti Anda akan menemukan arahan menyerupai ini.
<img alt="Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'">
Silahkan ganti semuanya dengan arahan di bawah ini
<img alt="Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE">
Kemudian save perubahannya dan silahkan upload ulang arahan js-nya. Anda dapat memakai Google Drive untuk mengupload arahan js-nya. Untuk mengupload file di Google Drive silahkan baca lagi postingannya pada link di bawah ini.
Kemudian silahkan simpan arahan 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...
Sumber https://www.kompiajaib.com/
0 Response to "Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts Dte"
Posting Komentar