How To Add It On Blogger
1. Go To Blogger Dashboard >Template >Edit HTML.
* Please! download a copy of your template
2. Check the 'Expand widgets template' check box;
3. Now Search (CTRL + F) for this code: </head>
4. Paste the below code just above: </head>
Note:
- to change the default picture, replace the URL in pink with your own<!--RELATED POSTS WITH THUMBNAILS SCRIPTS AND STYLES START-->
<!-- REMOVE --><B:IF COND='DATA:BLOG.PAGETYPE == "ITEM"'>
<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="HTTP://3.BP.BLOGSPOT.COM/-PPJFSSTYSZ0/
UF91FE7RXFI/AAAAAAAACL8/092MMUHSFQ0/S1600/NO_IMAGE.JPG
";
VAR MAXRESULTS=5;
VAR SPLITTERCOLOR="#DDDDDD";
VAR RELATEDPOSTSTITLE="RELATED POSTS";
</SCRIPT>
<SCRIPT SRC='HTTPS://DOCS.GOOGLE.COM/FILE/D/
0B7Q3JXFQN9Y2SLNOWS1BMUTRUGM/EDIT' TYPE='TEXT/JAVASCRIPT'/>
<!-- REMOVE --></B:IF>
<!--RELATED POSTS WITH THUMBNAILS SCRIPTS AND STYLES END-->
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in blue if you want the related posts to be displayed in homepage too
5. Now Search the following code:
<div class='post-footer'>
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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://bloggers-hero.blogspot.com/'><img alt='Blogger Tips and Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPjTyOBWLdmvOi91Dh85fe3kIorQJGyXhQmFD6JanDPpU3Ezw0Aai3OOFiHoWT-BS8cnaUg35XzbptSUdCXUKbt1y0DUVgoV3E5-l8AhI1kSAZ1C0vrdwpQg6uT5-b1atlyUPToSpejnzo/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in blue.
7. Save the template.That's it :)
