how to make a blog | how to make a money | online help | tricks

How To Add a Widget Below First Post in Blogger Blogs

How To Add a Widget Below First Post in Blogger Blogs

Its very useful to earn more and good CTR ratio to display an Ad unit below first post in blogger . You can also appear any widget/gadge...

Expandable Recent Comments Widget for Blogger Blogs

<div dir="ltr" style="text-align: left;" trbidi="on">
The Expandable Recent Comments is a very approachable and easy <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;" target="_blank">widget</a> that can be collapsed or expand the comments by user interaction, so that there is no need to click on the commenter or post title link to see the content of a comment.  
 
See also: <a href="http://web4services.blogspot.com/" style="color: #999999; text-decoration: none;" target="_blank">How To Add Disqus Facebook and Blogger Default Commenting System Together</a> 
 
This <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;">Expandable Comments widget</a> shows only recent comments and there is button to show all or hide all comments at the top od widget. 
<table style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; width: 672px;"><tbody>
<tr><td></td><td><img alt="Expandable Recent Comments Widget for Blogger Blogs" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmVUyXKRkwl0O9ZrmHOWFBnpU-96ncDKc4eOM_tIUlHeRKUInZBOEt6ZG8ry8yThLZRPysS3i1JXbfOcgnAfNAgfeubM0u6v8l_kzqQuPVlBUDXuN2eE0PLKY0yMM4p0MI8JrJrRD-8Ho/s1600/expended+blogger+comments+widget.JPG" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px;" title="Expandable Recent Comments Widget for Blogger Blogs" /></td></tr>
</tbody></table>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<h4 style="background-attachment: scroll; background-color: white; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLuHDLllfCT6cvRcyQzvkmPijnStFC9ZAAfkcHALe-eOtieS0ArksAL5M2tbBZcx64upQV6le192JwpYl9jfEEDSV21RQsgHu0ymawEmjN0wg3UwBS4L_XuYNBm73btyEvJpDOmfHUxZY/s1600/Heading+itsatblogger.png"); background-position: 4px 50%; background-repeat: no-repeat; border-radius: 60px; border: 3px solid; box-shadow: 0px 1px 3px, 1px 1px 0px inset; color: #333333; font-family: 'Open Sans', serif, sans-serif; font-size: 15.6px; font-stretch: inherit; font-weight: normal; list-style: none outside none; margin: 15px 3px; outline: none medium; padding: 3px 10px 3px 30px; text-shadow: 0px 1px 0px; vertical-align: baseline;">
HOW TO ADD EXPANDABLE RECENT COMMENTS WIDGET</h4>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Go to Blogger dashboard > Layout > Add new widget.</li>
<li>Select Html/Javascript for adding a new widget.</li>
<li>Paste below code to Html/Javascript widget.</li>
</ul>
See also: <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;" target="_blank">Add Recent Comments Widget With Avatar To Blogger Blogs</a> 
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;"></ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
<a href="http://web4services.blogspot.com/" target="_blank"><img alt="Expandable Recent Comments Widget for Blogger Blogs" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXo7WBdMBoEQXdDj-LpYL6OCrpyHmUv-cPbiZrehBrWV-XntalCK-ghfbHmXvRWSgNNppedEqo773x5acJ_Ub8XcOFneCbU9HzXdXxj2_6zECbA1PGSwmnTWrRqszSoQxruJZzhvqGgww/s400/Blogger+Dashboard%252C+go+to+Layout+and+click+on+Add+a+Gadget+link.png" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Expandable Recent Comments Widget for Blogger Blogs" width="400" /></a></div>
 
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMF40rzp85d7choufU0PJC_g88c9y1CuNXQzcbLHdx3-D37J87VPHZluyW3eDPDsY8u6vXUUoi1pTePFj7KQUY-eGa-GUQriloz_G7y7bM5SyuCohqPoTlgLrDTGD-AfPuz65OzuZDjK4/s1600/pop-up+window%252C+choose+the+HTMLJavaScript+widget.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Expandable Recent Comments Widget for Blogger Blogs" border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMF40rzp85d7choufU0PJC_g88c9y1CuNXQzcbLHdx3-D37J87VPHZluyW3eDPDsY8u6vXUUoi1pTePFj7KQUY-eGa-GUQriloz_G7y7bM5SyuCohqPoTlgLrDTGD-AfPuz65OzuZDjK4/s400/pop-up+window%252C+choose+the+HTMLJavaScript+widget.png" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Expandable Recent Comments Widget for Blogger Blogs" width="400" /></a></div>
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
</div>
 
 
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); margin: 20px; opacity: 0.75; padding-left: 40px;">
<style type="text/css" media="screen"> .row-aa {        background: #f2f2f3; } .row-bb {        background: #F8F5F1; } .row-div {     margin:0px;    padding:5px;  } .comment-header {    font-size:0.9em;  //  border:1px solid #E0E0E0;  //  background-color:#F3F3F3;    padding:4px;    margin-top:10px;    margin-bottom:5px;  } .comment-box {   margin:0px;   padding:0px;   font-size:0.9em;   height:500px;   overflow:auto; } .comments1  {   //  background: #F3F3F3;    padding:3px;    border-left:1px dashed #A6A6A6;   color: #888888;   font-style: italic;   padding-top:4px;   margin-bottom:5px; } .comment-footer {   text-align:center;   font-size:0.9em;   padding:4px;   margin-top:5px;   } </style> <div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div> <div class="comment-box"> <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script> <script type="text/javascript"  src="http://web4services.blogspot.com//feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts"> </script> <script type="text/javascript"  src="http://web4services.blogspot.com//feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments"> </script> </div></blockquote>
 
<ul style="background-color: white;">
<li>Now replace http://web4services.blogspot.com/ url with your blog address.</li>
<li style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">Save your setting, That's All, Happy blogging.....</li>
</ul>
</div>

Expandable Recent Comments Widget for Blogger Blogs

The Expandable Recent Comments is a very approachable and easy widget that can be collapsed or expand the comments by user interaction,...

How To Add Disqus Facebook and Blogger Default Commenting System Together

<div dir="ltr" style="text-align: left;" trbidi="on">
Its debatable topic which commenting system is useful for blogger while there is many platform like Disqus, Facebook, Livefyre and so on, As we use all we found that all commenting system have there own benefits so we think and now here to share all of you how to add disqus, facebook and blogger comments system together. Yes its possible to add multiple commenting system with blogger's default commenting system. 
<table style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; width: 672px;"><tbody>
<tr><td></td><td><a href="http://web4services.blogspot.com/"><img alt="How To Add Disqus Facebook and Blogger Default Commenting System Together" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUtZsbduusymvE9FoeYiseLj7YwbJiQqW3xC6tMIFWsxgpHK2-lbWy0jwrEy3v74moUZmNSAP7t9MqpeJJkoBoJYIGXHGJlASpjrcHy0EvDAlOLLrpai6bb0qxUSN4Uv7zTqwlLdoNuF4/s1600/multiple+commenting+system+in+blogger.JPG" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="How To Add Disqus Facebook and Blogger Default Commenting System Together" /></a></td></tr>
</tbody></table>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>How to Add Disqus Comments System to Blogger</li>
<li><a href="http://web4services.blogspot.com/" style="color: #999999; text-decoration: none;" target="_blank">How to Add Facebook Comments to Blogger Blogs</a></li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<a href="http://web4services.blogspot.com/"><img alt="How To Add Disqus Facebook and Blogger Default Commenting System Together" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj2ZLQSEQmDxAaK2f1b9C6rrkEygj0GlntN9N_XMzyzNJWdSUkyBPcNBSZnJGtFA0JURTUoqXaM8qjCf18Len7Xl6-cwVMKrzSX9-4n-xc04fxD5ugP-dYWjoDC28vKh4y-3XSXhZuChk/s1600/itsatblogger+live+demo+ISB.jpg" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Live Demo" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>First of all must have FB page app id and Disqus account.</li>
<li>Login to your blogger blog and backup-ed your blogger template.</li>
<li>After getting backup go to Blogger Dashboard > Template > Edit HTML</li>
<li>Press CTRL+F to found below head tag.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
</head></blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Just above/before </head> tag paste below code.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
<meta content='web4services' property='fb:admins'/> 
<meta content='3840756250xxxxx' property='fb:app_id'/> 
<script src='http://code.jquery.com/jquery-latest.pack.js'/> 
<script src='http://tipsviablogging.github.io/tvbcommentstyle.js'/> 
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/></blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Note:  Replace web4services with with your own personal facebook username.</li>
<li>replce 3840756250xxxxx with your own facebook App Id.</li>
</ul>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Now search below code, Maybe you found it 2 or 3 times.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
<div class='comments' id='comments'></blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Paste below code after every above code (<div class='comments' id='comments'>) you found.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); margin: 20px; opacity: 0.75; padding-left: 40px;">
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
    <div class='js-default-tab comments-tab' id='blogger-comments' title='Comments from Blogger'> 
        <data:post.numComments/> 
            Comments 
            </div> 
            <div class='comments-tab disqusbutton' id='disqus-comments' onclick='load_disqus()' title='Comments with Disqus'> 
            <a alt='submit' class='dsq-comment-count comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;' style='text-decoration: none; color: #ffffff'/> 
            Disqus 
            </div> 
            <div class='comments-tab' id='fb-comments' title='Comments made on Facebook'> 
            <fb:comments-count expr:href='data:post.url'/> 
            Fb Comments 
            </div> 
            <div id='get-this' style='float: Right' title='Get This Comments Plugins'> 
                          <a href='http://web4services.blogspot.com/ 
