Cara Membuat Related Post Ringan Di Blog

membuat related post atau artikle terkait  bergambar, related post ini ada bermacam macam dengan menggunakan style yang berbeda-beda salah satunya adalah related post yang bergambar sehingga tampilan related post ini akan mendukung blog sobat menjadi lebih cantik.

Berikut sekilas gambar Related Post yang saya akan posting :


Berikut langkah langkah Cara Membuat Related Post Ringan Di Blog :

1 . seperti biasa , masuk blogger dulu

2 . pilih blog

3 . pilih menu Template lalu Edit HTML
 .


4 . Cari kode </head> dan copy script dibawah ini dan taruh tepat diatas </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:100px;height:80px;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:100px;}

#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-->

5 . cari kode div class='post-footer-line post-footer-line-1'> setelah itu copy dan pastekan kode di bawah ini di bawah kode <p class='post-footer-line post-footer-line-1'>

<!-- 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=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; 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-->

6 . terakhir , simpan template

Sekian Tutorial Dari Saya
Tentang Cara Membuat Related Post Ringan Di Blog
Jika ada kekurangan  berkaitan dengan artikel Tolong komnetar dibawah dan akan dibahas secepatnya
Please Like , Follow Blog Ini

Salam Gilang