Linkwithin widget to show related posts below every blogger posts is quite popular and useful. But however, there are not every posts that has at least one image in it. Thus, showing related posts with thumbnails may not be chosen by most blogger who in fact may choose to show related posts without thumbnails below blogger posts. If you are interested to show your visitors your blogs related posts without any thumbnail, then lets just do it.
Step one: Go to Template >> Edit HTML. [In old blogger Go to Design >> Edit HTML] And then click on Expand Widget Template.
Step two: Find </head> and just above it paste the code below.
Step three: Now again, find <data:post.body/> and just below it, paste the following code.
Step four: Now click on Save Template and Enjoy!
Are you happy with Linkwithin related post widget? However, you are welcome to modify this style to a new look. Also, I haven't figured out yet about how to show related posts' with little snippet as it can be shown in wordpress blogs. I will soon feature related posts with snippet in blogger. So Stay tuned and good luck!
Disclaimer: There are many different styles in different blogs' template. So having difficulties to fit this widget in your blog perfectly. But if you are facing any kind of problems, then please leave a comment below.
 |
| Related Posts Without Thumbnail in Blogger |
Step one: Go to Template >> Edit HTML. [In old blogger Go to Design >> Edit HTML] And then click on Expand Widget Template.
Step two: Find </head> and just above it paste the code below.
<style>
#related-postz { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 25px; font-weight: bold; font: 18px Arial,sans-serif; margin-bottom: 10px; }
#related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-postz .widget h2, #related-posts h2 {
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em; }
#related-postz a { text-decoration : none; }
#related-postz a:hover { text-decoration : underline; }
#related-postz ul { border : medium none; margin : 10px; padding : 0; }
#related-postz ul li {
display : block;
background : url("http://smallbusiness.chron.com/favicon.ico") no-repeat 0 0;
padding-left : 21px;
padding-bottom : 1px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
} </style>
<script src='http://blogfilez.googlecode.com/files/related.js' type='text/javascript'/>
Step three: Now again, find <data:post.body/> and just below it, paste the following code.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-postz'>
<font face='Verdana' size='4'><b>Related Posts:</b></font>
<b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
<div align='right' style='font-size:11px'><a href='http://s-tofus.blogspot.com/2012/01/show-related-posts-without-thumbnail.html'>Related Posts for blogger</a></div></div>
</b:if>
Step four: Now click on Save Template and Enjoy!
Are you happy with Linkwithin related post widget? However, you are welcome to modify this style to a new look. Also, I haven't figured out yet about how to show related posts' with little snippet as it can be shown in wordpress blogs. I will soon feature related posts with snippet in blogger. So Stay tuned and good luck!
Disclaimer: There are many different styles in different blogs' template. So having difficulties to fit this widget in your blog perfectly. But if you are facing any kind of problems, then please leave a comment below.