2009-04-20

Image

Add Related Posts To Your Blogger Post

Now here is wonderful hack for displaying links to related postsbeneath each of your blog posts. The related articles are chosen fromother posts in that same category / label. With this hack many of yourreaders will remain on your site for longer periods of time when theysee related posts of interest.

How to install

1. Go to Layout --> Edit HTML in your Blogger Dashboard.

2. Back up your existing Template before making any changes!

3. Make sure to check the "Expand Widget Templates" box.

4. Search for the
</head>
tag.

5. Add the following code just before the
</head>
tag.


<style>
#related-posts {
margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;
}
#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://h1.ripway.com/amrmrx/Related_posts_hack.js' type='text/javascript'/>

6. Now search for
<p><data:post.body/></p>


7. Add the following code just beneath the code you just searched for.


8. Now Save your Template and you're done!

التعليقات:

Total Pageviews