' style='text-decoration: none;' target='_blank'> 
                            
                              [Get It] 
                            
                          </a> 
                        </div> 
                      </b:if> 
                      <div class='clear'/> 
                    </div> 
                    <div class='comments-page' id='disqus-comments-page'> 
                      <div id='disqus_thread'/> 
                      <b:if cond='data:blog.pageType == &quot;item&quot;'> 
                        <div id='disqus_thread'/> 
                        <div id='disqus_loader' style='text-align: center'> 
                          <script> 
                            function load_disqus()     {       var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;       dsq.src = &quot;http://nusratcollection.disqus.com/embed.js&quot;;       (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);       var ldr = document.getElementById(&#39;disqus_loader&#39;);       ldr.parentNode.removeChild(ldr);     }   </script> 
                        </div> 
                      </b:if> 
                </div> 
                <div class='comments-page' id='fb-comments-page'> 
                <b:if cond='data:blog.pageType == &quot;item&quot;'> 
                <fb:comments-count expr:href='data:post.url'/> 
                
                Comments : 
                
                
                
                <fb:comments expr:href='data:post.url' num_posts='10' width='500'/> 
                </b:if> 
           </div> 
     <div class='comments comments-page' id='blogger-comments-page'></blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Now search for body tag.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
</body></blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
 </div>
 
 Detail 
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Paste following code just above/before </body> tag.</li>
</ul>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
<script type='text/javascript'> 
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ 
var disqus_shortname = &#39;Disqus-Site-Name&#39;; // required: replace example with your forum shortname 
/* * * DON&#39;T EDIT BELOW THIS LINE * * */ 
(function () { 
var s = document.createElement(&#39;script&#39;); s.async = true; 
s.type = &#39;text/javascript&#39;; 
s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;; 
(document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s); 
}()); 
</script></blockquote>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Replace red colored Disqus-site-name with your own Disqus site username.</li>
<li>Save your template.</li>
</ul>
 
Note: If you find any trouble regarding appearance of 3 comment box change the comment setting, Go to Setting > Post and Comment > In field of comment location select option "Embedded or Full Page" and check it respectively. 
 
In this widget we used "onclick" events to disqus comment, it means disqus comment will load only when visitors click on disqus button. So it will not take unnecessary loading time. By <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;">adding Multiple comment system widget in blogger blog</a> , Visitors have more options to share their thoughts, view, suggestions or query due to multiple logins facilities available to them.</div>

How To Add Disqus Facebook and Blogger Default Commenting System Together

Its debatable topic which commenting system is useful for blogger while there is many platform like Disqus, Facebook, Livefyre and so on,...

Add Recent Comments Widget With Avatar To Blogger Blogs

<div dir="ltr" style="text-align: left;" trbidi="on">
In previous post we learnt how can we <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;" target="_blank">add recent comments widget</a> to our blogspot blogs that shows the mostrecent comments on blog posts but the main disadvantage is that was have not ability to show commentators avatar so now we are here again to share how to add recent comments widget with avatarto blogger. The main advantage of this widget is engage your readers and increase visitor time. Lets go to know how to add <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;">recent comments widget with avatar</a>. 
<table style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; width: 672px;"><tbody>
<tr><td></td><td><a href="http://web4services.blogspot.com/" target="_blank"><img alt="Add Recent Comments Widget With Avatar To Blogger Blogs" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRL9pXaxHYoH6L05h3NvD7O74_bA-gRjhDGr07TlD1qGXK0pujwOG4iGh5k_12iRk6cBQ1xGml4DjXuHb5uirv_NGDpxxww_8zXHtQ_s3qZNYvW0p-h1LE7ZXChgzmP5JaRTM0P-_0FTM/s1600/recent+comments+widget+with+avatar.PNG" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Add Recent Comments Widget With Avatar To Blogger Blogs" /></a></td></tr>
</tbody></table>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
 You May Also Read Them..... 
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li><a href="http://web4services.blogspot.com/" style="color: #999999; text-decoration: none;" target="_blank">How To Add Recent Comments Widget To Blogger</a></li>
<li><a href="http://web4services.blogspot.com/" style="color: #999999; text-decoration: none;" target="_blank">How To Change Post A Comment Text in Blogger</a></li>
<li><a href="http://web4services.blogspot.com/" style="color: #999999; text-decoration: none;" target="_blank">Add Numbers on Blogger Threaded Comments</a></li>
</ul>
 
<h4 style="background-attachment: scroll; background-color: white; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLuHDLllfCT6cvRcyQzvkmPijnStFC9ZAAfkcHALe-eOtieS0ArksAL5M2tbBZcx64upQV6le192JwpYl9jfEEDSV21RQsgHu0ymawEmjN0wg3UwBS4L_XuYNBm73btyEvJpDOmfHUxZY/s1600/Heading+itsatblogger.png"); background-position: 4px 50%; background-repeat: no-repeat; border-radius: 60px; border: 3px solid; box-shadow: 0px 1px 3px, 1px 1px 0px inset; color: #333333; font-family: 'Open Sans', serif, sans-serif; font-size: 15.6px; font-stretch: inherit; font-weight: normal; list-style: none outside none; margin: 15px 3px; outline: none medium; padding: 3px 10px 3px 30px; text-shadow: 0px 1px 0px; vertical-align: baseline;">
HOW TO ADD AVATAR TO COMMENTS</h4>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 01... Go to blogger dashboard > Layout > Add Gadget, New window open where select "add html/javascript" option.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
<a href="http://web4services.blogspot.com/" target="_blank"><img alt="Add Recent Comments Widget With Avatar To Blogger Blogs" border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgdSNjaPUIVxc66aCFqFBDqpUjdfct4Y8YsVKcjceRf1h-selQP8HIp2tL080Ql-z0BXzAHIJ0g5MK4uahJUdAAhQjCtPgBVPrBdoGL1zXKDK71ZitMoqp15lFDcqjTaNQZPjBD8ogyg/s640/layout+add+gadget.PNG" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Add Recent Comments Widget With Avatar To Blogger Blogs" width="600" /></a></div>
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
 </div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
<a href="http://web4services.blogspot.com/" target="_blank"><img alt="Add Recent Comments Widget With Avatar To Blogger Blogs" border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmlFCms8Y8rmowu7CtKKetLT8g7BOhdLqDokp0yI9YCest8IEAwno1q-nG-GkeRaEqn8EbLdvZClg_Fvy3WvpQYknfQGasJpc8IXBIsV_kL_ebzlsQ4shDc_4vfOX4Fz9KqyApUj_4I0/s400/add+html+javascript.PNG" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Add Recent Comments Widget With Avatar To Blogger Blogs" width="400" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
 </div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 02... Paste the following code into the "Html/Javascript Box" name the widget and publish it.</li>
</ul>
   
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); margin: 20px; opacity: 0.75; padding-left: 40px;">
<style type="text/css"> ul.helploggercomments{list-style: none;margin: 0;padding: 0;} .helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;} .helploggercomments li .avatarImage {padding: 3px; background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0 0;position: relative;overflow: hidden;} .avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;} .helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;} .helploggercomments li span {margin-top: 4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style> <script type="text/javascript"> //<![CDATA[     // Recent Comments Settings     var  numComments  = 5,  showAvatar  = true,  avatarSize  = 60,  roundAvatar = true,  characters  = 40,  showMorelink = false,  moreLinktext = "More »",  defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgavbtjpg1K-4FHkZPLgmtb0iW5h7pVFWEJtQQMWDmZVgw6IHNRzJBba-yIDhoXiBW8d_uZJOzs4So3uncZTY2MvroiX4styrOsMHnLkjQyDwp7nGqCOnnavKxVpho9XIqxkZcygphzhp3W/s1600/default-avatar.jpg",  hideCredits = true; //]]> </script> <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script> <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="http://web4services.blogspot.com/ " rel="nofollow" >Recent Comments Widget</a></div></blockquote>
You Must Read Them..... 
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li><a href="http://web4services.blogspot.com/" style="color: #999999; text-decoration: none;" target="_blank">How To Add Hyperlink in Blogger Comments Form</a></li>
<li><a href="http://web4services.blogspot.com/" style="color: #999999; text-decoration: none;" target="_blank">How To Hide or Disable Backlinks From Blogger Comments</a></li>
</ul>
 
<h4 style="background-attachment: scroll; background-color: white; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLuHDLllfCT6cvRcyQzvkmPijnStFC9ZAAfkcHALe-eOtieS0ArksAL5M2tbBZcx64upQV6le192JwpYl9jfEEDSV21RQsgHu0ymawEmjN0wg3UwBS4L_XuYNBm73btyEvJpDOmfHUxZY/s1600/Heading+itsatblogger.png"); background-position: 4px 50%; background-repeat: no-repeat; border-radius: 60px; border: 3px solid; box-shadow: 0px 1px 3px, 1px 1px 0px inset; color: #333333; font-family: 'Open Sans', serif, sans-serif; font-size: 15.6px; font-stretch: inherit; font-weight: normal; list-style: none outside none; margin: 15px 3px; outline: none medium; padding: 3px 10px 3px 30px; text-shadow: 0px 1px 0px; vertical-align: baseline;">
CUSTOMIZATION</h4>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>By default it set to display 5 comments, to increase limit increase "5" value in red.</li>
<li>By default the avatar of anonymous commentator added to change simply replace the your image url showing in red color.</li>
<li>To change the size of Avatar change the "60" value.</li>
<li>Avatar will be displayed in round shape by default, Change the "true" into "false" to display in square shape.</li>
<li>To shows more words of comments increase "40" value.</li>
</ul>
 The recent comments widget with avatar displays at the sidebar of your blog will be tell your readers that your blog is alive and visitors leave comments on your posts after reading them. That's All, Enjoy this <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;" target="_blank">great widget</a> and get cool comments to show. Happy Blogging.</div>

