{"id":697,"date":"2015-03-04T16:00:32","date_gmt":"2015-03-04T16:00:32","guid":{"rendered":"https:\/\/bloggeruser.com\/?p=697"},"modified":"2022-11-28T11:17:39","modified_gmt":"2022-11-28T11:17:39","slug":"related-posts-widget-for-blogger-blogs","status":"publish","type":"post","link":"https:\/\/bloggeruser.com\/related-posts-widget-for-blogger-blogs\/","title":{"rendered":"How to add Related Posts Widget for Blogger Blogs?"},"content":{"rendered":"
Displaying related posts at the end of each post is an important feature of all modern blogs.<\/p>\n
By adding related posts widget on your blogger blog, you are helping your readers to discover more posts of their interest on the blog. Your blog, at the same time, benefits from additional page views among several other benefits.<\/p>\n
Follow this tutorial to know more about related posts and implementing related posts widget on your own blog.<\/p>\n
<\/p>\n
Table of Contents<\/p>
Related posts are links and thumbnails to other related blog posts that are displayed along with the single main post. It is one of the essential features of web design for charities<\/a>, businesses, and the blog that helps bloggers to increase their page views and search engine optimisation (SEO) aspects. Visitors to the post are certainly interested in knowing more about the topic. Related posts can help them to explore more on the topic from the same blog, thus helping to increase page views. With the help of SEO link building guide<\/a> companies can provide links to related posts, by means of which both company and bloggers can also benefit from the SEO aspects.<\/p>\n In this Blogger tutorial, I will go through product page examples<\/a> and few steps to help you add a simple related posts widget for Blogger blog of your own.<\/p>\n Warning<\/strong><\/span>: Remember to backup your template before you make any changes to your HTML code, so that you can easily restore if the widget didn\u2019t work for you.<\/p>\n<\/blockquote>\n 1.<\/strong> From your Blogger Overview, click on the Template link on your left menu. Once you are Template page, click on the \u201cEdit HTML<\/strong>\u201d link under the live preview of your blog. Overview > Template > Edit HTML<\/strong><\/p>\n <\/a><\/p>\n 2.<\/strong> Press CTRL+F<\/strong> on your keyboard to enable the search box inside your template editing box and search for tag.<\/p>\n <\/a><\/p>\n 3.<\/strong> Copy the code below and paste it just above that tag.<\/p>\n 4.<\/strong> Press CTRL+F<\/strong>\u00a0again and search for the below code in your template. (In case you found two results for the code, use the code found second time.<\/p>\n 5.<\/strong> Copy and paste the below code just above the line you found in step 3.<\/p>\n 6.<\/strong> Click on \u201cSave Template<\/strong>\u201d to make changes and with that added successfully, you should now have related posts displayed on your blog.<\/p>\n This is certainly not the only way to display related posts widget for Blogger blogs.<\/p>\nAdding Related Posts Widget for Blogger Blogs<\/span><\/h2>\n
\n
&amp;amp;amp;amp;amp;amp;lt;\/head&amp;amp;amp;amp;amp;amp;gt; <\/pre>\n
\n\n&amp;amp;amp;amp;amp;amp;lt;!--Related Posts with thumbnails Scripts and Styles Start--&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;!-- remove --&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;b:if cond='data:blog.pageType == &amp;amp;amp;amp;amp;amp;amp;quot;item&amp;amp;amp;amp;amp;amp;amp;quot;'&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;style type='text\/css'&amp;amp;amp;amp;amp;amp;gt;\n#related-posts{float:left;width:auto;}\n#related-posts a{border-right: 1px dotted #eaeaea;}\n#related-posts a:hover{background: #f2f2f2;}\n#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}\n#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}\n#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}\n#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}&amp;amp;amp;amp;amp;amp;lt;\/style&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;script type='text\/javascript' src='http:\/\/makingdifferent.github.io\/blogger-widgets\/related_posts_widget.js' \/&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;!-- remove --&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;\/b:if&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;!--Related Posts with thumbnails Scripts and Styles End--&amp;amp;amp;amp;amp;amp;gt;\n\n<\/pre>\n
Widget Code Configuration:<\/span><\/h3>\n
\n
&amp;amp;amp;amp;amp;amp;lt;div class='post-footer'&amp;amp;amp;amp;amp;amp;gt;<\/pre>\n
\n\n&amp;amp;amp;amp;amp;amp;lt;!-- Related Posts with Thumbnails Code Start--&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;b:if cond='data:blog.pageType == &amp;amp;amp;amp;amp;amp;amp;quot;item&amp;amp;amp;amp;amp;amp;amp;quot;'&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;div id='related-posts'&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;b:loop values='data:post.labels' var='label'&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;b:if cond='data:label.isLast != &amp;amp;amp;amp;amp;amp;amp;quot;true&amp;amp;amp;amp;amp;amp;amp;quot;'&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;\/b:if&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;b:if cond='data:blog.pageType == &amp;amp;amp;amp;amp;amp;amp;quot;item&amp;amp;amp;amp;amp;amp;amp;quot;'&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;script expr:src='&amp;amp;amp;amp;amp;amp;amp;quot;\/feeds\/posts\/default\/-\/&amp;amp;amp;amp;amp;amp;amp;quot; + data:label.name + &amp;amp;amp;amp;amp;amp;amp;quot;?alt=json-in-script&amp;amp;amp;amp;amp;amp;amp;amp;callback=related_results_labels_thumbs&amp;amp;amp;amp;amp;amp;amp;amp;max-results=5&amp;amp;amp;amp;amp;amp;amp;quot;' type='text\/javascript'\/&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;\/b:if&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;\/b:loop&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;script type='text\/javascript'&amp;amp;amp;amp;amp;amp;gt;\nvar currentposturl=&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;lt;data:post.url\/&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;quot;;\nvar maxresults=5;\nvar relatedpoststitle=&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;lt;b&amp;amp;amp;amp;amp;amp;gt;Related Posts:&amp;amp;amp;amp;amp;amp;lt;\/b&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;quot;;\nremoveRelatedDuplicates_thumbs();\nprintRelatedLabels_thumbs();\n&amp;amp;amp;amp;amp;amp;lt;\/script&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;\/div&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;div class='clear'\/&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;\/b:if&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;b:if cond='data:blog.url == data:blog.homepageUrl'&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;b:if cond='data:post.isFirstPost'&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;a href='http:\/\/www.bloggerwidgetgenerators.com'&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;img alt='Blogger Widgets' src='http:\/\/3.bp.blogspot.com\/-K65p5zLLKQk\/T3ObCINoP7I\/AAAAAAAABmI\/dF84-alnOu4\/s1600\/best+blogger+tips.png'\/&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;\/a&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;\/b:if&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;\/b:if&amp;amp;amp;amp;amp;amp;gt;\n&amp;amp;amp;amp;amp;amp;lt;!-- Related Posts with Thumbnails Code End--&amp;amp;amp;amp;amp;amp;gt;\n\n<\/pre>\n
Widget Code Configuration<\/span><\/h3>\n
\n
Other ways to add Related Posts widget<\/span><\/h2>\n