Now here's a great trick to display related posts under each of your blog posts with thumbnails. Related items are selected from other items in the same category / label / tag . With this hack many of your readers stay on your site for longer periods of time when they see related announcements.
related post , related posts blogger blogger widgets
Steps adding Related Posts Widget for 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:
Step 4 . Copy and paste the following code just before / above
<- ! Related Posts with thumbnails Scripts and Styles Start ->
<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;
}
<script type='text/javascript'>
var defaultnoimage="https://lh3.googleusercontent.com/-RgPTtXCyuiI/UqXT0G3N6hI/AAAAAAAAASg/OY4ufsJTj7w/w245-h190-no/How+To+Add+Related+Posts+Widget+To+Blogger+or+Website+With+Thumbnails.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
Note:
- Change value of 6 max- results = 6 with the number of messages you want to view.
- If you want the messages to be displayed on the home page also remove the code in purple.
Step 7. Save the template
Enjoy :)
Don't Forget Comment Here.
No Comment