Add Recent Comments Widget With Avatar To Blogger Blogs

In previous post we learnt how can we add recent comments widget to our blogspot blogs that shows the most recent comments on blog posts...

Add Multi Colored Popular Posts Widget to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Popular posts widget is provided by Blogger to displays most viewed posts of your blog in the last 7 days, 01 month and all the time and have three modes to display, one is display only posts title, 2nd is display title with image thumbnail and 3rd is display title along with the posts snippets. To <a href="http://web4services.blogspot.com/" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-decoration: none;">display Popular Posts Widget in multi colored</a> just add new variable and some CSS codes to our blogger template. So let's start......!!!!! 
<table style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; width: 672px;"><tbody>
<tr><td></td><td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; padding: 4px; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-hX3C_oHx9EhhZ_Ll7lMKI9yLmORyRLI0JZ-mtDg-4EZOy7lJTcH1bXr-N9i656hRQnR_YnoCHyvRjHXFqTNy2XWW6xnuT4GZTsdmz4iCT1gKelX4_2VW1og1Ac1wj8Cci8-EfAHzCg/s1600/add+multi+colored+popular+posts+widget+in+blogger.PNG" imageanchor="1" style="color: #999999; margin-left: auto; margin-right: auto; text-decoration: none;"><img alt="Add Multi Colored Popular Posts Widget to Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-hX3C_oHx9EhhZ_Ll7lMKI9yLmORyRLI0JZ-mtDg-4EZOy7lJTcH1bXr-N9i656hRQnR_YnoCHyvRjHXFqTNy2XWW6xnuT4GZTsdmz4iCT1gKelX4_2VW1og1Ac1wj8Cci8-EfAHzCg/s1600/add+multi+colored+popular+posts+widget+in+blogger.PNG" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Add Multi Colored Popular Posts Widget to Blogger" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 9.6px;"><a href="http://web4services.blogspot.com/" target="_blank">Add Multi Colored Popular Posts Widget to Blogger</a></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<h4 style="background-attachment: scroll; background-color: white; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaLuHDLllfCT6cvRcyQzvkmPijnStFC9ZAAfkcHALe-eOtieS0ArksAL5M2tbBZcx64upQV6le192JwpYl9jfEEDSV21RQsgHu0ymawEmjN0wg3UwBS4L_XuYNBm73btyEvJpDOmfHUxZY/s1600/Heading+itsatblogger.png"); background-position: 4px 50%; background-repeat: no-repeat; border-radius: 60px; border: 3px solid; box-shadow: 0px 1px 3px, 1px 1px 0px inset; color: #333333; font-family: 'Open Sans', serif, sans-serif; font-size: 15.6px; font-stretch: inherit; font-weight: normal; list-style: none outside none; margin: 15px 3px; outline: none medium; padding: 3px 10px 3px 30px; text-shadow: 0px 1px 0px; vertical-align: baseline;">
HOW TO ADD MULTI COLORED POPULAR POSTS WIDGET TO BLOGGER</h4>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
 
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
<a href="http://web4services.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-4tWjNfCCi3fsXIEP6ObHLFl_OEZHWJv_Sfje8R0IopO-N05RMgXPyC2y_81U6Qf74BAEJrqAvjmX4ZHXwswQ9spIRpAo1BziQ0Y9GQO1cYrcz2nTXJzGsMpkLind4GyXo2zxXO348I/s1600/itsatblogger+live+demo+ISB.jpg" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" /></a></div>
 
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 01...Go to blogger dashboard > Template > Edit HTML</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
<a href="http://web4services.blogspot.com/" target="_blank"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLJilp6eIBLOXH86OHDK6jHB3KTh6A8gsuyxr7IpOu4gf1Q3gr8x0plJ48sWJhr4i3Ri4fL0c0wO2BGx7ORwKwtS5BbfDhYqk1NoW7_s3_0CPWI9iEEMT8OMs71CPhjgslZGj3lVBifI/s320/itsatblogger+how+to+edit+html+in+blogger.jpg" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" width="320" /></a></div>
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
 </div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 02... Search the following code.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
