Cara Membuat Artikel Terkait disertai gambar

Cara Membuat Artikel Terkait disertai Gambar atau Cara membuat artikel terkait dengan gambar atau Cara membuat artikel terkait dengan Thumbnail.

Artikel terkait sering juga di sebut dengan related post jadi sama artinya artikel ini Cara membuat related post disertai gambar/Thumbnail.

Artikel terkait atau related post adalah sebuah fitur dari sebuah website yang fungsinya untuk menampilkan judul-judul artikel yang masih dalam satu (1) Label dengan artikel yang sedang di bukanya dan artikel terkait atau related post ini akan tampil secara otomatis di akir artikel/postingan dan contohnya seperti gambar di bawah ini 

Fungsi Artikel Terkait atau Related Post.

fungsi dari artikel terkait ini tentunya sangatlah penting bagi sebuah website atau blog karena dengan membuat dan menampilkan artikel terkait maka akan bisa meningkatkan trafic terutama untuk traffik halaman yang di jelajahinya (view page)

fungsi Artikel Terkait yang lainya adalah akan memberikan kemudahan bagi pengunjung website/blog untuk membaca artikel yang memang masih ada kaitanya dengan arkel yang sedang di bacanya, dan dengan membuat artikel terkait maka artikel yang anda tulispun akan semakin bermanfaat untuk orang banyak.

Cara Membuat Artikel Terkait.

Cara membuat artikel terkait/related post ini pada dasarnya ada beberapa cara yaitu hanya dengan judul artikel atau judul artikel disertai cuplikan artikel nya serta judul artikel dan cuplikan artikel serta gambar dari artikel tersebut.

tentunya dengan menampilkan artikel terkait disertai gambar dan cuplikan artikel nya akan lebih mudah di mengerti bagi pengguna/pengunjung sebuah situs, maka dalam Panduan Website ini saya akan berikan Cara membuat artikel terkait disertai dengan gambar/thumbnail, dan caranya seperti di bawah ini 

Cara Membuat Artikel Terkait disertai gambar.
1. pertama buka blog anda www.blogger.com lalu login ke akun blog masing-masing.

2.klik desain untuk menuju dashboard blog.

3.dalam menu dashboard bloh pilih Template , Lalu klik EDIT HTML , Contohnya seperti gambar dibawah ini

4.selanjutnya cari kode </head>
5.kemudian kopi kode yang di bawah ini lalu pastekan di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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/AVvXsEhCbBx-qiX__10uHKlA4IGn6or5m43auJMDtmaYidyUzz0Yp4GRFk7LNimuEWJSFY_l_3oiKMNulQP8yoWkKWV3ArFXwXBeR7AVlWS-85KLsA5NGHF_e3EfpQgw9SeJ_rrFcTcem-chBLE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait";
</script>
<script src='http://andreykusanagi.googlecode.com/files/related-posts-thumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6.selanjutnya kopi lagi kode yang di bawah ini dan pastekan di atas kode <div class='post-footer-line post-footer-line-1'> atau di atas kode <p class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://multi-blogg.blogspot.com'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

7.kemudian simpan Template nya
8.selesai.

Baca juga panduan Cara membuat artikel terkait di sudut pojok bawah

Demikian panduan website Cara desain website tentang Cara membuat Artikel Terkait disertai Gambar.

jika ada kesulitan silahkan bertanya di kolom komentar di bawah ini