Tweet
#related_posts h4 {background: none repeat scroll 0 0 #333;color: #FFF;font-family: Arial,Tahoma,Verdana;font-size: 11px;font-weight: bold;margin: 10px 0 0 0;padding: 6px 5px 6px 8px;text-shadow: 1px 1px #000000;text-transform: uppercase;}
#relpost_img_sum {/* height: 320px;overflow: auto; */margin: 0;padding: 4px;line-height: 16px;}
#relpost_img_sum:hover {background: none;}
#relpost_img_sum ul {list-style-type: none;margin: 0;padding: 0;}
#relpost_img_sum li {border: 1px solid #DDD;margin: 0;padding: 5px;height: 65px;list-style: none;}
#relpost_img_sum li:hover {background-color: #E6E6E6;}
#relpost_img_sum a {text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#relpost_img_sum .news-title {display: block;font-weight: bold !important;margin-bottom: 4px;}
#relpost_img_sum .news-text {display: block;text-align: justify;font-weight: normal;text-transform: none;color: #333;}
#relpost_img_sum img {float: left;margin-right: 14px;padding: 4px;border: solid 1px #DDD;width: 55px;height: 55px;}
</style>
<script src='https://dl.dropbox.com/s/4egbrqj6ddfp8f6/rel2.js' type='text/javascript'></script>
<h4>You might also like :</h4>
<script src='/feeds/posts/default/-/kesehatan?alt=json-in-script&callback=relpostimgcuplik&max-results=50' type='text/javascript'></script>
<a href='http://www.source-codes.co.in/2012/08/add-related-posts-widget-with-thumbnail.html' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
The related posts widget with thumbnails and summary are good to look at and would generate some pageviews if your reader gets interested by reading the summary.
The widget that I'm going to show looks like this .....
To show this widget on your blog , simply follow the easy steps :
1> Go to your blogger account.
2> Template --> Edit HTML
3> Expand widget templates
4> Using Ctrl + f, find </head> and paste the following code just above the </head>line.
<style>
5> Then using Ctrl+f , find your post-footer code.
<div id='post-footer'>
6> Paste the following code under line.
<b:if cond='data:blog.pageType == "item"'>
<div id='related_posts'>
</b:if>
7> Then save your template and view a blog post to see the effect.
