Cara Membuat Artikel Terkait di Bawah Postingan Blog

Cara Membuat Artikel Terkait - Biasanya Artikel terkait atau releated artikel di blogspot tidak tersedia. Namun kita dapat membuat postingan terkait di blog kita. Tujuannya sudah pasti untuk meningkatkan page view blog dan juga untuk meningkatkan optimasi atau SEO blog.

Widget releated artikel pada umunya terdiri dari beberapa jenis, ada berbentuk list saja atau tulisan maupun disertai dengan gambar atau thumbnail. Mana yang lebih baik ?, tentu saja tergantung jenis template yang Anda gunakan, pengaruh cepat dan lambatnya widget artikel terkait tentu saja sedikit berpengaruh karena berupa gambar, namun biasanya semakin baik template di buat kecepatan loading gambar juga akan berpengaruh.

Sebelum membuat menu artikel terkait disertai gambar, ada baiknya memperhatikan terlebih dahulu ukuran lebar postingan di blog Anda untuk memudahkan Anda menyesuiakan dengan ukuran blog.  Jika sudah, lakukan langkah-langkah berikut ini.

1. Login ke Blog Anda 

2. Pilih menu template > edit HTML

3. Tekan CTRL+F  untuk mencari kode </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: #f2f2f2;}
#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;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Selanjutnya masih pada menu edit HTML 

Cari kode <div class=’post-footer’> Pastekan kode HTML di bawah ini tepat di atas nya.

<!-- 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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
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://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSE7VIS0gSl3Iv444Jwig53OAIjLKFgscPbsH-I_ACbuAbaeo4HL0WL-AE9iEU1jCBAoKYlLctLPoQW_sYzsIuSBBW53bgcDKJdJomkGhKkCZoY9BQppBxO43Dxld9z2dKVcTOIHEnRaOF/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

NOTE:

Jika terdapat lebih dari satu kode <div class=’post-footer’> masukkan satu persatu sampai proses berhasil.

5. Untuk angka 5 bertanda merah adalah maksimal gambar yang ingin ditampilkan, untuk Releated Post bisa diganti sesuai dengan selera Anda. 

Setelah selesai simpan template. Lihat hasilnya, jika kurang sesuai dengan ukuran di postingan blogspot Anda, lakukan editing pada menu yang berwarna merah yang terdapat di atas kode </head>.

SHARE: