follow ehpedia.com di facebook follow ehpedia.com di twitter follow ehpedia.com di google plus

Cara Membuat Related Post Dengan Gambar

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.

Cara Membuat Related Post Dengan Gambar

artikel terkait lainnya

0 komentar

Mari berkomentar dan berbagi info atau pengalaman Anda. Dan jangan SPAM!

Contact Form

Name

Email *

Message *