iklan

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.

Cara Membuat Related Post atau Artikel Terkait dengan Gambar Membuat Related Post atau Artikel Terkait dengan Gambar

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.

Cara Membuat Related Post atau Artikel Terkait dengan Gambar Membuat Related Post atau Artikel Terkait dengan Gambar

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

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

Cara Membuat Related Post atau Artikel Terkait dengan Gambar Membuat Related Post atau Artikel Terkait dengan Gambar

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.

Cara Membuat Related Post atau Artikel Terkait dengan Gambar Membuat Related Post atau Artikel Terkait dengan Gambar

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

0 Response to "Membuat Related Post Atau Artikel Terkait Dengan Gambar"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel