How To Add Related Posts Widget To Blogger

Blogger is a great platform to make free blogs and it is the product of Google. You can also make money with Google AdSense in this platform without paying anything. You Just have to make a good blog and then you can apply for Google AdSense. Every blogger want to make a beautiful blog with good design but blogger provides only simple templates. We can add some widgets which can make our blog professional. So here we come with a beautiful widget than will show related posts just below the posts.

Steps to Add Related Posts Widget In Blogger

Step-1. Go to Blogger Dashboard > Template. ( See below image )

Step-2.  Click on Edit HTML. Now press CTRL+F and search for </head>. Now copy the below code and paste just above the </head> tag.

<!--Related Posts with thumbnails Scripts and Styles Start--><b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #EEEEEE;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;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;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;} #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style><script type='text/javascript' src='http://newtechnologyhub.blogspot.com' /></b:if><!--Related Posts with thumbnails Scripts and Styles End-->

Note: You can change width and height of thumbnail by just changing these values in the code  width:110px;height:100px. ( change 110 and 100 according to your requirement ).

Step-3. Now search for this tag <div class='post-footer'> and paste the below just above this tag 

<!-- Related Posts with Thumbnails Code Start--><b:if cond='data:blog.pageType == "item"'><div id='related-posts'> <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop><script type='text/javascript'>var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></div> <div class='clear'/> <div style="font-size: 9px;float: right; margin: 5px;"> <a style="font-size: 9px; text-decoration: none;" href="http://newtechnologyhub.blogspot.in/2015/06/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div> </b:if><!-- Related Posts with Thumbnails Code End-->

Note: You can change the value in thew code max-results=5 with the number posts you want to display. ( if you want to 6 posts in the widget, then change it to 6 ).

Now press Save Template. Now this widget will shown below every post with posts having same label as of your post. 

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post