Now I adjust this tutorial how to add related post widget with thumbnail on BlogSpot blog. Related post shown to same labels or categories. Increase your visitors you can adjust this widget on your blog. This is very simply tutorial.
Stylish Related Posts Widget with Thumbnail for Blogger Blog:
- Firstly Login to your Blogger Dashboard click here
- Select your blog and click
on right side bar
- Select Template on drop down menu
Add CSS For Related Posts widget to Blogspot blog:
Now create a backup of your blogger templates. Because if you have any error after updating your blog. You can restore it. So click on Backup / Restore button and download Full Template.- Click on "Edit HTML" button
- Click anywhere inside the
code area and press the CTRL + F keys on your keyboard to open the code search
box.Type </head> inside the search box then hit Enter on keyboard to find it:
- Now past the below CSS code
before </head> code
CSS code- Related Posts or you may like also blogger widget:
<!--Related
Posts with thumbnails by help2blogging.blogspot.com 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;
}
#related-posts-text
{
font-size:
0.9em !important;
font-weight:
700 !important;
line-height:
1.45em !important;
font-family:
Helvetica,Arial,sans-serif !important;
width:
100px;
padding-left:
3px;
height:
105px;
border: 0pt
none;
margin: 3px
0pt 0pt;
}
#related-posts
h2{
font-family:verdana
!important;
font-size:18px
!important;
font-weight:bold;
margin:9px
0px !important;
color:#666
!important;
border-bottom:0px
!important;
border-top:0px
!important;
}
#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/AVvXsEjdHgsn7z4B-2KGyyxdNRSzBhfhTlyQBmN2k6rCYsdVQAeRN5T8UxIv42XzMCy_X5Qfb9CWw0zMFHIcYxRI1wrjmYw0Ehg6bXcVyxKbkJaZcn5NDD_WJmdXu9oADRbXabflNcMnUuge-EM/s1600/no_image.jpg";
var
maxresults=5;
var
splittercolor="#DDDDDD";
var
relatedpoststitle="You Might Also Like:";
</script>
<script src='https://googledrive.com/host/0B-dv4rsl5_uZXzg0Z1FOVWhLSFk'
type='text/javascript'/>
</b:if>
<!--Related
Posts with thumbnails by help2blogging.blogspot.com End-->
Tips: Here show the number
of post 5.
But you can change this number that you want to show related post results your
blog.
Add HTML for Related Posts with image thumbnail:
- Now find again all <div class='post-footer'> in code area
- Copy the bellow code and paste it before all <div class='post-footer'> tag.
<!--Related
Posts with thumbnails by help2blogging.blogspot.com Start-->
<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'/>
</b:if>
<b:if
cond='data:blog.url == data:blog.homepageUrl'><b:if
cond='data:post.isFirstPost'>
</b:if></b:if>
<!--Related
Posts with thumbnails by help2blogging.blogspot.com End-->
- Save your template
That’s all!
—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜------------------------------------------------------------
—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜—˜------------------------------------------------------------
If you have any
question and suggestions related blogger
Thanks to
follow this tutorial
Best regards
help2blogging team
Comments
Post a Comment