Cara Membuat Artikel Terkait dengan Gambar

Cara Membuat Artikel Terkait dengan Gambar

Cara untuk meningkatkan pengunjung blog sobat adalah dengan membuat Artikel Terkait. Baik itu dengan Gambar atau url link biasa yang disertai dengan Judul Artikel. 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: 

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 dengan Gambar Thumbnail:

• Pada dashboard di blogger.com pilih menu Template > Klik Edit Template agar bidang kerja pengeditan sudah aktif.
• 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/AVvXsEgl7FepGEu5UoIxv5hG1Rug-amFfJ6t_waQ-2GT-pZLWYfIQa3LRACoUd5o8lx2dL-dhl0D0Tg6GSZIV86SpgpsMtf4GabEC62ol1AwO-RUfCTRG5eW2lwbPl0z28wAOh8TsyvxZQK2F1I/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  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/> gunakan CTRL + F untuk memudahkan pencarian.
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>

Klik Save Selesai

Semoga Sukses