Making Related Post With Picture in Blog

After I tell you about Making Scroll in Blog Widget, Now i will show you how to make related post in yout Blog with Picture.
Interesting?
Just follow the steps.

First, Login into your blog then choose Design
Click Edit HTML

Then copy code below just before </head> code.
___________________________
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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/AVvXsEiN__fLXpi0A_ktFG_0YRWoobxbRkVMugFo4Rv_q1pDg2SMic_kVLS4iG191QR1aEEIvwMnkTFUY1yo9b5XMkhTTuIyNkdI0PqHbKq9dr0oSbEdqiZQE_yJIyjVS90kVOfqAsSM5jHL9Ns/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
___________________________

Change the red with number of post you want to view.
Change the blue with the title, It's up to you.

Then copy code below just before <data:post.body/> code
___________________________ 
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
___________________________

Then click save.

It will look like this.
Making Related Post With Picture in Blog

No comments:

Post a Comment

Please do not SPAM or commented by stating the link
If you cannot comment in English, use Indonesian :))