/* Variable definitions 
   ====================</blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 03... Just after above code paste following code...</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1"> 
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/> 
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/> 
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/> 
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/> 
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/> 
</Group></blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 04... Now search the ]]></b:skin> code....</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
]]></b:skin></blockquote>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 05... Paste below code just before ]]></b:skin> tag...</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
</div>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} 
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} 
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} 
#PopularPosts1 ul li:first-child:after{content:"1"} 
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} 
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} 
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} 
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}</blockquote>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 06... Now find below lines of code....(Note: If you have not add Popular posts widget first add it.)</li>
</ul>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'></blockquote>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 07... Expand Popular posts widget and delete or replace it with below code.(Be sure when delete/replace the code you should including </b:widget> see example )</li>
</ul>
 
Example: 
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13.2px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> 
<b:includable id='main'> 
  <b:if cond='data:title'><h2><data:title/></h2></b:if> 
  <div class='widget-content popular-posts'> 
    <ul> 
      <b:loop values='data:posts' var='post'> 
      <li> 
        <b:if cond='data:showThumbnails == &quot;false&quot;'> 
          <b:if cond='data:showSnippets == &quot;false&quot;'> 
             
            <a expr:href='data:post.href'><data:post.title/></a> 
          <b:else/> 
             
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> 
            <div class='item-snippet'><data:post.snippet/></div> 
          </b:if> 
        <b:else/> 
          <b:if cond='data:showSnippets == &quot;false&quot;'> 
             
            <div class='item-thumbnail-only'> 
              <b:if cond='data:post.thumbnail'> 
                <div class='item-thumbnail'> 
                  <a expr:href='data:post.href' target='_blank'> 
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> 
                  </a> 
                </div> 
              </b:if> 
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> 
            </div> 
            <div style='clear: both;'/> 
          <b:else/> 
             
            <div class='item-content'> 
              <b:if cond='data:post.thumbnail'> 
                <div class='item-thumbnail'> 
                  <a expr:href='data:post.href' target='_blank'> 
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> 
                  </a> 
                </div> 
              </b:if> 
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> 
              <div class='item-snippet'><data:post.snippet/></div> 
            </div> 
            <div style='clear: both;'/> 
          </b:if> 
        </b:if> 
      </li> 
      </b:loop> 
    </ul> 
    <b:include name='quickedit'/> 
  </div> 
</b:includable> 
</b:widget></blockquote>
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 08... Paste or Replace with below code...</li>
</ul>
<blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrUjXlPOMxXsMMbyIifJ5XOU3YEWVYTpP_26Q2AiuZIwQ7bvhi_PbDVkZq_paYy0czMIH9_2K2kh366bKR900lAVIM0JZvC3Uk0P02YFDjQ8jWvYCGGgCuDeUEEpibzBlBGkVivbtfj0i/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); margin: 20px; opacity: 0.75; padding-left: 40px;">
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> 
<b:includable id='main'> 
   <b:if cond='data:title'> 
    <h2><data:title/></h2> 
   </b:if> 
   <div class='widget-content popular-posts'> 
    <ul> 
     <b:loop values='data:posts' var='post'> 
      <li> 
       <b:if cond='data:showThumbnails == &quot;false&quot;'> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
        <b:else/> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
        </b:if> 
       <b:else/> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdfwQFvRwuL0Ow_iboI7MEw3DS2kk8EauL8LjzbBQeTQNyGA_jG2RkeMz7wWWtRbQVC39evwKTTcajaihT_IVRGaxyaSuj6SlpWEi8eo9DN-xZ7mIn-8tRs7ThDS7U8byKt0q3mjzgtq8/s1600/default.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        <b:else/> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdfwQFvRwuL0Ow_iboI7MEw3DS2kk8EauL8LjzbBQeTQNyGA_jG2RkeMz7wWWtRbQVC39evwKTTcajaihT_IVRGaxyaSuj6SlpWEi8eo9DN-xZ7mIn-8tRs7ThDS7U8byKt0q3mjzgtq8/s1600/default.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        </b:if> 
       </b:if> 
      </li> 
     </b:loop> 
    </ul> 
   </div> <div style="font-size: 10px; float: right;"><a href=http://web4services.blogspot.com/" rel="nofollow">Multi Colored Popular Posts Widget</a></div> 
  </b:includable> 
</b:widget></blockquote>
 
<ul style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;">
<li>Step 09... Save template.</li>
<li>Step 10... Go back to your blogger Layout > Rearrange popular posts widget to display with maximum 5 posts.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
<a href="http://web4services.blogspot.com/" target="_blank"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9veOsW6M_XCElB1PpZu1tq8EoPjUzKtEF-U_JX1KHIlRmoC5_HtPsTfFTLJJ5oYTepvM_J8BZvL7JFIKpipppQWNT31pfd67CkR-acHpBqEtlbK_VAit0-ihkiZisNcAm9NhyURcSPo/s320/add+multi+colored+popular+posts+widget+in+blogger11.png" style="border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" width="318" /></a></div>
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;">
 </div>
 
If you like this article, please like subscribe for more posts. For any questions or suggestions, leave a comment below. Happy Blogging!!!!</div>

Add Multi Colored Popular Posts Widget to Blogger

Popular posts widget is provided by Blogger to displays most viewed posts of your blog in the last 7 days, 01 month and all the time and...