Related Posts Blogger Widget and LinkedWithIn for Blogger

Get Free SEO Tips

IMG_20160723_073944
Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me
The related post widget helps in the increase of your blog  readers’ engagement with your posts by adding Related Posts in the footer of your content.

We have many types of related post widget but today we will be trowing more attention to the LinkedWithIn related post widget

Below are some steps on Related Posts Blogger Widget and LinkedWithIn for Blogger

Step 1
First you need to sign in to blogger dashboard

Step 2
Now go to Template >> Edit HTML
Find

Step 3
Click on CTRL+F button on your key and search for the below code.

</head>

Step 4
Now Copy the below code above

</head>

<!–Related Posts with thumbnails Scripts Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’> /* remove this */<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;
}
</style>
<script type=’text/javascript’>
var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
var maxresults=5;
var splittercolor=”#DDDDDD”;
var relatedpoststitle=”Related Posts”;
</script><a href=”https://www.zealmat.com” style=”font-size:0pt”>Blogger Widgets</a>
<script src=’http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js’ type=’text/javascript’/>
</b:if> /* remove this */<!–Related Posts with thumbnails Script End–>

Step 5
Arrangement

◼ marked – remove red marked portion to add this Widget to Homepage

◼ – place the URL of the image in quotes to display if there is no image in the post.

◼  maxresults=5 – change the value to change the number of posts to be displayed.

◼Color=”#DDDDDD” – change the color of splitter line between posts.

◼relatedpoststitle=”Related Posts” – Change the Name of title.

Follow this step if you want to add the related post widget to Post Footer

Step 1
 Search for the below code

<div class=’post-footer’> and copy the below code above it

<b:if cond=’data:blog.pageType == &quot;item&quot;’><div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != &quot;true&quot;’>
</b:if>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style=’clear:both’/>
</b:if><b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’>
<a href=’https://www.zealmat.com’><img alt=’Blogger Widgets’ src=’http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png’/></a>
</b:if></b:if>

Step 2
◼ marked to add related posts to homepage too.

◼ marked to change the number of posts should be displayed.

If you have any problem performing this tutorial please feel free to drop it below thanks.

About Mathias Amodu 912 Articles
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

16 Comments

  1. Wow thanks for sharing this, of course related posts helps give life to old blog posts.

    I actually used this for my former blog template anyway… But have got a new one now.

Leave a Reply

Your email address will not be published.


*


[mc4wp_form id="3153"]