Cara membuat postingan terkait di bawah postingan blog dengan mudah

Cara membuat postingan terkait
di bawah postingan blog

Kali ini saya akan membahas tentang cara membuat artikel terkait disertai dengan gambar di bawah postingan blog. Contoh gambarnya sebagai berikut.

Menambah artikel terkait sangat penting. Ketika visitor ingin tahu lebih dalam tentang artikel yang di bahas di blog anda, dia akan mengklik artikel terkait di bawahnya dan pastinya akan meningkatkan traffic blog anda.

Cara membuat postingan terkait pada blog, ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger anda.

2. Klik template pada bilah sisi kiri => Edit HTML. Lihat gambar di bawah.

3. Dalam kotak yang berisi script-script HTML tersebut klik Ctrl + F untuk pencarian. Cari script </head> .

4. Jika sudah ketemu, copy paste script di bawah ini tepat di atas atau sebelum kata </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Setelah selesai paste script di atas, cari script <div class='post-footer'>.  Biasanya ada 2 script yang seperti itu, pilih saja yang ke 2 (jika yang kedua tidak bisa, paste di yang pertama). Jika ada lebih dari 2, coba satu-satu pasti bisa.

6. Jika sudah ketemu, copy paste script berikut di atas <div class='post-footer'>.

<!-- Related Posts with Thumbnails Code Start-->
<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=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyrijt4DEMQA8izlkyN8TsP9FvT72rCzOxHizcO7M6wyjKnDZfEMLijpsRh3NlXXQv_ig70jIsFGTsz1AAmgF5pqKIvMv_AL89PEZomJO3sONKtQU3aYdu8jn57Ycrx_vwNP6hc_jVUwJF/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

 7. Untuk merubah banyaknya postingan terkait yang ingin anda tampilkan, ubah angka 4 yang saya beri warna biru di atas menjadi yang anda inginkan.

8. Klik simpan template (letaknya di atas) dan lihat hasilnya.

Sekian dan semoga bermanfaat. Terimakasih.