Add These Important Widgets for Blogger Blog

Blogger is one of the most popular blogging platforms. If you are a blogger, you know about the widget. The widget is a small window in your blog that performs different tasks. Blogger adds widgets on their blogs to make it user-friendly. When you add a widget on your blog’s layout then it looks better. You must add widget on your blog but you know that it is not possible to add all the widgets on your blog. There are some important widgets for blogger blog that you need to add. I have already told about the most important widgets for blogger blog.

You May Like:

Now I want to show you how can you add these widgets on your blog. If you know how to add these important widgets for blogger blog, you can easily do it on your blog. Here I show you some of the most important widgets for blogger blog and how to add these widgets on your blog.

Most Important Widgets for Blogger Blog: Popular Posts Widget

Popular posts widget is a must have widget for blogger. This is really an important and attractive widget. Because visitors want to see your popular post. I will show you how to add popular post widget in your blog.

  • Go to your blogger Dashboard. Click on Layout then select Add a Gadget. Then choose Popular Posts from the list. Now you need to configure your popular posts widget. Finally, click on Save.

Important Widgets for Blogger Blog


Now you need to customize default popular posts widget. Follow the below steps.

  • Click on blogger Template then Edit HTML. Now press Ctrl+F from your keyboard and find this code ]]></b:skin>. Finally, copy and then paste the below code just above ]]></b:skin>. Then Save template. Now you have done.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url( SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
.popular-posts ul li a:hover {



Most Important Widgets for Blogger Blog: Recent Posts Widget

Recent posts widget is really an important widget for blogger blog. People seek for update information and recent posts widget help them to get your most recent posts.

  • Go to your blogger blog. Click on Layout then select Add a Gadget. Now find HTML/JavaScript and click on it. Then paste the blog code into the content box.
<div id="hlrpsb">
<script style="text/javascript" src=""></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://Your Blog Address HERE/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="" title="Recent Posts Widget">JustNaira</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
border-bottom: 1px #cccccc dotted; }
  • You need to replace Your Blog Address HERE with your blog URL. Your blog URL looks like and finally, click on Save.


Most Important Widgets for Blogger Blog: Related Posts Widget

Related posts widget helps you to reduce blog bounce rate. Follow the below steps to add related posts widget.

  • Go to your blogger Dashboard. Then click on Template and then click Edit HTML.
  • Then press Ctrl+F and find </head> tag. Then paste the below code just above/before </head> tag.
#related-posts {
float : left;
width : 540px;
margin-left : 5px;
font : 11px Verdana;
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
#related-posts a:hover {
color : #054474;
text-decoration : none;
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
#related-posts ul li {
display : block;
background : url(&quot;;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
<script src='' type='text/javascript'/>
  • Then find the below code line.


if you didn’t find the above code line then find out the below code lines.

<p class=’post-footer-line post-footer-line-1′>

<div class=’post-footer-line post-footer-line-1′>

<div class='footer'>
  • Now paste the below code just after any of the above code lines. Finally, click on Save Template. Now you have done.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><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; + + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();


Munna Hossain

Hello, I am Munna Hossain. I am a professional blogger and affiliate marketer. I am interested in technology, blogging, SEO, and WordPress. My blog Mytechgoal provides you all information about technology, blogging, SEO, and affiliate marketing.

Click Here to Leave a Comment Below 3 comments