How to Create Related Posts Widget with Thumbnails and Summary for Blogger

Its been a while sharing tutorials on blog customization, monetization, beautification and also optimization. We have been having series of tutorials on Twitter for Business for some time now:

N/B: If you missed the tutorials please click link below to read them. Don’t forget to subscribe to our newsletter, it’s a sure way to catch up with the trends.

Tutorial Highlights:

Related Posts Widgets with Thumbnails & Summary
How to Add CSS for the Widget in Blogger Template
How to Add the Fragment
Saving changes on Template

You are going to learn how to implement a Related Posts widget that comes along with Thumbnails and Posts Snippets, as well. Its gonna be a long tutorial; tighten up your seatbelt, buckle up and lets mean business here. Make sure you follow the steps below meticulously:

N/B: Please when copying the codes below, don’t copy and paste directly from our website, first copy the code from our site, paste it in a HTLM Editor, like Notepad or Notepad++, then copy it from there and paste into your template.

Step 1: From your Blogger Dashboard, go to Template and click on Edit HTML

Step 2: Tick the "Expand Widget Templates" checkbox:

Step 3. Find

tag using keyboard shortcut (CTRL + F).

Paste the following code just above the

tag.

N/B:

To change the number of posts that are being displayed, modify the value in red (4)
To change the number of characters to be shown in posts summary, modify the value in green (75)
To change the default pic for posts with no images, add your Image URL to replace the one marked in blue.

Step 4: With your keyboard. press (CTRL + F) to search for the following fragment:

Copy code below and search in your template.

... and add this code just below it:

Step 6: Now, we are going to add some styling to it using the following CSS code snipets.

1. Search for this tag:

]]>

2. Paste the below code just ABOVE it:

.relatedsumposts {
float: left;
margin: 0px 5px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 210px;}

.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.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);
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 5em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}

.relatedsumposts p {
/* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}

N/B:

Modify the values in yellow to adjust the width (120) and height (210) of the widget area
Replace #linkcolor with the hex value of your color to change the color of post titles
To change the size of thumbnails, modify the values marked in violet (82)
To determine the border roundness, modify the values in red (100)
To change the color of the post snippet, change #summarycolor with color hex value