Related Posts Widget with Thumbnails and Summary for Blogger

 There are several tutorials quite old which have explained different methods for displaying related posts in Blogger [1] [2] but in this tutorial, I will show you how to implement a very beautiful Related Posts widget that comes along with Thumbnails and Posts Snippets, as well. If you want to add it, follow the next steps below:

How to Add Related Posts Widget with Summary to Blogger

Read More

How to add Related Posts Widget to Blogger

Read More

How to customize or edit the linkwithin related post widget

 LinkWithin is a very popular widget that shows the related posts with a thumbnail and although it is not a new gadget among bloggers, many avoid using it for its lack of customization. So, in this post we will see how to add LinkWithin on a Blogger blog and how to customize it.

This is what we will do with this gadget:

- Change the location of the gadget;
- Remove the LinkWithin link;
- Change the "You might also like" title with any other text;
- Add rounded borders to images;
- Remove the border that separates posts;
- Add a background color;
- Change the background color on mouse over;
- Change the post titles color and font

Read More

Stylish Related Posts Widget with Thumbnail for Blogger

Related posts widget with thumbnail for blogger – this is a wonderful widget to display the related posts in the footer of each blog post from the same category along with image thumbnail. By installing this widget in a blog, not only help to display the relevant posts, but also can increase the blog page-view and reduce bounce rate as well. This a wonderful hack to remain your readers for long periods which is very important for your blog. Mostly third party professional blogger templates already included this feature. But the blogger default templates don’t have this feature. So, if you are using the blogger default or a template which don’t have related posts widget and you’re looking to include this feature in your blog. Here’s a stylish related posts widget with thumbnail for blogger ready to install in your blog.

How to add related posts widget with thumbnail in blogger

To make this widget you need the knowledge of JavaScript and CSS languages, but don’t worry in this post we are going, to add this through already written code, so, you don’t need to write code but only follow the below simple steps to add this important feature in your blog.

• Sign into your Blogger account
• Go template
• Download the Bach up your template, as a precaution if you make any mistake in editing template then you’ll recover from backup.
• Click the Edit HTML tab and search </ head>
• Now click on below “view code” button. Copy the code from appearing pop-up window and paste the just above the </ head> tag.

View Code

• After the adding above code, then scroll down and search <div class='post-footer'>Paste the below code just above it.

<!-- Related Posts with Thumbnails Code Start-->
 <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>
 <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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
 <script type='text/javascript'>
 var currentposturl=&quot;<data:post.url/>&quot;;
 var maxresults=5;
 var relatedpoststitle=&quot;Related Posts&quot;;
 removeRelatedDuplicates_thumbs();
 printRelatedLabels_thumbs();
 </script>
 </div><div style='clear:both'/>
 </b:if>
 <!-- Related Posts with Thumbnails Code End-->

Customization

 maxresults = 5 ; to change the number of related posts.

” Related Posts “; to change the title of this widget.

Save the template and check the results.

Hopefully, it will be working in  the blog.  However, if you are facing any trouble about the adding related posts widget, then share with us in the comment section.

Read More

How To Add A Simple Related Posts Widget In Blogger

In the previous post, we have outlined that how to add related posts with thumbnail widget in blogger. This post very same to the last tutorial. Now we are going to add simple related posts widget in blogger. This is a great idea for those who want display more relevant post in the blog post footer without to effects the blog loading time. This widget will display only the post title in the post footer. This is also the best way for internal links building.

How to add simple related posts widget in blogger

• Login into your blogger account
• Go to Blogger Dashboard > Template
• Backup your template – this important to backup your template because if you do any mistake then you can easily recover your template.
• Click on, Edit HTML
• Find </head> now click on “view code” and copy all coding from appearing pop-up window and paste just above </head> tag.

View Code

After the adding above coding then scroll down and search <data:post.body/> and paste the below code just 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> 
<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=6&quot;' type='text/javascript'/></b:if></b:loop>
 <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
<a style="font-size: 10px; color: #bcbcbc; float: right;" href="http:www.thebloggerguide.com/simple-related-posts-widget-blogger/" rel="nofollow" >Get Related Post widget</a></div></b:if>

If you want to change the amount of links which are displayed in below post, then change the value of var maxresults=10 according to your need. Save the template and check the result.
Hopefully, it will be worked properly if you are facing any problem about simple related post widget for blogger then leave your comment

Read More