Digital World Faisalabad: Related Post Widget

Add Related Post Widget with thumbnails and short summary in your blogger

Most you have seen in website that every post have some related posts at the end of the page. This is the best trick to show your content to the user.

Here we will tell you how to add related post with Small thumbnail or picture/icon as well as short summary of the post.

These related posts have been created from the labels that you have created for the posts. System pick.

Now let take an eye on the method about How can we add this related post scripts and codes in our page to show them.

Here I will tell you to add the Related post that you can see in above picture. lets follow me step by step.

There are three things to add in your blog

Java Codes
CSS Codes and
HTML Codec

1. Add Java Codes

Login to your blogger account
Go to Template
Click on Edit HTML

Press Ctrl + F and find <head> tag
Copy the Following Java code just above the <Head> tag

//<![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/AVvXsEgrpEm3oR03btkArV5Ra7k1i_24cSYKRvXcvGjV96_KmBI4nI63-oweTy9cpK6eiS-I95BwxyzyNaZD_aAhSNefnvmuahbJjgNqzSgVx7Ng5qpeq-A8c9QXCv44Uvm_myQt1XhjgtHLo-wX/s1600/no_image.jpg"; // default picture for entries with no image

//]]>

</script>

To change the number of related post, change the number 4 in above code to your required number of posts

If you want o change the number of characters in your summary of the related post, change 75 number in above code to your required number.

If you want o change the default picture for NO IMAGE for your post, change the url in above post (red link) to your desired link.

2. Add CSS Codes

Now the second step is to add the CSS code to give style to your widget. Just copy and paste the follow code just below the Java Code that you have added.

<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
width: 125px; /* Width of related posts are. */
height: 205px; /* Height of related posts are. */
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: #F0F0F0F; /* Link Colour of related posts. */
display: inline;
font-size: 10px;
line-height: 1;
}

.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px; /* Height of thumbnail. */
padding: 5px;
width: 82px; /* Width of thumbnail. */
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: #123456; /* Colour of short summary. */
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; /* height of related posts container */
padding: 5px;
width: 100%; /* width of related posts container */
}

.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>

In above CSS code you can change RED labels value to give style according to your website/blogger theme color combination and your requirements.

3. Add HTML Code

Now the final and last step is to add HTML code in blogger.

First of all find the following code

After you find it, copy the following code and paste it just below it

<b:if cond='data:blog.pageType == "item"'>

</b:if>

Now the whole of the section will look like this.

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:blog.pageType == "item"'>

</b:if>

</b:loop>

At the end Find the following code.

</b:includable>

<b:includable id='postQuickEdit' var='post'>

Copy the following code and add it just above </b:includable> tag

<b:if cond='data:blog.pageType == "item"'>

<div class='relatedpoststitle'>RELATED POSTS</div>

</div>

</div>

</b:if>

Click Save Changes to save all these changes. and refresh the page. Yes its done, Will see the related post widget at the end of every post in your blogger.

DW Faisalabad New Version

Thursday 19 January 2017

Related Post Widget