Cara Membuat Artikel Terkait dengan Gambar

Cara Membuat Artikel Terkait dengan Gambar - sudah dua hari saya tidak posting nih sob, dikarenakan terlalu sibuk dengan tugas kuliah. back to topic, tips dan trik blog Artikel terkait atau related post adalah artikel lain yang berhubungan langsung dengan artikel awal. kalau di telusuri di google satu persatu banyak sekali model penggunaan Artikel terkait ini. mulai dari menggunakan gambar, hingga teks biasa. nah, yang saya coba bahas disini membuat Artikel terkait dengan gambar. kenapa menggunakan gambar? menurut saya dengan menggunakan gambar akan menarik perhatian pengunjung untuk melihat lihat artikel lainnya yang ada di blog. letak artikel terkait ini biasanya di bawah postingan.

Untuk cara pemasangannya.

1. Login ke akun blogger kamu lalu masuk ke Dashboard Blog.

2. Masuk ke menu Template pilih Edit HTML. Jangan lupa Backup dulu template kamu.

3. Cari kode ini </head> untuk mempermudah pencarian tekan Ctrl + F di tombol keyboard.

4. Kemudian letakkan kode di bawah ini tepat di atas kode </head>

<!--Related Posts seo-dark.blogspot.com Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 src='http://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
</b:if>
<!--Related Posts seo-dark.blogspot.com Styles End-->

5. Jangan disimpan dulu, karena tips dan trik blog masih berlanjut :p
6. Kemudian cari kode <data:post.body/> biasanya ada 4 kode seperti ini di HTML silahkan di coba satu persatu, kalau di tempat saya di nomor 3 (setiap template berbeda beda).
7. Copy kode berikut ini lalu letakkan di bawah kode <data:post.body/> tadi.

<!--Related Posts seo-dark.blogspot.com Styles End--><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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://seo-dark.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>
<!--Related Posts seo-dark.blogspot.com Styles End-->

Kode yang berwarna Merah, bisa kamu ganti sesuai keinginan kamu misalnya Artikel Terkait.
Kode yang berwarna Biru, merupakan jumlah artikel terkait yang akan di tampilkan, ganti sesuai dengan keinginan kamu.
Ganti kode yang berwarna Hijau, dengan url blog kamu.

8. Kemudian Simpan Template dan lihat hasilnya.

Hasil di Blog saya yang lain.

Demikian tips dan trik blog Cara Membuat Artikel Terkait dengan Gambar saya buat, semoga bermanfaat.