Skip to main content

Simple Related Post Widget for Blogger Without Thumbnail

The most important part of a blog is it's designing, it increases the chances of getting more exposure because we humans always attracted to objects with good appearance. While designing, some of us like to include more pictures in our blog and others like to keep it simple.

Blogger default templates don't have related post widget. I don't know why they avoid it because it has many advantages.  Most of the blog has related post widget, do you know why they kept it?

Internal linking has a major role in SEO, a proper internal linking can improve the total page views and can help to achieve higher search engine ranking.

When a person enters to read a particular article, he could see related articles to that post. So by using related post below the post we can create multiple page views from a single visitor.

Simple related posts widgets for blogger

In my previous post I have explained how to put related posts widget with thumbnails, so in today's tutorial, I will help you to add a simple related post widget for blogger without thumbnail.

Warning: During editing the template, errors may occur in order to avoid this please backup the current template

Add simple related post widget for blogger

Step 1: from dashboard navigate to Template > Edit HTML then click anywhere inside the box and press Ctrl + F to find </head>

Step 2: paste the below code above </head>
<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 350px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkIYOspOsmO6zzkarFcsJO53SMLQhg6k27W-AI7iANyLYljmQ8EmDBqRcoZD2hXZ30ZK5Bjx1lgiRi_0gzguFWSUSnC_Zkx2ojkpR6-6qna3rsFzDNY-CL8H3wMEdtdEaepFcgd4n3EU/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->
Step 3: Now to put related posts below the post find the line of code.
<b:includable id='postQuickEdit' var='post'>
Step 4: once you find it, click the just above arrow at the left side and paste the below HTML code above </b:includable> tag. See the screenshot for complete info.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='5'><b>You May Also Like: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Insert HTML code to blogger

Step 5: Save the template, that's it you are done!

Customizing related posts widget

  • To change the heading change 'You May Also Like'
  • Change the 5 in 'Arial' size='5' to get required size of heading
Now visit your blog from a computer to see simple related post widget without thumbnail below every blog post. The widget is based on 'labels', so try to labels correctly before publishing the post. Hope the information helped you, please subscribe us to get latest tips. Happy blogging!
Labels:

Comments

  1. Eka Awaludin15 September 2017 at 19:47

    It's working on my blog. Thank you.

    ReplyDelete
  2. ELFarahin12 November 2017 at 10:27

    it's working but i need for general posts. meaning for posts both without and with label. help me? thank you =)

    ReplyDelete
  3. A14 December 2017 at 20:38

    thank you...its really nice...how can I limit the no of posts to be shown.

    ReplyDelete
  4. Hajji_Habeeb Official27 January 2018 at 07:12

    Wow it really works. Thanks

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Make Money On Blogger Without Adsense

Some people takes blogging as a hobby and some takes as their passion, you can make your passion into money if you take some effort. Blogging is a best source of online money, we all know Adsense is one of the best way to make money from a blog. Here am going to tell you about how to make money on blogger without Adsense. There are hundreds or thousands of blogs are giving ideas about how to make money with blogger. Some of them are giving a wrong details, this given a bad name to make money from blogger.  Can you Really Make money with Blogging? The answer is yes, you can create a decent amount of money from blogger. If you're passionate about a subject and you have decent writing skills, blogging definitely could be an alternative career path for you. 1. Join Pay per click advertising Program.                                       ...
Post a Comment
Read more

How To Create A Blog For Free And Make Money With Blogspot

Creating a blog on blogspot  is not a difficult task, it is easy and free. If you like to share your thoughts and ideas to your surroundings, a blog is the best way. If you are serious about it even you can earn a decent money from it. So here I will teach you about  how to create a blog for free and make money with blogspot . There are many newbies afraid to create self hosted blogs, those don't have a good knowledge about blogging world Google Blogger is one of the best way to start because it is free and easy. The good news is that it doesn't need any skills to  create a blog for free. As I mentioned above, we can create blog easily but getting a good traffic is the difficult part. Traffic is a reward for our hard work, to drive a huge traffic to your blog read my  30 Amazing tactics to get more traffic on blogger. The main purpose of this article is to help the beginners to enter the blogging world. So,  what is blogspot?  Acco...
Post a Comment
Read more

How To Add Stylish Related Posts Widget for Blogger With Thumbnails

Related posts with thumbnail is an important widget for a blog, it has an ability to keep the readers in your blog. There is no widgets are available for related posts from blogger, so we have to do it by little html coding. Don't worry! Here I'm going to give you a complete step by step guide with picture to add a stylish related post widget for blogger with thumbnail. When we talks about SEO, internal linking contribute a large role in increasing the page views. If a reader enters into your blog they automatically see the 'related posts' widget, this may attract your visitor to click on the next post which will increase your overall pageviews. There are lots of  third-party  related posts are available for blogger but they may affects your blog badly because they increase the loading time which cause negative impact on seo of your blog. Step by step guide  to add stylish related post widget for blogger with thumbnail. Step1 : From Blogger Dashbo...
3 comments
Read more