skip to main |
skip to sidebar
Now here is a wonderful hack for displaying related posts beneath each
of your blog posts, along with thumbnails. The related articles are
chosen from other posts in that same category/label/tag. With this hack
many of your readers will remain on your site for longer periods of time
when they see related posts of interest.
Steps adding the Related Posts Widget to Blogger/Blogspot
Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;
Step 2. Check the "Expand widgets template" box;
Step 3. Search (CTRL + F) for this piece of code:
</head>
Step 4. Copy and paste the below code just before/above </head>
<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdqVOcH73d8yIxBIO3aF8dvRAp9-UmL76jq16JGFKpo7ew4jjDxRGlWrJ9U2JI-ZSq7H4taO1RCSFfIftRCFN6ijjlOwIQ2WbXb0oirKGdHmGFuyVJgNOIzp_7wn2Z9YByGVKHmSJHqeA/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too
Step 5. Now find the following code:
<div class='post-footer'>
Step 6. And just above it, copy and paste the below code:
<!-- 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://helplogger.blogspot.com'><img alt='Blogger
Tricks'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitkGh3GayDYSRjKuVHRFibXulRAd0BjGQGexwGmkgOiRHaRgluFjXlnFg7qdDc_gsfOAAdGv10PbHH1zBsa5WOeTJI0dwvvC-9nXspUag4dAuV_59XeWkU1Ml4Iav1XsH3yZy9wGE8she/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Note:
- 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 violet.
Step 7. Save the Template
Enjoy :)
For any default Blogger layout, the "Showing posts with label" message
shows up above the posts whenever you click on a label link.
As it's a pretty useless and annoying message, many people like to have
it removed. If that is your wish, just follow the tutorial below:
Step 1.
If you are using the old Blogger interface:
- Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Now find (CTRL+F) this code in the template:
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Step 3. Delete the code from above and replace it with this one:
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Save the template. View your blog and click on some label....no more box.
If you want to hide labels from blogger post footer (or below post title), it is a very easy thing to do.
Sometimes labels can be unnecessary if you already have them in the blogger sidebar.
How we gonna do it?
Hide labels from Blogger
Step 1. Click 'Layout' tab and go to the 'Edit HTML' Subtab.
First of all, backup your current template to be assured that you
won't lose or delete something erroneously (to do that > click
download full template)
Step 2. Check 'Expand Widget Templates' option to expand the CSS code.
Step 3. Find the following code in your template.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if
cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Step 4. Delete this portion from your template.
Step 5. Save Template. And you're done ;)
Step 1.
If you are using the old Blogger interface:
- Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) this code in your template:
</body>
Step 3. Add the following code just above it:
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UMAv05OEeTkdnv31jsChWQHlZ2RJzKy64KfSQqkmESm2D-GTJhcZKf0jjiOHYLa-BMZBi3rA9moO4rWu3Trj2qPzJT0AffxVo-lRl8a9OvD4GQM2yr-1L8jJP0R3Ko6-4aHVUnY9Sus/s1600/default_avatar.gif')
.ssyby('blank')
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Ss3Wlx5UcgOzvniTo7uLyNncqMdFi6XbYfp1sXQ6zwqt41RzRYzzLgQCw3_8Wl5VDcAZl79-WXyWiWKf6HNK8Uv80bVIVXPYsWh7nmgpBGI_wwlLvk2byPEcgFB9-jJ_E2cIOhMCLxc/s1600/blogger-user.png')
.ssyby('blank')
</script>
Step 4. Save the Template
How to change avatar:
For Anonymous users: Replace the code in red with the url address of your image
For Blogger users: Replace the URL in blue with your own.
