Monday, October 21, 2013
Salah satu cara yang relatif tepat untuk meningkatkan aktivitas dari pengunjung adalah dengan membuat Artikel Terkait / Related Posts. Baik itu dengan Gambar / Thumbnail atau url link biasa yang disertai dengan Judul Artikel. Beberapa saat lalu, Media Blogger juga sudah memberikan cara yang mudah untuk memasang artikel terkait ini hanya saja belum disertai Gambar.
Fungsi dari penggunaan gambar Thumbnail itu sendiri lebih ke arah pmbuatan tampilan yang menarik sehingga meningkatkan minat dan simpati pengunjung untuk membaca artikel / postingan lain yang telah saudara buat. Contoh dari hasil pemasangannya adalah sebagai berikut :
Cara Membuat Artikel Terkait (Related Posts) dengan Gambar Thumbnail :
1. Pada dashboard di blogger.com pilih menu Template > Klik Edit Template agar bidang kerja pengeditan sudah aktif.
2. Kemudian tekan CTRL + F, dan cari code ]]></b:skin>
Setelah ketemu, COPAS kode berikut ini di atas / dibawah kode ]]></b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiNdHxgAOgTA6bkQ-V7Cdr0Jr0VAoRFug8kg3AWaZRvhHpFStnExboFQRaRIO_MyMsfqslNnEK1L09D_A-5D2oOQQEY1rWUBIeIj3tIfJMHgn5oYnqNn3ELYu8lEPNth3mL8fqpgMeGik/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiNdHxgAOgTA6bkQ-V7Cdr0Jr0VAoRFug8kg3AWaZRvhHpFStnExboFQRaRIO_MyMsfqslNnEK1L09D_A-5D2oOQQEY1rWUBIeIj3tIfJMHgn5oYnqNn3ELYu8lEPNth3mL8fqpgMeGik/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>
Penerapan Kode HTML Artikel Terkait Bergambar
Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna yang dapat anda EDIT serta disesuaikan sendiri berdasarkan keinginan, caranya
Silahkan Anda cari kode <data:post.body/>
Kemudian letakan kode ini tepat di bawah kode <data:post:body/>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div style='clear:both'/>
</b:if>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div style='clear:both'/>
</b:if>
Simpan Template Anda.
Keterangan Mengenai Kode Artikel Terkait Bergambar
1. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.Demikian artikel tentang Cara Membuat Artikel Terkait dengan Thumbnail Gambar. Semoga dengan tutorial blogger / blogspot ini dapat bermanfaat dan menambah wawasan anda. Semangat Blogging For Media Blogger.
2. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.
3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya.
4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.
5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.
