Cara Membuat Related Post Dengan Gambar

Cara membuat related post dengan gambar thumbnail atau foto di blog ini dibuat untuk mendukung SEO Onpage. Pemasangan related post atau artikel terkait pada blog dapat membantu Google dan mesin pencari lainnya mendeteksi posting yang saling berhubungan. 

 

Ketika mengunjungi suatu halaman artikel pembaca situs / blog juga dipermudah dalam mengetahui artikel yang saling berhubungan. Setelah pembaca membaca artikel, kemudian bila pembaca tertarik dengan foto atau gambar thumbnails dan judul artikel pada related post dibawah halaman, tentu pembaca akan mengungjungi artikel tesebut. 

Cara Membuat Related Post dengan Gambar

1. Copy + Paste kode di bawah ini diatas kode </head>

<!--Related Posts with thumbnails 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: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:2px solid #f2f2f2;width:285px;height:150px;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:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:285px}

#related-posts .related_img:hover{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 End-->

Catatan: 

• kode berwarna biru adalah ukuran lebar dan tinggi gambar/foto yang akan ditampilkan, bisa diubah sesuai selera.
• kode berwarna merah adalah lebar judul, samakan dengan lebar gambar/foto. 

2. Copy + Paste kode di bawah ini diatas kode <div class='post-footer'> (jika ada 2 kode ini, pilih kode yang ke-2):

<!-- 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=6&quot;' type='text/javascript'/></b:if></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><div class='clear'/>

</b:if>

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

Catatan: 

• kode berwarna biru adalah jumlah related post, bisa diubah sesuai selera.
  

3. Save Template. Selesai.

Demikian artikel dengan judul Cara Membuat Related Post Dengan Gambar.

Artikel Terkait

Cara Membuat Related Post Dengan Gambar

4/ 5

Oleh Anyar

Anyar 19:20 Komentar