How to Make Related Post Thumbnails

H

ow to Make Related Post with Thumbnails - Related Posts is one application that is dedicated by the users of the blog to provide the best service to visitors, but still not forget the artistic value, and value of beauty. In addition to beauty and artistic value generated by its creators, the users of bloggers who create applications using services on a blogger code of HTML and script code or other programming as well as CSS, etc., most preferred is the use value of the application itself, such applications "Related Posts" This example, which is an application yangdap [at showing some of the articles related to the article being read by the visitors, who had been grouped by common labels used in the article.

With the application of "Related Posts", the blogger can provide the best service to visitors, while providing a wonderful impression on his blog. As we know, that the convenience of visitors use and surfing on our blog is one powerful weapon to increase the visitors on our blog. Because of the convenience that we give visitors who have visited blogs that we have will be comfortable and will visit it again at the next opportunity. Especially if the article is an article that we suguhkan qualified and have a high selling price in the eyes of visitors or community bloggers. Thus, it will improve our SEO to a higher level, and will be better known by the general public. That is one function of the application "Related articles" or commonly known as the "Related Posts".

In this opportunity, I will explain and will share with you about "How to Make Thumbnails Posts Related to Securities", if you do not know how the form of "Post Effects Associated with Thumbnails" which I will explain, please see the following picture:

If you have not also understand the form, you can see on the footer on aritkel my posting this, more or less would appear that way.

Well, we just start to how to make it. Sebeum we make, we need to categorize articles or posts that we have made, in some of the label, after that, please follow the following ways:

1. First, go first to the Edit HTML page, do not forget to check the "Expand Widget Templates"

2. Find this code </head>

3. Then place the following code right above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Now looking back the code below (Use CTRL + F)

  <div class='post-footer-line post-footer-line-1'>

 If you do not find the code above, try searching the code like this

<p class='post-footer-line post-footer-line-1'>

If it has not been met as well, delete script above little by little, until they were discovered.

5. If you've met, live input all the code below under one of the above code that associates find.

<!-- 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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Do not forget to save and see the results

To show how many related posts can edit the code below:

var maxresults=5;

To change the title, we can edit this code:

var relatedpoststitle="Related Posts";

Okay, so how to make a "Related Posts" on your blog. Easy is not it? Terimaksih for your visit, may be useful.