Hi guys, good morning... How do you do? I hope today is great day for all of you. Today i will share about related post, it's not fresh for senior blogger but i think for newbie alike me very useful to give more information for visitors. This blog i dedicated to blogger newbie and my students want to create blog.

OK guys no more talk, just go action. Follow my step by step tutorial.
1. Log in to blogger.com and from dashboard choose "Layout" tab --> "Edit HTML" than checked the "Expand Widget Templates" check box, don't forget to backup your template first(to prevent if your installation failure you can restore it again)

2. Search tag below

</head>

Paste this code above tag :
Look the picture.1

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

3. Search tag below

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

If you can not find it then try finding this one

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

Still can not find it then try this one again, like my template not standard so i must search with another word and i found post-footer-line-3 with title line-3

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

Paste this code after code above

Look the picture .2

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

4.You can adjust the maximum number of related posts being displayed by editing this line in the code below. For example you want to display 7 title of related posts

var maxresults=7;

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

And finally the result like this

To change the colors and all you will have to modify the CSS
If you have troubles implementing this, just leave me a comment here and i will help you ASAP. If you like to give me any suggestions on how to improve this widget,then it would be really great.

Best regard,
Inspiration posting How to install related posts widgets with thumbnails view

Bookmark and Share

13 comments

  1. 丰富 // November 01, 2009 3:54 PM  

    Nice tutorials with easy steps :D

  2. Nez // November 01, 2009 8:29 PM  

    great tutor friend..keep up :)

  3. survivor mom // November 02, 2009 6:43 PM  

    nice tutorial. Actually i don't know how to create a blog. my daughter did it for me.

  4. psycha // November 02, 2009 6:43 PM  

    good. thanks for sharing

  5. med // November 02, 2009 6:48 PM  

    thanks for the visit in my site.
    nice tutorial. step by step. easy to understand by newbloggers. I should have to recommend your site to those friend of mine who wants to create a blog.

  6. masterGOmaster // November 05, 2009 9:11 AM  

    nice posting i like it.. someday I'll try.thank for sharing buddy !

  7. Cecak vs Buaya // November 05, 2009 6:04 PM  

    posting bermanfaat, trims kawan

  8. Janz_mephistopheles // November 06, 2009 3:36 PM  

    posting yang bagus kaka, sangat membantu...

  9. ame // November 08, 2009 9:45 PM  

    Great tricks ! I'm searching this one :)

    Hmm I have question.. How to make a posting like this? I've tried to make a post about how to put read more, but blogger filter all the code. It screwed up. Can you tell me how? Thank you

  10. Hitler Jr. // November 09, 2009 10:35 PM  

    Nice blog and nice tips. Thank you very much.
    -----Regards-------
    Coretan Jaiman Blog

  11. alf // November 21, 2009 2:17 AM  

    i'd like to install this in my blog if i get the time. thanks for the info.

  12. plasma tv // November 26, 2009 1:30 PM  

    useful tutorial, I'll try. I think this tips also useful for SEO. thanks my friend.

  13. Selva // November 30, 2009 10:19 PM  

    nice.. blog. visit and add your comment in http://myworld-encyclopedia.blogspot.com/

Let's Go Blogging