In this tutorial we are going to explain how to add unique attractive Related Posts Widget with Thumbnails and Post Snippets below post footer.Let's see now hot to add related posts widget with thumbnails and summary in blogger template.
how to add related post widget with thumbnails and Post snippets in blogger
installation steps
1. First,Login to your account and go to template and now click on edit html.2. Now,Search for the following code
</head>3.Now paste the following code just above it.
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKT7uI6ei2nkslNQO8dac08_PKeheUBBqyf0miDTe8zkV6Upt9PWQCERIgRlkQaFyRMgEgP3G_10Lb23l7t_sDkllBZx3CvNxKvSwgBU655cwosvMYqlzbD1UkpR7Js8T0BPv2yC3USXzy/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="https://googledrive.com/host/0B58fhAmOxE7EZEs4dFJrSVRtYTg" />
customization
- To change the number of posts to be display in related post replace 4.
- To change the number of posts summary characters,replace 75.
- To change the default image for posts with no pic,replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKT7uI6ei2nkslNQO8dac08_PKeheUBBqyf0miDTe8zkV6Upt9PWQCERIgRlkQaFyRMgEgP3G_10Lb23l7t_sDkllBZx3CvNxKvSwgBU655cwosvMYqlzbD1UkpR7Js8T0BPv2yC3USXzy/s1600/no_image.jpg with your image url.
Adding light color Style to Related posts gadget for blogger
4.Find </head> and paste the following code just above it.<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 200px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.relatedsumposts:hover {
background-color: #F7F7F7;
}
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
Customization
- Modify the values to change the width (120) and height (210).
- To change the color of post titles Replace #linkcolor with the hex value of your color.
- To change the size of thumbnails, modify the values (82)
- To Change the size of the border roundness, modify the values (100)
- To change the color of the post snippet, change #summarycolor.
- If you add more than 5 related posts, change the height of 200px to 400px
- Adding the dark color style related posts widget in blogger
If you have already installed the installation steps,you just need to add the following code for dark background related post widget,add the code just above</head>.
<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 200px;
border-right: 1px solid #0A0A0A;
display: inline-block;
}
.relatedsumposts:hover {
background-color: #0A0A0A;
}
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #000;
background:#282828;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #0A0A0A;
border-bottom: 1px solid #0A0A0A;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #121212;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #ccc;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
5. Now,Search for the following code
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>6. Add this following code just below it.
<b:if cond='data:blog.pageType == "item"'>7. Now Find this code,
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
</b:includable>8. Now Just Above </b:includable> add the following code.
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:blog.pageType == "item"'>9. Now Save your template..Done !!
<div class='post-footer-line post-footer-line-4'>
<div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>
If you see "undefined" message make sure that you have added appropriate label.Atleast one label should be added to see the related posts widget with thumbnails and posts snippet in blogger