Cara membuat Artikel Terkait Dengan Gambar

Assalamu'alaikum sobat blogger, kali ini eko akan menuliskan tentang tips blogging yaitu cara membuat artikel terkait di blog, namun bukan sembarangan artikel terkait sob, artikel terkait ini lengkap dengan gambar pada postingan. Selain menambah blog semakin menarik, related post atau artikel terkait ini juga bisa mengalihkan perhatian pengunjung, sehingga pengunjung ingin membaca artikel yang tertera pada related post tersebut.

Nah, ingin tau seperti apa artikel terkaitnya sob? ini dia screen shootnya.

Yups itulah contoh artikel terkait yang akan kita buat sob, nah langsung saja nyook kita buat.

1. Yang pertama, biasa sob login blogger sobat dahulu.

2. Kemudian klik Template --> Pilih Edit HTML --> Klik Lanjutkan --> Centang Expand template Widget lalu sobat cari kode </head> . Gunakan ctrl+f untuk memudahkan pencarian.

3. Salin kode di bawah ini dan letakkan di atas atau sebelum kode </head>

<!--Start Related Posts Script From http://eko-tipsntrick.blogspot.com/-->
<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 type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFe10jly4Ofqz6VPd_M3uPIxKwJgt64JgHeg5HcS1b5La1KRurnI2sbjvPlZna2G_xYHbpzfZDofoeHeiKQPOknJ3zqCiMznzyi99AunPcoMRQX-eB9f-3HJAI7HinmfTIgIBedbxMhup0/s1600/No+Image.jpg&quot;; var maxresults=7; var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post From http://eko-tipsntrick.blogspot.com/-->

Note

• Ganti angka 7 dengan angka berapapun yang sobat inginkan karena itu akan menampilkan jumlah postingan terkait yang akan di tampilkan.
• Ganti Related Posts dengan kata-kata yang sobat inginkan juga, seperti "artikel terkait, baca juga, dll".

4.  Lalu Cari kode <div class='post-footer'> atau bila kode tersebut tidak ditemukan, sobat cari kode ini <data:post.body/>. Salin kode di bawah ini dan letakkan di bawah kode <div class='post-footer'> atau <data:post.body/>.

<!-- start related posts-->
<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><br/><a href='http://eko-tipsntrick.blogspot.com/' target='_blank'><font color='#ccc' size='small'>Tutorial Blog dan SEO</font></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->

5. Dan yang terakhir simpan dan lihat hasilnya.

Huft, selesai juga kan sob artikel terkait dengan gambarnya? intinya jangan mudah putus asa jika ingin berhasil, begitu juga bisa sobat ingin membuat suatu gadget atau hal apapun juga dalam blog sobat, kuncinya hanya cukup telaten dan teliti sob. Ouke hanya seperti itu yang bisa saya tuliskan, terimakasih yah udah mampir..... good luck.