Cara Membuat Artikel Terkait dengan Gambar

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 :

Sebenarnya sobat dapat memanfaatkan fasilitas daripada Linkwithin, hanya saja terkadang disaat server sedang down akan membuat loading blog anda menjadi lebih lambat. Untuk mengoptimalkannya terlebih lagi dalam hal Search Engine Optimization (SEO), sahabat semua harus lebih meningkatkan kinerja pada blog anda.

Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan menjadi antusias meneliti lebih lanjut setiap halaman yang berkaitan di dalam posting artikel anda.

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/AVvXsEgscjmwp7FWt9dja6urldhBeklnRj-n6PyTswCJxWtBA5ESIGTJxLYoz6n1HG10N-zdEosY82ciFdpoow-XwI6RB7LEUD2X1gHpGlNqwi2TMNyWKxCudd6HwsB6590XlS8SLH01D6LzsdM/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 di bawah ini setelah kode <data:post:body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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.
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.