How to Make Related Article (Related Post) With Pictures / thumbnails

How to Make Related Article (Related Post) With Pictures / thumbnails

Hello buddy Tips, this time will be about How to Create Share Related articles (Related Post) With Pictures / thumbnails, which first had been shared also about the related article or post auto related post below. 

This article features images associated with medium size and the title of the post is located right below the image. The survey also proved that making articles linked / related post that comes with this image will be more widely seen and clicked by visitors / readers of the article, because it looks cool and makes visitors curious and fascinated

Application of CSS & JavaScript Articles Related Picture 

    Sign In / Login to www.blogger.com

     On the Dashboard select Templates → Edit HTML → Click the EDIT box and press CTRL + F and find the code]]> </ b: skin>

     Copas then the following code above the code]]> </ b: skin>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP8yUVD7XJNu4hjXtyXRiP8orQpQtNPnrq4ztorN_eRExlJhT0k7tAlwNpnyy5SKRvqNXgz-5-dM-zdCqvbt93Rge1R_WDmd9UxsMFk-JoKo08Sz93F9BgW8dy_kBvWNX_U_tQb5Uqo2w/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

HTML Code Implementation Related Articles Picture

This stage is the final stage in the tutorial create articles associated with the image / thumbnail will bring up the articles related to the amount prescribed or in accordance with the user, how

     Please find the code you <data:post.body/>

     Then put the following code after the code <data:post:body/>

<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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>

    Save Template (Save Template)

Related information Picture Codes Related Articles

1. Articles related to this image works automatically so you do not need to change or add the address of an existing feeds.

2. Articles related to this image work on post pages and the code above does not apply in the main page / Home Page.

3. To change the look of articles associated with the image, you can change the CSS as you wish if you know to edit it

4. var maxresults=5; Number of related articles that appear on each article / post.

5. var relatedpoststitle="Related Posts"; Related article title and appearing under posts.