// API callback
relatedposts({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243"},"updated":{"$t":"2023-12-18T01:54:28.842-08:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"posts"},{"term":"css"},{"term":"Comments"},{"term":"adsense"},{"term":"SEO"},{"term":"jQuery"},{"term":"social media"},{"term":"Image Effects"},{"term":"beginner's guide"},{"term":"blogger posts"},{"term":"Navigation"},{"term":"make money online"},{"term":"javascript"},{"term":"adsense optimization"},{"term":"menus"},{"term":"Facebook"},{"term":"adsense tips"},{"term":"social media plugins"},{"term":"popular posts"},{"term":"blogger"},{"term":"blogger pages"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"threaded comments"},{"term":"google plus"},{"term":"related posts"},{"term":"blogging tips"},{"term":"recent comments"},{"term":"slideshows"},{"term":"static pages"},{"term":"tools"},{"term":"Templates"},{"term":"backlinks"},{"term":"custom domain"},{"term":"emoticons"},{"term":"instagram"},{"term":"labels"},{"term":"sitemap"},{"term":"RSS"},{"term":"click bombing"},{"term":"feedburner"},{"term":"firebug"},{"term":"font awesome"},{"term":"google analytics"},{"term":"homepage"},{"term":"invalid clicks"},{"term":"robots"},{"term":"statcounter"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Comments?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/search\/label\/Comments"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Comments\/-\/Comments?alt=json-in-script\u0026start-index=7\u0026max-results=6"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"22"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4632448463431636814"},"published":{"$t":"2014-12-15T08:43:00.001-08:00"},"updated":{"$t":"2016-10-28T20:19:11.984-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"google plus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Show\/Hide Blogger and Google+ Comments System With Toggle"},"content":{"type":"html","$t":"Many Blogger site owners received the new Google+ Comment System pretty negatively because it forced all commenting users to create their own Google+ account before they were able to write a comment. The Google+ Comment System on Blogger was convenient to writers, but discouraged many users from continuing to comment on blogs because they simply didn't want to use Google+. For those that did use Google+ to make a comment, Blogger would never email you and notify you that someone left a comment; you could go days or weeks without ever realizing that you never responded to a reader.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIn addition to frustrating your audience, the Google+ Comment System on Blogger depended upon the URL of your blog post. By changing your URLs or moving around your blog posts internally, you run the risk of losing every one of your comments that was placed using Google+.\u003Cbr \/\u003E\u003Cbr \/\u003E\nPreviously, the only way to solve this problem was to disable the comment system through your account settings, thus giving up your ability to use their Google+ account. Now, there's an easy new way to have the best of both worlds. Allowing fans of Google+ as well as everyday blog readers to access all same features, you’ll be able to engage every visitor equally. You can respond to comments while still being able to communicate with other Google+ users outside of your site and take advantage of the Google+ Comment System on Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"google plus comments, blogger\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-97693gKGuck\/VI8K6OA7ASI\/AAAAAAAAKuc\/DTR0td3e9bY\/s1600\/use-google-plus-blogger-comments-together-with-toggle.png\" height=\"256\" title=\"Show\/Hide Blogger and Google+ Comments System With Toggle\" width=\"320\" \/\u003E\u003C\/div\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/helploggertestblog.blogspot.com\/2013\/12\/lorem-ipsum-viii.html\" rel=\"nofollow\" target=\"_blank\"\u003EDEMO\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Integrate Blogger and Google Plus Comments\u003C\/h3\u003E\nTo make the installation as simple as possible, I used inline jQuery and CSS, but who wants can change this code later. Also, the most accessible place I found to add it would be just after \u003Cb\u003E\u0026lt;b:include data='post' name='post'\/\u0026gt;\u003C\/b\u003E. So, let's start adding it:\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 1. Log into your Blogger account and select your blog \u0026gt; go to 'Template' and press the 'Edit HTML' button on the right side.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press CTRL + F keys to open the editor's search box and search for the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:include data='post' name='post'\/\u0026gt;\u003C\/blockquote\u003E\nStep 3. Just after \u0026lt;b:include data='post' name='post'\/\u0026gt; add the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style\u0026gt;#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(http:\/\/2.bp.blogspot.com\/--CsmnKc1FSA\/VI8FyLYdw7I\/AAAAAAAAAwE\/erSHV85Pg_Q\/s1600\/speech-bubble.png) no-repeat; font-size: 20px; font-family: \u0026amp;quot;Arial Narrow\u0026amp;quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='comments-icons'\u0026gt;\u003Cbr \/\u003E\nShow Comments: \u0026lt;a class='show-hide-comments' href='javascript:void();' onclick='$(\u0026amp;quot;#gplus-comments-visibility\u0026amp;quot;).slideToggle();$(\u0026amp;quot;#comments\u0026amp;quot;).hide();'\u0026gt;\u0026lt;img class='gplus-icon' height='35' src='http:\/\/1.bp.blogspot.com\/-i1zpfechOuY\/VI763hqxlHI\/AAAAAAAAAvs\/dz4sWUQW-xU\/s1600\/google-plus-logo.png' width='35'\/\u0026gt;\u0026lt;\/a\u0026gt; OR \u0026lt;a class='show-hide-comments' href='javascript:void();' onclick='$(\u0026amp;quot;#comments\u0026amp;quot;).slideToggle();$(\u0026amp;quot;#gplus-comments-visibility\u0026amp;quot;).hide();'\u0026gt;\u0026lt;img class='blogger-icon' height='35' src='http:\/\/3.bp.blogspot.com\/-4N-YlJvoxdA\/VI763udxlHI\/AAAAAAAAAvw\/0dY2Ys0zz2k\/s1600\/blogger-logo.png' width='35'\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='gplus-comments-visibility'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' \u003Cspan style=\"color: #cc0000;\"\u003Edata-width='550'\u003C\/span\u003E expr:data-href='data:post.url'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nNote: \u003Cspan style=\"color: #cc0000;\"\u003Edata-width\u003C\/span\u003E is for setting the width of the comment box, so the number (550) indicated there can be changed according to the design of your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 4. Press the \"Save Template\" button located at the top of the editor and view your blog to see if you have successfully added Google+ commenting system to Blogger. \u003Cbr \/\u003E\u003Cbr \/\u003E\nPlease note that in order to make this work, you need to make sure that you are using a version of jQuery in your site. Otherwise, add this line just above the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag using the HTML template editor: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script src='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.4\/jquery.min.js' type='text\/javascript'\/\u0026gt;\u003C\/blockquote\u003E\n\u003Ch5\u003EThat's it!\u003C\/h5\u003E\nFrom now on, any reader that views your post has the option of making a comment using their Google+ account, or the native Blogger comments. Your readers will enjoy the flexibility that your site provides and you will also benefit from the inclusive services offered by Google."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/4632448463431636814\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/12\/blogger-and-google-comments-system-with-toggle.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4632448463431636814"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4632448463431636814"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/12\/blogger-and-google-comments-system-with-toggle.html","title":"Show\/Hide Blogger and Google+ Comments System With Toggle"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-97693gKGuck\/VI8K6OA7ASI\/AAAAAAAAKuc\/DTR0td3e9bY\/s72-c\/use-google-plus-blogger-comments-together-with-toggle.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-510798521604977025"},"published":{"$t":"2014-08-27T19:46:00.001-07:00"},"updated":{"$t":"2016-10-29T19:01:16.482-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"popular posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"How to Display Most Commented Posts in Blogger"},"content":{"type":"html","$t":"One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you'll need a most commented posts widget for Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHaving a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you're going to need a few specific things to help you out.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"most commented posts widget\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s1600\/most-commented-posts-widget-for-blogger.png\" height=\"254\" title=\"Get a Most Commented Posts Widget For Blogger\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/helplogger-demo-blog2.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHere's What You're Going To Get\u003C\/h3\u003E\nThere are certain aspects in the design of a most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget:\n\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EOrdered by popularity.\u003C\/b\u003E The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EGraphic incorporation.\u003C\/b\u003E Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EDescriptions that blend in.\u003C\/b\u003E The internet today revolves around the value that you can provide each individual user. People don't just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn't able to provide. By having descriptions that blend in, you'll be able to enhance the perceived value that your site can provide. This leads to more clicks!\u003C\/li\u003E\u003C\/ul\u003E\nRelated: \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/add-multi-colored-popular-posts-to.html\"\u003EAdd Multi-Colored Popular Posts to Blogger\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EAdd the Most Commented Posts Widget to Blogger\u003C\/h2\u003E\nStep 1. Log in to your \u003Ca href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger account\u003C\/a\u003E and go to Template, press the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type the following tag inside it and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/Group\u0026gt;\u003C\/blockquote\u003E\nStep 3. Just below \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/Group\u0026gt;\u003C\/span\u003E, add this code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;Group description=\"Most Commented\" selector=\".most-commented\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;Variable name=\"most.commented.background1\" description=\"background color1\" type=\"color\" default=\"#fa4242\" value=\"#ee377a\"\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;Variable name=\"most.commented.background2\" description=\"background color2\" type=\"color\" default=\"#ee6107\" value=\"#fcad37\"\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;Variable name=\"most.commented.background3\" description=\"background color3\" type=\"color\" default=\"#f0f\" value=\"#f8e000\"\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;Variable name=\"most.commented.background4\" description=\"background color4\" type=\"color\" default=\"#ff0\" value=\"#c7e93d\"\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;Variable name=\"most.commented.background5\" description=\"background color5\" type=\"color\" default=\"#0ff\" value=\"#5ebded\"\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/Group\u0026gt; \u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"add code to blogger html\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-i0vbvq6PEvg\/U_6Jt4UbCuI\/AAAAAAAAKUc\/rFhQdhYvbu4\/s1600\/add-css-to-blogger-template-html.png\" height=\"312\" title=\"Get a Most Commented Posts Widget For Blogger 1\" width=\"640\" \/\u003E\u003C\/div\u003E\nNote: if you can't find the \u0026lt;\/Group\u0026gt; tag, try to find the following tag instead and add the variables just below it:\u003Cbr \/\u003E\n\u003Cblockquote\u003E\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[\u003C\/blockquote\u003E\u003Cbr \/\u003E\nStep 4. Now search for the following tag (CTRL + F):\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\nStep 5. And just above it, add this CSS code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n.comment-count {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 3px 10px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background: #fff;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #000;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 10px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; float: right;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented ul {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px !important;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-family: Century Gothic, sans-serif;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented ul li {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; list-style-type: none;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 10px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #555;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-top: -10px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented ul li a {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #444;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 11px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented ul li img {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0px 5px 0px 0px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 60px;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; height: 60px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented:nth-child(3n+0) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background1);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 100%;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented:nth-child(4n+0) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background2);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 95%;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented:nth-child(5n+0) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background3);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 90%;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented:nth-child(6n+0) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background4);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 85%;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.most-commented:nth-child(7n+0) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background5);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 80%;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nStep 6. Save the template.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNow, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the \"Layout\" section of your Blogger dashboard and click on the \"Add a gadget\" link on the right side. From the pop-up window, scroll down the list and select the \"HTML\/JavaScript\" gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger html javascript gadget\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-Zc2SWHxGoro\/UxKtggDDdoI\/AAAAAAAAGYw\/HGTfkT8XV6c\/s1600\/add-a-gadget-or-page-element-html-javascript-blogger.png\" height=\"308\" title=\"Get a Most Commented Posts Widget For Blogger 2\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nCopy and paste this script inside the content box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction stripTags(s,n) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; return s.replace(\/\u0026lt;.*?\u0026gt;\/ig,\"\").split(\/\\s+\/).slice(0,n-1).join(\" \")\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nfunction mostcommented(feed) {\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; var i;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; for (i = 0; i \u0026lt; feed.count ; i++) {\u003Cbr \/\u003E\nvar postURL = \"'\" + feed.value.items[i].link + \"'\";\u003Cbr \/\u003E\nvar postTitle = feed.value.items[i].title;\u003Cbr \/\u003E\nvar postthumbnail = \"\u0026lt;img src=\"+feed.value.items[i].postthumbnail+\" \/\u0026gt;\";\u003Cbr \/\u003E\nvar postDescription = feed.value.items[i].postdescription;\u003Cbr \/\u003E\nvar postComments = feed.value.items[i].commentcount;\u003Cbr \/\u003E\nvar postList = '\u0026lt;div class=\"most-commented\"\u0026gt;\u0026lt;ul\u0026gt;\u0026lt;li\u0026gt;\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\" + postthumbnail + \"\u0026lt;a href=\"+ postURL + '\"\u0026gt;' + postTitle + \"\u0026lt;\/a\u0026gt;\"\u0026nbsp; + '\u0026lt;p\u0026gt;' +stripTags(postDescription,\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E)+'...\u0026lt;\/p\u0026gt;' + '\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003E\n\u0026nbsp;document.write(postList);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp;}\u003Cbr \/\u003E\n\u0026nbsp;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"http:\/\/pipes.yahoo.com\/pipes\/pipe.run?\u003Cbr \/\u003E\nAddUrlHere=\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\n\u0026amp;NumberofPosts=5\u003Cbr \/\u003E\n\u0026amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c\u003Cbr \/\u003E\n\u0026amp;_callback=mostcommented\u003Cbr \/\u003E\n\u0026amp;_render=json\"\u003Cbr \/\u003E\ntype=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;span style=\"font-size: 80%; float:left;\"\u0026gt;\u0026lt;a href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html\"\u0026gt;Add this widget\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003E\nHere, change \u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E with your blog URL. If you want to add more characters to the description, modify the \"\u003Cspan style=\"color: red;\"\u003E10\u003C\/span\u003E\" value in red from \"postDescription,\u003Cspan style=\"color: red;\"\u003E10\u003C\/span\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you want a more simple look (without the thumbnails and post snippets), add this script instead:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction stripTags(s,n)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; return s.replace(\/\u0026lt;.*?\u0026gt;\/ig,\"\").split(\/\\s+\/).slice(0,n-1).join(\" \")\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nfunction mostcommented(feed) {\u003Cbr \/\u003E\n\u0026nbsp;var i;\u003Cbr \/\u003E\n\u0026nbsp;for (i = 0; i \u0026lt; feed.count ; i++)\u003Cbr \/\u003E\n\u0026nbsp;{\u003Cbr \/\u003E\nvar postURL = \"'\" + feed.value.items[i].link + \"'\";\u003Cbr \/\u003E\nvar postTitle = feed.value.items[i].title;\u003Cbr \/\u003E\nvar postComments = feed.value.items[i].commentcount;\u003Cbr \/\u003E\nvar postList = '\u0026lt;div class=\"most-commented\"\u0026gt;\u0026lt;ul\u0026gt;\u0026lt;li style=\"margin-bottom: 10px\"\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\"\u003C\/span\u003E + \"\u0026lt;a href=\"+ postURL + '\"\u0026gt;' + postTitle + \"\u0026lt;\/a\u0026gt;\"\u0026nbsp; + '\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003E\n\u0026nbsp;document.write(postList);\u003Cbr \/\u003E\n\u0026nbsp;}\u003Cbr \/\u003E\n\u0026nbsp;}\u003Cbr \/\u003E\n\u0026nbsp;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"http:\/\/pipes.yahoo.com\/pipes\/pipe.run?\u003Cbr \/\u003E\n\u0026nbsp;AddUrlHere=\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\n\u0026amp;NumberofPosts=5\u003Cbr \/\u003E\n\u0026amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c\u003Cbr \/\u003E\n\u0026amp;_callback=mostcommented\u003Cbr \/\u003E\n\u0026amp;_render=json\"\u003Cbr \/\u003E\ntype=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;span style=\"font-size: 80%; float:left;\"\u0026gt;\u0026lt;a href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html\"\u0026gt;Add this widget\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003E\n.... and replace \u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E with your address.\u003Cbr \/\u003E\nTo add the \"comments\" text after the comments number, replace the line in red:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\"\u003C\/blockquote\u003E\nwith:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \" comments\" + \"\u0026lt;\/div\u0026gt;\" \u003C\/blockquote\u003E\nOnce you have finished adding your own settings, press the \"Save\" button to enable the gadget in the sidebar of your blog. That's it! \u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"configure html javascript gadget\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-cjBpQNPMQ60\/U_6G0isVF-I\/AAAAAAAAKUQ\/oqaazvKqA6U\/s1600\/add-blogger-gadget.png\" height=\"316\" title=\"Get a Most Commented Posts Widget For Blogger 3\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nTo change the background colors of the most commented posts, go to \"Template\" \u0026gt; hit the \"Customize\" button and navigate to \"Advanced\" \u0026gt; \"Most Commented\" tab. Here you can pick 5 different colors by clicking on the color boxes:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"blogger template designer\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-4V_1aaQJEXo\/U_6DhzitBoI\/AAAAAAAAKUE\/Q2ajaX16Iek\/s1600\/most-commented-posts-blogger-widget.png\" height=\"312\" title=\"Get a Most Commented Posts Widget For Blogger 4\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nOnce you've selected your favorite color scheme, click the \"Apply to blog\" button to save the changes... and you're done.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EWhy Use the Most Commented Posts widget?\u003C\/h3\u003E\nThe basic psychology in every human is that they want to feel like they belong to a community. That's exactly what this customized widget will bring to your site. No matter what content drew a visitor to see your content, this widget will invite them to join the lively parts of your piece of the internet. This helps to build relationships, with you and with other visitors, and this relationship-building engagement is what you need to start having real value.\u003Cbr \/\u003E\u003Cbr \/\u003E\nTake the time to install this most commented posts widget on your site and you'll see for yourself why this is one of the most useful widgets that is available right now. Enjoy ;)"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/510798521604977025\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html#comment-form","title":"5 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/510798521604977025"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/510798521604977025"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html","title":"How to Display Most Commented Posts in Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s72-c\/most-commented-posts-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-3281876907361775925"},"published":{"$t":"2014-05-02T11:25:00.000-07:00"},"updated":{"$t":"2016-10-30T11:43:50.607-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"google plus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"threaded comments"}],"title":{"type":"text","$t":"How to Enable Google Plus Comments in Blogger"},"content":{"type":"html","$t":"\u003Ch2\u003EHow to Enable Google Plus Comments in Blogger\u003C\/h2\u003E\nLong time ago, Google proudly announced their new integrated commenting system which is now available for users who have created a Google+ profile and connected it with their Blogspot blogs. This way, Blogger users will be able to use Google+ as a commenting system for their blogs, while comments from Google+ will automatically appear on their blogs.\u003Cbr \/\u003E\n\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"google plus commenting system on blogger\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-x9LdH_hd9Jo\/U6oSXCerb6I\/AAAAAAAAJYE\/bipARNMzias\/s1600\/google-plus-commenting-system-on-blogger.png\" title=\"How to Enable Google Plus Comments in Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nFor those who haven't yet upgraded the Blogger profile to a Google+ profile, please see this tutorial on \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/05\/how-to-share-blogger-posts-or-pages-to-google-plus.html\"\u003Ehow to associate a blog to a Google plus page\u003C\/a\u003E. Once you have connected a blog to a Google+ profile, you'll have a new \"\u003Cb\u003EUse Google+ Comments on this blog\u003C\/b\u003E\" setting on the Google+ tab of your blog. To enable the Google plus commenting system, just check the box next to this setting:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"use google+ comments on this blog, blogger tutorial\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-iqr0I_rkZV0\/U5Hs-hAMK7I\/AAAAAAAAJN8\/rVcLCggzoEY\/s1600\/google-plus-comments-on-this-blog-blogger-settings.png\" height=\"294\" title=\"How to Enable Google Plus Comments in Blogger\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nAs soon as you've enabled the feature through your Blogger Dashboard, you'll have the following features:\n\u003Col\u003E\u003Cli\u003E\u003Cb\u003EThreaded commenting system\u003C\/b\u003E: the threaded system will allow a reader to reply to other comments on that post, thus the conversations will become much easier, more effective and more enjoyable\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EPublic and private comments\u003C\/b\u003E: this ensures a better privacy for your visitors which can make their comments either public or private\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EEdit or delete comments\u003C\/b\u003E: your visitors will be able to edit any comments that they wrote even after publishing, so they don't have to write another comment explaining the correction\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EGoogle Plus One (+1) button in comments\u003C\/b\u003E: we can up-vote any comment by clicking this button. This is a great feature which could also help you to get some traffic from Google+\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003E\"Also share on Google+\" check box\u003C\/b\u003E: with this option which is right below the comment editor, we will be able to share a specific comment on Google+ and thus get more traffic!\u003C\/li\u003E\u003C\/ol\u003E\n\u003Ch3\u003EThings to consider before adding the Google Plus Comments in Blogger\u003C\/h3\u003E\n\u003Cul\u003E\u003Cli\u003Ethe Google Plus commenting system won't work for private and adult blogs\u003C\/li\u003E\n\u003Cli\u003EIf you are using a third-party commenting system like Disqus, your comments might not be retained when you enable Google+ Comments\u003C\/li\u003E\n\u003Cli\u003EIf you change domain name, comments will be gone. Therefore, it would be highly recommended to implement the Google Plus commenting system only after you've decided to use a custom domain name\u003C\/li\u003E\n\u003Cli\u003EIf you choose to allow comments pending moderation, you will have to visit the post in order to approve, hide or delete comments before they are publicly visible\u003C\/li\u003E\n\u003Cli\u003EOnly registered Google+ users can comment, this means that visitors who don't have a Google+ account will not be able to comment on your blog\u003C\/li\u003E\u003C\/ul\u003E\n\u003Ch2\u003EHow to Enable Google Plus on Custom Blogger Templates\u003C\/h2\u003E\nIf you are using a custom Blogger template, the comments might not show up after checking the \"\u003Cb\u003EUse Google+ Comments on this blog\u003C\/b\u003E\" setting. In this case, we will need to apply the following trick in order to enable it on custom templates:\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 1. From the \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger Dashboard\u003C\/a\u003E, go to \"Template\" and click on the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press the Ctrl + F keys to open the Blogger search box, then type or paste the following line inside the search box and hit Enter to find it:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/blockquote\u003E\nStep 3. Just below it, paste this code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'\/\u0026gt;\u003C\/blockquote\u003E\nStep 4. That's it! Click on the \"Save template\" button to save the changes and now we should be able to see the Google Plus comments in our Blogspot blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\nHappy commenting!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/3281876907361775925\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/05\/how-to-enable-google-plus-comments-in-blogger.html#comment-form","title":"2 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3281876907361775925"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3281876907361775925"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/05\/how-to-enable-google-plus-comments-in-blogger.html","title":"How to Enable Google Plus Comments in Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/3.bp.blogspot.com\/-x9LdH_hd9Jo\/U6oSXCerb6I\/AAAAAAAAJYE\/bipARNMzias\/s72-c\/google-plus-commenting-system-on-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4614530391238625826"},"published":{"$t":"2014-01-20T13:21:00.003-08:00"},"updated":{"$t":"2016-10-31T11:14:29.199-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"css"},{"scheme":"http://www.blogger.com/atom/ns#","term":"threaded comments"}],"title":{"type":"text","$t":"Add a Cool Style to Blogger Threaded\/Nested Comments"},"content":{"type":"html","$t":"If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually an HTML entity to get that speech bubble look on your comments. \u003Cbr \/\u003E\n\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-OKojsxh9DiY\/Ut2TTm0mfLI\/AAAAAAAAF9w\/qPG-n5elotk\/s1600\/add-background-color-border-avatars-blogger-threaded-comments.png\" height=\"201\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nYou can see a demo \u003Ca href=\"http:\/\/demohelplogger1.blogspot.com\/2014\/01\/lorem-ipsum-03.html?showComment=1390248204410#c3213838701644319004\" target=\"_blank\" rel=\"nofollow\"\u003Ehere\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\nTo have this style in your comments, all you need to do is to paste the below code inside the CSS part of the template, which is between the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;b:skin\u0026gt;\u003C\/span\u003E and \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E tags.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EStyling Simple Nested Comments with CSS\u003C\/h3\u003E\nStep 1. From the \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger Dashboard\u003C\/a\u003E, go to \"Template\" and press the \"Edit HTML\" button\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-5nCDW329k6I\/Us9kWq0wcqI\/AAAAAAAAF1I\/PIe9SpIdtjc\/s1600\/blogger-template-search-box.png\" height=\"131\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 3. Paste or type the following tag inside the search box and hit Enter to find it\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\nStep 4. Just above \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E add this CSS:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n.comments .comment-block {\u003Cbr \/\u003E\nbackground: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E#F9F9F9\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\ncolor: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E#555\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nbox-shadow: 0 4px 10px \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E#EEEEEE\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nposition: relative;\u003Cbr \/\u003E\nmargin-top: 10px;\u003Cbr \/\u003E\nmargin-left: 60px;\u003Cbr \/\u003E\npadding: 10px;\u003Cbr \/\u003E\nborder: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E4px solid #EEEEEE\u003C\/b\u003E\u003C\/span\u003E !important;\u003Cbr \/\u003E\nborder-radius:10px;\u003Cbr \/\u003E\nfont: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E1.190em\u003C\/b\u003E\u003C\/span\u003E\/1.2 Cambria,Georgia,sans-serif;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comment-thread li .comment-block:before {\u003Cbr \/\u003E\nposition: absolute;\u003Cbr \/\u003E\ndisplay: block;\u003Cbr \/\u003E\nleft: -26px;\u003Cbr \/\u003E\ncolor: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E#EEEEEE\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\ncontent: \"\\25C4\";\u003Cbr \/\u003E\nfont-size: 30px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .avatar-image-container {\u003Cbr \/\u003E\nwidth: \u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E60px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nheight: \u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E60px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nmax-height: \u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E60px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nmargin:0px 0px 0 -28px;\u003Cbr \/\u003E\npadding: 0px;\u003Cbr \/\u003E\nborder: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E7px solid #EEEEEE\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nborder-radius:\u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E60px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .avatar-image-container img {\u003Cbr \/\u003E\noverflow:hidden;\u003Cbr \/\u003E\nwidth: \u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E60px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nheight: \u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E60px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\nmax-width: \u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003E60px\u003C\/span\u003E\u003C\/b\u003E;\u003Cbr \/\u003E\nborder:0 !important;\u003Cbr \/\u003E\nborder-radius:\u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E60px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .comment-thread.inline-thread {\u003Cbr \/\u003E\nbackground: none;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .continue {\u003Cbr \/\u003E\nborder-top: 0px solid transparent;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .comments-content .datetime {\u003Cbr \/\u003E\nfloat: right;\u003Cbr \/\u003E\nfont-size: 11px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .comments-content .user a{\u003Cbr \/\u003E\nfont-size: 15px;\u003Cbr \/\u003E\ncolor: #498EC9;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .comments-content .datetime a:hover{\u003Cbr \/\u003E\ncolor: #777;\u003Cbr \/\u003E\ntext-decoration: none;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .comments-content .comment:first-child {\u003Cbr \/\u003E\npadding-top: 0px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .comments-content .comment {\u003Cbr \/\u003E\nmargin-bottom: 0px;\u003Cbr \/\u003E\npadding-bottom: 0px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .continue a {\u003Cbr \/\u003E\npadding: 0px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.comments .comments-content .icon.blog-author {\u003Cbr \/\u003E\nbackground-image: none;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Change Blogger Threaded Comments Background, Border and Colors\u003C\/h3\u003E\n\u003Cul\u003E\u003Cli\u003Ereplace the \u003Cspan style=\"color: #cc0000;\"\u003E#F9F9F9\u003C\/span\u003E value to change the background color of the comments;\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: #cc0000;\"\u003E#555\u003C\/span\u003E to change the text comments color;\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: #cc0000;\"\u003E#EEEEEE\u003C\/span\u003E to change the color of the shadow around comments;\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: #cc0000;\"\u003E4px solid #EEEEEE\u003C\/span\u003E to change the border width (\u003Cspan style=\"color: #cc0000;\"\u003E4px\u003C\/span\u003E), style (\u003Cspan style=\"color: #cc0000;\"\u003Esolid\u003C\/span\u003E) and color (\u003Cspan style=\"color: #cc0000;\"\u003E#EEEEEE\u003C\/span\u003E) around comments;\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan style=\"color: #cc0000;\"\u003E1.190em\u003C\/span\u003E to change the comments font size;\u003C\/li\u003E\n\u003Cli\u003Eto change the arrow color, replace the \u003Cspan style=\"color: #cc0000;\"\u003E#EEEEEE\u003C\/span\u003E value from color: \u003Cspan style=\"color: #cc0000;\"\u003E#EEEEEE;\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003Eto change the border width (\u003Cspan style=\"color: #cc0000;\"\u003E7px),\u003C\/span\u003E style (\u003Cspan style=\"color: #cc0000;\"\u003Esolid\u003C\/span\u003E) and color (\u003Cspan style=\"color: #cc0000;\"\u003E#EEEEEE\u003C\/span\u003E) around avatars, modify this part: \u003Cspan style=\"color: #cc0000;\"\u003E7px solid #EEEEEE;\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003Eto change the avatars size and roundness, change the \u003Cspan style=\"color: #38761d;\"\u003E60px\u003C\/span\u003E value;\u003C\/li\u003E\u003C\/ul\u003E\nHere is a tool from that may help to pick your favorite color: \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/02\/color-code-generator.html\"\u003EColor Code Generator\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 5. Finally, click on the \"Save template\" button... and you're done!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/4614530391238625826\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/01\/cool-style-blogger-threaded-comments.html#comment-form","title":"22 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4614530391238625826"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4614530391238625826"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/01\/cool-style-blogger-threaded-comments.html","title":"Add a Cool Style to Blogger Threaded\/Nested Comments"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-OKojsxh9DiY\/Ut2TTm0mfLI\/AAAAAAAAF9w\/qPG-n5elotk\/s72-c\/add-background-color-border-avatars-blogger-threaded-comments.png","height":"72","width":"72"},"thr$total":{"$t":"22"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-9197483201187554518"},"published":{"$t":"2013-10-21T09:46:00.001-07:00"},"updated":{"$t":"2014-01-16T21:00:23.386-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Top Commentators Widget with Avatars for Blogger"},"content":{"type":"html","$t":"The commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and replying to discussions which leads to more activity in the posts.\u003Cbr \/\u003E\n\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-yjNEFEy-P4k\/UmVZj3iPwjI\/AAAAAAAAEV4\/jJJCsmqDJKE\/s1600\/top-commenters-gadget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"how to add top commenters widget to blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-yjNEFEy-P4k\/UmVZj3iPwjI\/AAAAAAAAEV4\/jJJCsmqDJKE\/s1600\/top-commenters-gadget.png\" title=\"top commenters blogger gadget\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nIt is therefore very important to know which are the most active users of your blog, the users who leave more comments, and for this reason, today I present a great method to display a list with the top commentators.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nThe gadget will look something like this:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-x7saoa-rks0\/UmVYoCWMogI\/AAAAAAAAEVw\/cOmvSeFufvw\/s1600\/top-commentators-gadget-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add top commentators widget to blogger\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-x7saoa-rks0\/UmVYoCWMogI\/AAAAAAAAEVw\/cOmvSeFufvw\/s1600\/top-commentators-gadget-blogger.png\" title=\"top commentators gadget with avatars for blogger\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nThis Top Commentators gadget comes with user's avatar and is done with JavaScript.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003E\nHow to Add the Top Commenters Gadget to Blogger\u003C\/h2\u003E\n\u003Cbr \/\u003E\n1. To add this gadget, you have to go to \u003Cb\u003ELayout\u003C\/b\u003E, click on \u003Ci\u003E\u003Cb\u003EAdd a Gadget\u003C\/b\u003E\u003C\/i\u003E link.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n2. Select the \u003Cb\u003EHTML\/JavaScript\u003C\/b\u003E gadget and copy\/paste within the empty box the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\n.top-commentators {\u003Cbr \/\u003E\nmargin: 3px 0;\u003Cbr \/\u003E\nborder-bottom: 1px dotted #ccc;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.avatar-top-commentators {\u003Cbr \/\u003E\nvertical-align:middle;\u003Cbr \/\u003E\nborder-radius: 30px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.top-commentators .commenter-link-name {\u003Cbr \/\u003E\npadding-left:0;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\n\u003Cb\u003Evar maxTopCommenters = 8;\u0026nbsp;\u003C\/b\u003E\u003Cbr \/\u003E\nvar minComments = 1;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003Cbr \/\u003E\nvar numDays = 0;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003Cbr \/\u003E\nvar excludeMe = true;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003Cbr \/\u003E\nvar excludeUsers = [\"Anonymous\", \"\u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003Esomeotherusertoexclude\u003C\/span\u003E\u003C\/b\u003E\"];\u0026nbsp;\u003Cbr \/\u003E\nvar maxUserNameLength = 42;\u003Cbr \/\u003E\n\/\/\u003Cbr \/\u003E\nvar txtTopLine = '\u0026lt;b\u0026gt;[#].\u0026lt;\/b\u0026gt; [image] [user] ([count])';\u003Cbr \/\u003E\nvar txtNoTopCommenters = 'No top commentators at this time.';\u003Cbr \/\u003E\nvar txtAnonymous = '';\u003Cbr \/\u003E\n\/\/\u003Cbr \/\u003E\n\u003Cb\u003Evar sizeAvatar = 33;\u003C\/b\u003E\u003Cbr \/\u003E\nvar cropAvatar = true;\u003Cbr \/\u003E\n\/\/\u003Cbr \/\u003E\nvar urlNoAvatar = \"http:\/\/2.bp.blogspot.com\/-pWdg8wLsedo\/UmVWQxLdwrI\/AAAAAAAAEVk\/-z7YgKykkuU\/s1600\/avatar_blue_m_96.png\" + sizeAvatar;\u003Cbr \/\u003E\nvar urlAnoAvatar = 'http:\/\/1.bp.blogspot.com\/-6B6DXCp8dek\/UmVPm7D2mOI\/AAAAAAAAEVU\/Xz-3z2nRpUk\/s1600\/avatar1.png' + sizeAvatar;\u003Cbr \/\u003E\nvar urlMyProfile = '';\u003Cbr \/\u003E\nvar urlMyAvatar = '';\u003Cbr \/\u003E\nif(!Array.indexOf) {\u003Cbr \/\u003E\n\u0026nbsp;Array.prototype.indexOf=function(obj) {\u003Cbr \/\u003E\n\u0026nbsp; for(var i=0;i\u0026lt;this.length;i++) if(this[i]==obj) return i;\u003Cbr \/\u003E\n\u0026nbsp; return -1;\u003Cbr \/\u003E\n}}\u003Cbr \/\u003E\nfunction replaceTopCmtVars(text, item, position)\u003Cbr \/\u003E\n{\u003Cbr \/\u003E\n\u0026nbsp; if(!item || !item.author) return text;\u003Cbr \/\u003E\n\u0026nbsp; var author = item.author;\u003Cbr \/\u003E\n\u0026nbsp; var authorUri = \"\";\u003Cbr \/\u003E\n\u0026nbsp; if(author.uri \u0026amp;\u0026amp; author.uri.$t != \"\")\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; authorUri = author.uri.$t;\u003Cbr \/\u003E\n\u0026nbsp; var avaimg = urlAnoAvatar;\u003Cbr \/\u003E\n\u0026nbsp; var bloggerprofile = \"http:\/\/www.blogger.com\/profile\/\";\u003Cbr \/\u003E\n\u0026nbsp; if(author.gd$image \u0026amp;\u0026amp; author.gd$image.src \u0026amp;\u0026amp; authorUri.substr(0,bloggerprofile.length) == bloggerprofile)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; avaimg = author.gd$image.src;\u003Cbr \/\u003E\n\u0026nbsp; else {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var parseurl = document.createElement('a');\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(authorUri != \"\") {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; parseurl.href = authorUri;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; avaimg = 'http:\/\/www.google.com\/s2\/favicons?domain=' + parseurl.hostname;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; if(urlMyProfile != \"\" \u0026amp;\u0026amp; authorUri == urlMyProfile \u0026amp;\u0026amp; urlMyAvatar != \"\")\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; avaimg = urlMyAvatar;\u003Cbr \/\u003E\n\u0026nbsp; if(avaimg == \"http:\/\/img2.blogblog.com\/img\/b16-rounded.gif\" \u0026amp;\u0026amp; urlNoAvatar != \"\")\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; avaimg = urlNoAvatar;\u003Cbr \/\u003E\n\u0026nbsp; var newsize=\"s\"+sizeAvatar;\u003Cbr \/\u003E\n\u0026nbsp; avaimg = avaimg.replace(\/\\\/s\\d\\d+-c\\\/\/, \"\/\"+newsize+\"-c\/\");\u003Cbr \/\u003E\n\u0026nbsp; if(cropAvatar) newsize+=\"-c\";\u003Cbr \/\u003E\n\u0026nbsp; avaimg = avaimg.replace(\/\\\/s\\d\\d+(-c){0,1}\\\/\/, \"\/\"+newsize+\"\/\");\u003Cbr \/\u003E\n\u0026nbsp; var authorName = author.name.$t;\u003Cbr \/\u003E\n\u0026nbsp; if(authorName == 'Anonymous' \u0026amp;\u0026amp; txtAnonymous != '' \u0026amp;\u0026amp; avaimg == urlAnoAvatar)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; authorName = txtAnonymous;\u003Cbr \/\u003E\n\u0026nbsp; var imgcode = '\u0026lt;img class=\"avatar-top-commentators\" height=\"'+sizeAvatar+'\" width=\"'+sizeAvatar+'\" title=\"'+authorName+'\" src=\"'+avaimg+'\" \/\u0026gt;';\u003Cbr \/\u003E\n\u0026nbsp; if(authorUri!=\"\") imgcode = '\u0026lt;a href=\"'+authorUri+'\"\u0026gt;'+imgcode+'\u0026lt;\/a\u0026gt;';\u003Cbr \/\u003E\n\u0026nbsp; if(maxUserNameLength \u0026gt; 3 \u0026amp;\u0026amp; authorName.length \u0026gt; maxUserNameLength)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; authorName = authorName.substr(0, maxUserNameLength-3) + \"...\";\u003Cbr \/\u003E\n\u0026nbsp; var authorcode = authorName;\u003Cbr \/\u003E\n\u0026nbsp; if(authorUri!=\"\") authorcode = '\u0026lt;a class=\"commenter-link-name\" href=\"'+authorUri+'\"\u0026gt;'+authorcode+'\u0026lt;\/a\u0026gt;';\u003Cbr \/\u003E\n\u0026nbsp; text = text.replace('[user]', authorcode);\u003Cbr \/\u003E\n\u0026nbsp; text = text.replace('[image]', imgcode);\u003Cbr \/\u003E\n\u0026nbsp; text = text.replace('[#]', position);\u003Cbr \/\u003E\n\u0026nbsp; text = text.replace('[count]', item.count);\u003Cbr \/\u003E\n\u0026nbsp; return text;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nvar topcommenters = {};\u003Cbr \/\u003E\nvar ndxbase = 1;\u003Cbr \/\u003E\nfunction showTopCommenters(json) {\u003Cbr \/\u003E\n\u0026nbsp; var one_day=1000*60*60*24;\u003Cbr \/\u003E\n\u0026nbsp; var today = new Date();\u003Cbr \/\u003E\n\u0026nbsp; if(urlMyProfile == \"\") {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var elements = document.getElementsByTagName(\"*\");\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var expr = \/(^| )profile-link( |$)\/;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; for(var i=0 ; i\u0026lt;elements.length ; i++)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if(expr.test(elements[i].className)) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; urlMyProfile = elements[i].href;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; break;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; if(json \u0026amp;\u0026amp; json.feed \u0026amp;\u0026amp; json.feed.entry \u0026amp;\u0026amp; json.feed.entry.length) for(var i = 0 ; i \u0026lt; json.feed.entry.length ; i++ ) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var entry = json.feed.entry[i];\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(numDays \u0026gt; 0) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var datePart = entry.published.$t.match(\/\\d+\/g);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var days = Math.ceil((today.getTime()-cmtDate.getTime())\/(one_day));\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; if(days \u0026gt; numDays) break;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var authorUri = \"\";\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(entry.author[0].uri \u0026amp;\u0026amp; entry.author[0].uri.$t != \"\")\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; authorUri = entry.author[0].uri.$t;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(excludeMe \u0026amp;\u0026amp; authorUri != \"\" \u0026amp;\u0026amp; authorUri == urlMyProfile)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; continue;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var authorName = entry.author[0].name.$t;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(excludeUsers.indexOf(authorName) != -1)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; continue;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var hash=entry.author[0].name.$t + \"-\" + authorUri;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(topcommenters[hash])\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; topcommenters[hash].count++;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; else {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var commenter = new Object();\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; commenter.author = entry.author[0];\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; commenter.count = 1;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; topcommenters[hash] = commenter;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; if(json \u0026amp;\u0026amp; json.feed \u0026amp;\u0026amp; json.feed.entry \u0026amp;\u0026amp; json.feed.entry.length \u0026amp;\u0026amp; json.feed.entry.length == 200) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; ndxbase += 200;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;script type=\"text\/javascript\" src=\"http:\/\/'+window.location.hostname+'\/feeds\/comments\/default?redirect=false\u0026amp;max-results=200\u0026amp;start-index='+ndxbase+'\u0026amp;alt=json-in-script\u0026amp;callback=showTopCommenters\"\u0026gt;\u0026lt;\/'+'script\u0026gt;');\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; return;\u003Cbr \/\u003E\n\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; \/\/ convert object to array of tuples\u003Cbr \/\u003E\n\u0026nbsp; var tuplear = [];\u003Cbr \/\u003E\n\u0026nbsp; for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);\u003Cbr \/\u003E\n\u0026nbsp; tuplear.sort(function(a, b) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(b[1].count-a[1].count)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; return b[1].count-a[1].count;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; return (a[1].author.name.$t.toLowerCase() \u0026lt; b[1].author.name.$t.toLowerCase()) ? -1 : 1;\u003Cbr \/\u003E\n\u0026nbsp; });\u003Cbr \/\u003E\n\u0026nbsp; var realcount = 0;\u003Cbr \/\u003E\n\u0026nbsp; for(var i = 0; i \u0026lt; maxTopCommenters \u0026amp;\u0026amp; i \u0026lt; tuplear.length ; i++) {\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; var item = tuplear[i][1];\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; if(item.count \u0026lt; minComments)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; break;\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;di'+'v class=\"top-commentators\"\u0026gt;');\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write('\u0026lt;\/d'+'iv\u0026gt;');\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; realcount++;\u003Cbr \/\u003E\n\u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; if(!realcount)\u003Cbr \/\u003E\n\u0026nbsp;\u0026nbsp;\u0026nbsp; document.write(txtNoTopCommenters);\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\ndocument.write('\u0026lt;script type=\"text\/javascript\" src=\"http:\/\/'+window.location.hostname+'\/feeds\/comments\/default?redirect=false\u0026amp;max-results=200\u0026amp;alt=json-in-script\u0026amp;callback=showTopCommenters\"\u0026gt;\u0026lt;\/'+'script\u0026gt;');\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\n\n\u003C\/blockquote\u003E\n3. Now you just have to save changes and you're done!\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch3\u003E\nConfiguration \u003C\/h3\u003E\n- To modify the number of users displayed in the gadget, look for \u003Cb\u003Evar maxTopCommenters = 8;\u003C\/b\u003E and change \u003Cb\u003E8\u003C\/b\u003E with any number you want.\u003Cbr \/\u003E\n- To change the avatar size of the commenters, look for \u003Cb\u003Evar sizeAvatar = 33;\u003C\/b\u003E and change number \u003Cb\u003E33\u003C\/b\u003E with the number of pixels you want.\n\u003C!-- adsense --\u003E\n- To hide your name or some other username, replace the\u0026nbsp;\u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003Esomeotherusertoexclude\u003C\/span\u003E\u003C\/b\u003E text between the quotes (to add more, add another comma after the text in red, then type the username you want to exclude between the quotes)"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/9197483201187554518\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/10\/top-commentators-blogger-gadget-with-avatars.html#comment-form","title":"6 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/9197483201187554518"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/9197483201187554518"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/10\/top-commentators-blogger-gadget-with-avatars.html","title":"Top Commentators Widget with Avatars for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-yjNEFEy-P4k\/UmVZj3iPwjI\/AAAAAAAAEV4\/jJJCsmqDJKE\/s72-c\/top-commenters-gadget.png","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-2619594340590070450"},"published":{"$t":"2013-04-26T08:00:00.003-07:00"},"updated":{"$t":"2016-05-25T06:09:28.231-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Expandable Recent Comments Widget for Blogger\/Blogspot"},"content":{"type":"html","$t":"The Expandable Recent Comments widget for Blogger is a very accessible widget that can be collapsed or expanded through user interaction, so we don't have to click the author's name or post title link in order to read the content of a comment. The expanding content can be shown or hidden by clicking the \nplus\/minus icon or by hitting the \"Show all\" or \"Hide all\" button.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-ElzFJhTSYa0\/UXqRp7nxPqI\/AAAAAAAADTo\/djR3CMtbII4\/s1600\/expandable-recent-comments-widget-for-blogger-blogspot.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"recent comments widget, blogger gadgets, blogspot tricks\" border=\"0\" height=\"320\" src=\"https:\/\/4.bp.blogspot.com\/-ElzFJhTSYa0\/UXqRp7nxPqI\/AAAAAAAADTo\/djR3CMtbII4\/s320\/expandable-recent-comments-widget-for-blogger-blogspot.png\" title=\"recent comments widget for blogger blogspot with expand\/collapse function\" width=\"247\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nTo add the Expandable Recent Comments widget for Blogger, please follow the next steps below:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EAdding Expandable Recent Comments Widget to Blogger\u003C\/h2\u003E\n1. From your \u003Ca href=\"https:\/\/www.blogger.com\/ rel=\"nofollow\"\"\u003EBlogger dashboard\u003C\/a\u003E, go to \"Layout\", then click on \"Add a Gadget\" link:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s1600\/blogger-layout-add+a+gadget-how-to.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"148\" src=\"https:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s640\/blogger-layout-add+a+gadget-how-to.png\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n2. When the pop-up window appears, scroll down and select the \"HTML\/JavaScript\" widget:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"196\" src=\"https:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s400\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\n3. Copy and paste this code inside the empty box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;.row-div {margin-bottom:10px;}.comment-header {margin:10px 0;}.comment-box{margin:0px;padding:0px;font-size:0.9em;height:330px;overflow:auto;}.comments1{padding:3px;border-left:1px dashed #A6A6A6;color: #888888;font-style: italic;padding:0px 10px 10px 10px;margin-bottom:10px;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;div style=\"text-align: center\" class=\"comment-header\"\u0026gt;\u0026lt;input class=\"comment-button\" id=\"commshowall\" type=\"button\" onclick=\"if (this.value == \u0026amp;#39;Show all\u0026amp;#39;) { unfold_all(this); this.value=\u0026amp;#39;Hide all\u0026amp;#39;; } else { fold_all(this); this.value=\u0026amp;#39;Show all\u0026amp;#39;; }\" value=\"Show all\" \/\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div class=\"comment-box\"\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Evar tgl=false;var title_arr=new Array();var arr=0;var err=\"[err]\";var icon_expand=\"http:\/\/4.bp.blogspot.com\/-MxGZTemGwiI\/UXqAWpaVj0I\/AAAAAAAADTU\/-hwcbgEiCEI\/s1600\/icon-plus.png\";var icon_collapse=\"http:\/\/1.bp.blogspot.com\/-6nL3BgBD6pM\/UXqAWZQJIBI\/AAAAAAAADTQ\/7IjUXA0avYU\/s1600\/icon-minus+copy.png\";var maxcomments=20;function real_posttitle(postid){for(var i=0;i\u0026lt;title_arr.length;i++){if(title_arr[i][0]==postid)return title_arr[i][1];}\u003Cbr \/\u003Ereturn err;}\u003Cbr \/\u003Efunction showrecentposts(json){var numposts=999999;for(i=0;i\u0026lt;numposts;i++){var entry=json.feed.entry[i];var postid;var title;if(i==json.feed.entry.length)break;for(var k=0;k\u0026lt;200;k++){if(entry.link[k].rel=='self'){postid=entry.link[k].href;postid=postid.substr(postid.lastIndexOf(\"\/\")+1,100);}\u003Cbr \/\u003Eif(entry.link[k].rel=='alternate'){title=entry.link[k].title;break;}}\u003Cbr \/\u003Etitle_arr[arr]=postid+\"\u0026amp;#176;\"+title;title_arr[arr]=title_arr[arr].split(\"\u0026amp;#176;\");++arr;}}\u003Cbr \/\u003Efunction unfold(el){var comid=el.id.substr(8,10);if(el.src==icon_expand){el.src=icon_collapse;document.getElementById(\"com_id\"+comid).style.display=\"block\";}else{el.src=icon_expand;document.getElementById(\"com_id\"+comid).style.display=\"none\";}}\u003Cbr \/\u003Efunction unfold_all(el){try{for(var i=0;i\u0026lt;maxcomments;i++){document.getElementById(\"com_id\"+i).style.display=\"block\";document.getElementById(\"click_id\"+i).src=icon_collapse;}}catch(e){;}\u003Cbr \/\u003Eel.value='Show all';}\u003Cbr \/\u003Efunction fold_all(el){try{for(var i=0;i\u0026lt;maxcomments;i++){document.getElementById(\"com_id\"+i).style.display=\"none\";document.getElementById(\"click_id\"+i).src=icon_expand;}}catch(e){;}\u003Cbr \/\u003Eel.value='Hide all';}\u003Cbr \/\u003Efunction showrecentcomments(json){var numcomments=999999;var postid;var i=0;for(i=0;i\u0026lt;numcomments;i++){var entry=json.feed.entry[i];var alturl;var anonymous=false;if(i==json.feed.entry.length)break;for(var k=0;k\u0026lt;entry.link.length;k++){if(entry.link[k].rel=='self'){postid=entry.link[k].href.split(\"\/\");postid=postid[5];}\u003Cbr \/\u003Eif(entry.link[k].rel=='alternate'){alturl=entry.link[k].href;break;}}\u003Cbr \/\u003Evar postlink=alturl.split(\"#\");postlink=postlink[0];var linktext=postlink.split(\"\/\");linktext=linktext[5];linktext=linktext.split(\".html\");linktext=linktext[0];var profilelink=\"\";try{profilelink=entry.author[0].uri.$t;}catch(e)\u003Cbr \/\u003E{anonymous=true;};var posttitle=real_posttitle(postid);if(posttitle==err){posttitle=linktext.replace(\/-\/g,\" \");}\u003Cbr \/\u003Evar commentdate=entry.published.$t;var cdyear=commentdate.substring(0,4);var cdmonth=commentdate.substring(5,7);var cdday=commentdate.substring(8,10);var ctime=commentdate.substr(11,5);var monthnames=new Array();monthnames[1]=\"january\";monthnames[2]=\"february\";monthnames[3]=\"march\";monthnames[4]=\"april\";monthnames[5]=\"may\";monthnames[6]=\"june\";monthnames[7]=\"july\";monthnames[8]=\"august\";monthnames[9]=\"september\";monthnames[10]=\"october\";monthnames[11]=\"november\";monthnames[12]=\"december\";if(\"content\"in entry){var comment=entry.content.$t;}\u003Cbr \/\u003Eelse\u003Cbr \/\u003Eif(\"summary\"in entry){var comment=entry.summary.$t;}else var comment=\"\";if(i\u0026lt;maxcomments){if(tgl){tgl=false;var cl=\"row-a\";}else{tgl=true;var cl=\"row-b\";}\u003Cbr \/\u003Edocument.write('\u0026lt;div class=\"'+cl+' row-div\"\u0026gt;\u0026lt;img id=\"click_id'+i);document.write('\" style=\"cursor:pointer;\" onclick=\"unfold(this);\"');document.write('src=\"'+icon_expand+'\" \/\u0026gt;\u0026amp;nbsp;');document.write('On '+cdday+' '+monthnames[parseInt(cdmonth,10)]+' '+cdyear);document.write(', at '+ctime+', ');if(anonymous==false){document.write('\u0026lt;a href=\"'+profilelink+'\"\u0026gt;'+entry.author[0].name.$t+'\u0026lt;\/a\u0026gt; ');}else{document.write(entry.author[0].name.$t+' ');}\u003Cbr \/\u003Edocument.write('commented on \u0026lt;a href=\"'+alturl+'\"\u0026gt;'+posttitle+'\u0026lt;\/a\u0026gt;');document.write('\u0026lt;\/div\u0026gt;');document.write('\u0026lt;div class=\"comments1\" id=\"com_id'+i+'\" style=\"display:none;\"\u0026gt;'+comment+'\u0026lt;\\\/div\u0026gt;');}}\u003Cbr \/\u003Edocument.getElementById(\"numcom\").innerHTML=i;}\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u0026lt;script type=\"text\/javascript\"\u0026nbsp; src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\/feeds\/posts\/default?start-index=1\u0026amp;max-results=999999\u0026amp;alt=json-in-script\u0026amp;callback=showrecentposts\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;script type=\"text\/javascript\"\u0026nbsp; src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\/feeds\/comments\/default?start-index=1\u0026amp;max-results=999999\u0026amp;alt=json-in-script\u0026amp;callback=showrecentcomments\"\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\nNote: Replace \u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E with the URL address of your blog or site.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n4. Save the expandable \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/recent-comments-widget-for-blogger.html\"\u003Erecent comments widget for Blogger\u003C\/a\u003E \/ Blogspot by clicking on the 'Save' button... and you're done!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/2619594340590070450\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/04\/expandable-recent-comments-widget-for.html#comment-form","title":"10 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2619594340590070450"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2619594340590070450"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/04\/expandable-recent-comments-widget-for.html","title":"Expandable Recent Comments Widget for Blogger\/Blogspot"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/4.bp.blogspot.com\/-ElzFJhTSYa0\/UXqRp7nxPqI\/AAAAAAAADTo\/djR3CMtbII4\/s72-c\/expandable-recent-comments-widget-for-blogger-blogspot.png","height":"72","width":"72"},"thr$total":{"$t":"10"}}]}});