Saturday

Related Posts Blogger Widget and LinkedWithIn for Blogger

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.
Share :

zealmatblog

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.

    ReplyDelete
    Replies
    1. Wow that's good and a good development

      Delete
  2. The last time I tried it failed, I'll have to give it a try again with this method

    ReplyDelete
  3. I used this linkwithin on my former template. Well it aint bad it helped me alot.


    Thanks Amodu


    commenting from


    visit lordxdonval

    ReplyDelete
  4. I have always want to do it but just dnt know the step involved, now that i read this am gonna try it out asap. Thank Zealmat

    ReplyDelete
  5. Wow. It's very cool to come across this post

    ReplyDelete
  6. I really love html codes posted by zealmat. It works perfectly well. Thanks for sharing this.

    ReplyDelete
  7. Nice one......

    ReplyDelete
  8. Nice one, i wanted to make adjustment to my related post codes have seen what i needed thanks. Commenting from odafeblog.com

    ReplyDelete
  9. Nice one, i wanted to make adjustment to my related post codes have seen what i needed thanks. Commenting from odafeblog.com

    ReplyDelete
  10. Thanks for sharing this wonderful resources. It will surely be helpful for many bloggers.

    ReplyDelete
  11. Thanks for this article, let me go and use on my blog to improve my traffic and minimize bounce rate.

    ReplyDelete
  12. Great work zealmat! Would check back. Already have this. Sharing. Follow back my blog

    ReplyDelete



Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.