Jika anda masih awam dengan blogspot, maka sebaiknya gunakan template blogspot yang simple-simple dulu, soalnya template blogspot yang simple maka teks html lebih sedikit dan tentunya kode dari setiap html dari artikel terkait di blogspot ini akan semakin mudah di input.
Gak usah panjang lebar lagi, Berikut cara membuat artikel terkait di posting blogspot dengan gambar :1. Masuk ke akun blogger.
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>
<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 src=’http://belajarblogging.googlecode.com/files/releatedimage.js’ type=’text/javascript’/>
</b:if><!–Related Posts with thumbnails Scripts and Styles End–>
Dan lihat hasilnya, eitsss !!!!! tunggu dulu masih ada tambahannya…
Cari kode berikut untuk menambahkan artikel terkait di blogspot secara lengkap :Jika belum tahu cara mencari kode setiap halaman teks html tersebut, silakan ikuti langkah-langkah menemukan kode html setiap halaman dengan cara pilih menu ‘edit’ di toolbar atas dari browser kamu dan pilih ‘find’. Maka kotak pencarian akan muncul di bawah pojok kiri dari browser. Ketikkan kode yang akan di cari, maka kode akan ditemukan dengan ditandai blok berwarna biru (biru ato ijo ya ?) Sorry lupa.<div class=’post-footer-line post-footer-line-1′>
Nah jika sudah ditemukan, maka tambahkan kode dibawah ini. Penempatannya ada di BAWAH kode diatas.
<!– Related Posts with Thumbnails Code Start–>
<b:if cond=’data:blog.pageType == "item"’><div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’><b:if cond=’data:label.isLast != "true"’>
</b:if><b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"’ type=’text/javascript’/></b:if></b:loop><a href=’http://cossierandi.com/trik-cara-membuat-artikel-terkait-di-posting-blogspot-dengan-gambar.html’ style=’display:none;’>Related Posts with thumbnails for blogger</a><a href=’http://www.bloggerplugins.org/’ style=’display:none;’>blogger widgets</a><script type=’text/javascript’>
var currentposturl="<data:post.url/>";var maxresults=5;
var relatedpoststitle=”Artikel Terkait”;removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();</script>
</div><div style=’clear:both’/></b:if><!– Related Posts with Thumbnails Code End–>
Nah, jika semua sudah ditambahkan, anda tinggal ‘SIMPAN’ dan sekarang silakan lihat hasil dari Trik Cara Membuat Artikel Terkait di Posting Blogspot Dengan Gambar