Cara Membuat Related Post Dengan Gambar

Cara Membuat Related Post Dengan Gambar

 

 

Cara Membuat Related Post Dengan Gambar Dengan Mudah– Perlu anda ketahui beberapa faktor penunjang untuk mendukung sebuah blog supaya masuk dalam kategori SEO Onpage selain memperhatikan struktur pembuatan yang baik, thumbnail image atau foto di blog tidak kalah pentingnya. Karena Goole dan mesin pencari dapat mudah mendeteksi sebuah postingan yang saling berketerkaitan.

 
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, selamat mencoba 
Tags:

Leave a Reply