Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 2

Related Post adalah suatu navigasi yang memungkinkan pengunjung untuk menjelajahi blog/website anda lebih lanjut dengan membaca artikel terkait. Pada suatu template yang terpasang di sebuah blog, ada template yang langsung meng-include-kan fitur ini, dan ada pula yang tidak. Jika template anda tidak terpasangkan Related Post/Artikel terkait, silahkan baca thread ini lebih lanjut.

Related Post/Artikel terkait adalah salah satu unsur penting yang mempengaruhi Search Engine Optimization (SEO) blog, percaya tidak percaya, navigasi yang satu ini dapat meningkatkan Pageview (PV) anda sebanyak 20-40%, angka ini akan semakin meningkat seiring dengan banyaknya artikel yang memiliki kesamaan topik di blog anda. Berikut adalah fungsi lain Related Post yang perlu anda ketahui:

1. Meningkatkan pageview (PV)
2. Mempercantik tampilan blog
3. Memfasilitasi pengunjung untuk mempermudah mereka mencari artikel lain yang memiliki kesamaan topik
4. Menjadi salah satu syarat yang harus dipenuhi blogger jika ingin menjadi publisher adsense (Kategori Navigasi)

Pemasangan related post sendiri tidak terlalu sulit, dimana anda hanya harus melakukan copy-paste pada script yang saya berikan dibawah ini.

Pada kesempatan kali ini, saya akan memberikan sejumlah script dengan berbagai style, mulai dari related post yang hanya memperlihatkan tulisan (judul) ataupun gaya yang menampilkan gambar. Jadi, silahkan pilih style related post yang sesuai dengan selera anda. Berikut adalah beberapa style related article yang kami sediakan:

Related Post dengan Thumbnail (Gambar)

Berbeda dengan style pertama, style kedua ini tampil lebih cantik dengan tampilan gambar kecil/thumbnail untuk menarik perhatian pembaca untuk mengklik artikel terkait yang anda miliki. Berikut cara pemasangannya:

1. Login ke Dashboard Blog Anda

2. Pilih menu Template--> Edit HTML

3. Tekan CTRL+F dan cari kode </head>

4. Copy-paste script dibawah ini diatas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<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:active{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:2px solid #f2f2f2;object-fit: cover;width:110px;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: 5px;  -moz-border-radius: 5px; border-radius: 5px; }

#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

#related-posts .related_img:active{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>

<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

5. Tekan CTRL+F dan cari kode <data:post.body/>

6. Copy-paste script dibawah ini dibawah kode <data:post.body/>

    (biasanya kode tersebut lebih dari 2, silahkan pilih kode yang terakhir atau coba satu per satu)

<!-- 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>

<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'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=6;

var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

7. Lihat di Pratinjau, kalau sudah sesuai dengan selera Simpan template

Tidak suka dengan Related Post versi Polosan? anda bisa mencoba ini :

Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 1

Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 3

Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 4

Cara Membuat Related Post Dengan dengan Gambar (Thumbnail) Keren di Blog - Versi 5