Create Related Post With Thumbnails Widget for Blogger
/
2 Comments
This related post widget will display thumbnails and snippet text just below your post. The widget will display any related post with the same labels.
The related post widget will only take two main simple steps.
Go to your
1. Blogger dashboard > Templates > Edit HTML and Copy All Code Html
2. Open online html editor and paste Html Code Here
And replace with
Now find this line of code, remember to use Ctrl + f
Now place the code snippet immediately befor the above line
You can also display the related post on your home page, just remove the code in blue.
You should now have a working related post widget for your blog, you can also edit the look and feel by editing the cascading style sheet. If you have problems please comment below or contact me and I'll be glad to help. Good luck and have fun.
The related post widget will only take two main simple steps.
Go to your
1. Blogger dashboard > Templates > Edit HTML and Copy All Code Html
2. Open online html editor and paste Html Code Here
Find this tag, tip, use Ctrl f to search
And replace with
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QedmqNlhSZFI6OfMZJn-FRUkbVw56Qk3sbcq94fWl9lSHyrpTl19m_qnjxSD2yDgZp60V_V8xRlDMwcgz789aNCF9sPyWnrychOAO64Svavr-aOOTzJCYj_njG7BBqbo_V5KVRBfJra2/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
To change the default image replace the URL in green with your own. Also edit var maxresults=5; for the amount of related post you want. You can change the title text by editing this line.
Now place the code snippet immediately befor the above line
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.helpfulbloggertips.com/'><img alt='Helpful Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNm4ITldVJXwSKe34O6aAzxUuClr4IpJDhgq8tov6dLZO6xl6lmIS_ZdsI3kCPUjuSfsZGiIx6lEkOHVSPgVcAXYj7NMjftOcHF8JX-7lKEqRrH79xJb3LukDWIaXkKUWMO0R4WSOjLuJ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
To edit the number of related post to display just edit maxresults=6; to any number to fit your blogs theme.
You should now have a working related post widget for your blog, you can also edit the look and feel by editing the cascading style sheet. If you have problems please comment below or contact me and I'll be glad to help. Good luck and have fun.
Your Related post does not work for me.Can you help me?
ReplyDeletethank you, please find this code div class='post-footer' again. This code usually have two.:)
Delete