Making Related Post With Picture in Blog

0 Comment

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
Description: Making Related Post With Picture in Blog
Rating: 5
Reviewer: FarZ
Item Reviewed: Making Related Post With Picture in Blog


Title : Making Related Post With Picture in Blog.
Original URL : http://farzc.blogspot.com/2012/04/making-related-post-with-picture-in.html
Label :

You can share this article: Making Related Post With Picture in Blog but do not forget to put the source link of Making Related Post With Picture in Blog.


Enter your email address to get updates from this blog:


Share this article :

Post a Comment

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

 
Copyright © 2011. FarZ Collection - All Rights Reserved
Proudly powered by Blogger