Adding Related Posts without thumbnail to Blogger
How to add related post without thumbnail in Blogger
1. Login to Blogger Dashboard >> Template >>Edit Template
2. Click anywhere inside your code area and press "Ctrl + F" to open the search box
3. Past this tags </head> inside the search box and hit Enter to find it.
4. Just above the </head> past the following code:
<b:if cond='data:blog.pageType == "item"'><style type='text/css'>
#related-posts {
margin: 10px 5px;
padding:5px 5px;
}
#related-posts h2 {
font-size: 18px;
color: black;
margin-bottom: 15px;
}
#related-posts a {
font-size: 14px;
color: #999;
text-transform: capitalize;
}
#related-posts a:hover {
text-decoration: underline;
color: #555;
}
#related-posts ul {
list-style-type: none;
margin: 0 0 0px 0;
padding: 5px;
}
#related-posts ul {
list-style-type: none;
background: #e9e9e9;
border-left: 6px solid #e2e2e2;
}
#related-posts li {
padding: 12px;
border-bottom: 2px dotted #E2E2E2;
}
#related-posts li:hover {
background: #F4F4F4;
font-weight:bold;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='https://cambohelpbloggers.googlecode.com/svn/trunk/related post snippet.js' type='text/javascript'/>
</b:if>
#related-posts {
margin: 10px 5px;
padding:5px 5px;
}
#related-posts h2 {
font-size: 18px;
color: black;
margin-bottom: 15px;
}
#related-posts a {
font-size: 14px;
color: #999;
text-transform: capitalize;
}
#related-posts a:hover {
text-decoration: underline;
color: #555;
}
#related-posts ul {
list-style-type: none;
margin: 0 0 0px 0;
padding: 5px;
}
#related-posts ul {
list-style-type: none;
background: #e9e9e9;
border-left: 6px solid #e2e2e2;
}
#related-posts li {
padding: 12px;
border-bottom: 2px dotted #E2E2E2;
}
#related-posts li:hover {
background: #F4F4F4;
font-weight:bold;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='https://cambohelpbloggers.googlecode.com/svn/trunk/related post snippet.js' type='text/javascript'/>
</b:if>
5. Now open the search box again and past this tags <div class='post-footer'> the press Enter to find:
6. Just above <div class='post-footer'> past the following code:
<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> <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=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script><a style="font-size: 10px; color: #bcbcbc; float: right;" href="http://cambohelpblogger.blogspot.com" rel="nofollow" >Get Related Post widget</a></div></b:if>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script><a style="font-size: 10px; color: #bcbcbc; float: right;" href="http://cambohelpblogger.blogspot.com" rel="nofollow" >Get Related Post widget</a></div></b:if>
Note:
- If you want to change the number of the snippet to show, jus edit the number in Red color.
7. Save Template
*Enjoyed it!
Adding Related Posts without thumbnail to Blogger
Reviewed by Unknown
on
3/05/2015 08:38:00 PM
Rating:
No comments: