Add Related Posts Without Thumbnail For Blogger
Link within 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
Step two: Press Ctrl+f Then 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 this post? If you are not happy or facing any kind of difficulties please leave a comment and share with me i will guide you. 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. I will help you for sure!
Related Posts Without Thumbnail in Blogger |
Step one: Go to Template >> Edit HTML
Step two: Press Ctrl+f Then 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://www.netanimations.net/red-arrow-right.GIF") 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://qasimple.blogspot.com/2013/08/add-related-posts-without-thumbnail-for.html'>Related Posts for blogger</a></div></div>
</b:if>
Step four: Now click on Save Template and Enjoy!
Are you happy with this post? If you are not happy or facing any kind of difficulties please leave a comment and share with me i will guide you. 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. I will help you for sure!
4 comments:
Your comments always welcome