Membuat Related Post Atau Artikel Terkait Dengan Gambar

Cara Membuat Related Post atau Artikel Terkait dengan Gambar - Sebelumnya kita telah mencar ilmu bagaimana cara menciptakan related post atau artikel terkait sederhana. Dalam artian, tampilannya benar-benar sederhana, hanya berupa link menuju artikel-artikel dalam satu label dengan artikel yang sedang dibaca.

Nah, kali ini blog akan membuatkan tutorial bagaimana cara menciptakan artikel terkait yang dilengkapi dengan gambar thumbnail masing-masing artikel terkait. Bahkan bukan hanya dilengkapi dengan gambar thumbnail saja, namun juga ringkasan postingan.

Artikel terkait yang dilengkapi dengan gambar visual menciptakan pengunjung lebih tertarik untuk melaksanakan klik. Dengan begitu, page view blog Anda pun meningkat.

Untuk misalnya sendiri sanggup dilihat pada blog ini, letaknya sempurna di bawah postingan.

Cara Membuat Artikel Terkait dengan Gambar

1. Pada Dashboard Blogger Anda, masuk ke Template, pilih Edit HTML.

2. Pasang CSS untuk mengatur tampilan related post dengan gambar.

Letakkan sebelum instruksi ]]></b:skin> yang sanggup dicari dengan Ctrl+F.

Agar lebih maksimal, CSS-nya sanggup diletakkan pada bab posting.

CSS

#related_posts{margin-top:15px}
#related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:80%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;}
#related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}

3. Berikutnya memasang script yang akan memanggil related post dengan gambar.

Cari instruksi <data:post.body/> di dalam template. Saya menemukan 2 buah instruksi di template saya. Letakkan script di bawah instruksi yang pertama.

Patokan lain yaitu instruksi <div class='post-footer'> yang kurang lebih mempunyai arti bab bawah postingan. Letakkan sebelum instruksi tersebut.

Script

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost_gambar.js' style='text/j4vascript'/>
<div style='clear:both;'/>
<div id='related_posts'>
<h4>Artikel Terkait :</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/j4vascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/j4vascript'>relatpost();</script>
</ul>
</div>
</b:if>
<!-- Related Post Widget End -->

Silahkan ubah goresan pena berwarna merah. Beberapa yang sering dipakai antara lain Related Post, Artikel Terkait, You Might Also Like, Artikel yang Berhubungan, dan masih banyak lagi.

4. Save Template.

Sekian tutorial Cara Membuat Related Post atau Artikel Terkait dengan Gambar. Jika gagal silahkan sampaikan keluhan Anda di kotak komentar di bawah. Saya akan coba membantu untuk menemukan solusinya.
Sumber http://duarupa.blogspot.com