I would like to begin this post by acknowledging the efforts of whoever came up with this code.
At the bottom of each post, I wanted to create a list of related posts, but my template did not have this tool implemented. As they say Google knows everything and here is what I came after some Google search.
This code finds the related posts based on the label you have assigned to the posts.
1. Login to your blogger and select Template from the dropdown on the right side.
3. Click on Edit HTML button right under your blogger template. This will open your code window.
4. Toggle on option to Expand Widget Templates
5. Search for the following code (Hit Ctrl + F on your keyboard)
</head>
6. Now copy and paste the following code right above this line. The following code will define how the links will appear (eg, font, color, mouse hover action, before and after margins etc)
<!--Related Posts Scripts and Styles Start--> <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; margin-top: 20px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } <!-- Formating "Related Posts" title --> #related-posts .widget h2, #related-posts h2{ font-size: 17px; font-weight: normal; color: black; font-family: Arial Narrow; margin-bottom: 0.75em; padding-top: 0.25em; } #related-posts a{ font-size:16px; color: #555555; font-variant:small-caps; } <!-- Defining Mouse Hover Options --> #related-posts a:hover{ text-decoration: none; color: #ffffff; font-weight: bold; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; margin-bottom: 80px; padding:0px; text-decoration:none; text-color:#000000 } #related-posts ul li{ list-style-type: none; border-left: 2px solid #1399CF; border-bottom: 1px dotted #1399CF; margin-bottom: 3px; padding-left: 30px; padding-top:08px; } #related-posts ul li:hover{ background-color: #1399CF; border-left: 2px solid #B3CA3D; border-bottom: 1px dotted #B3CA3D; } </style> <script type='text/javascript'> var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
7. Now you will need to define the location where you want this list to appear. We will insert the list in the footer section of each blog post. This is generally right above your comments section. To define this location fidn the following code:
<div class='post-footer'>
8. Copy and paste the following code right above this line. (If you cannot find the code in your template then look for <div class='post-footer'> and paste 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>
</div>
</b:if>
9. Save your Template.
Customization
- To change the font size, color, bold etc of "Related Posts" title then, under the section "Formating Related Posts title" section in the code, change 17px or black to your desired value.
This Page has a list of different color codes that you can use in replacing the colors
After these changes Save your Template!
Cheers!!
0 comments:
Post a Comment