If you want to keep your visitor on your blog then this widget is really a good idea.
Although I already teach you how can you add it to your blogger with LinkWithin. You can read it from below.
But this time we will not use any third party service to do this.
We will just edit our HTML Code. It is far better from using LinkWithin. Now lets see how can you add this on your blog.
Adding You May Also Like Widget To Your Blog
- Go to your blog
- Select template and then edit html
- Search the following code
</head>
- Add the following code just above/before </head>
<!--Related Posts with thumbnails Scripts and Styles Start by All Tech Story-->
<!-- remove --><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 h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWQI9RwC9xngoRWUyZayJaYoA2SJ4ic1VRlYlN3JaZEbbMDslydg4q0qn32blFeYTcg2hjD-fSNNoxT3e7OA2thWxB60npM6FDxD4h9Aa1h-eLwM_GYjKO4FYYb1G1MAUAurLKVQltwQ/s1600/Copy+of+Logo.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="You May Also Like:";
</script>
<script src='http://astuffz.5gbfree.com/relatedpost.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles by All Tech StoryEnd-->
- Now search for the following code
<div class='post-footer-line post-footer-line-1'>
- Add the following just after the code
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<br/>
<a href="http://alltechstory.blogspot.com/2013/03/you-might-also-like-widget-under-every.html" target="_blank"><b>Grab This Widget</b></a>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
- Save your template
Customizing the widget
Look on the orange text in the first code
- You can change the default image URL with your own
- You can change the max number of results by changing the variable max results
- You can change the color
- You can change the title by changing You May Also Like
If you want to change more you will have to modify the CSS in the code.
Things To Remember
- Don't forget to take a backup of your current template.
- Don't forget to share if you liked the post.
Share if you liked this Post using your favorite sharing service:
Subscribe Updates, Its FREE!
