How to create “Related Posts” in Blogspot ?

In previous articles, I introduce to you about creating messages related (Related) widget is made by hoctro. However, to have more choices, I tried to search and apply different ways and notice how I introduced the following relatively simple, easy to perform.
There is also an advantage not to affect the speed of access to visitors.
I guide you step by two very simple for you to create your own blog Related Post / Archives.

Step 1: Copy and paste the code below into the top of the tag </ head>.

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(“http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif”) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src=’http://trongdai.net/RelatedPosts.js’ type=’text/javascript’/>

Save template and then…

Step 2: Search <p> <data:post.body/> tag </ p> in the template. Before getting to make sure that you have selected click “Expand Widget Template” in “Edit HTML“.
Copy and paste the code below into the <p><data:post.body/></ p>.

You have done, Now Save and view their results performed.

• Tweet This
• Share on Facebook
• Digg This
• Bookmark
• Stumble
• RSS Feed