Related Posts Blogger Widget and LinkedWithIn for Blogger

IMG
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=”http://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=’http://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 887 Articles
My Name is 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. Prosper Noah July 23, 2016
  2. Abdulmalik Amodu July 23, 2016
  3. val okoye July 23, 2016
  4. Abubakr Abdulfatai A. July 23, 2016
  5. Okikiola Bello July 23, 2016
  6. Balogun Mahmuod July 23, 2016
  7. David Akinwale July 23, 2016
  8. Casi Henry July 23, 2016
  9. adenekan abiodun July 23, 2016
  10. PRINCE ODAFE July 23, 2016
  11. PRINCE ODAFE July 23, 2016
  12. Saminu Abass Ola July 23, 2016
  13. chukwuebuka ogbuchi July 23, 2016
  14. Tarrmie de Man July 24, 2016

Leave a Reply

*