Comments RSS feed address after turning on HTTPS for a blog with a custom domains

<b>This article documents the change the Comments RSS feed associated with blog, when you switch on the HTTPS option for a blog with a custom domain.</b><br /><b><br /></b> <b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><br /><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_uAPOOuDUSYn7mnAklUAEPqpizbJ9WzHtWQxLb-mBhjglIsXNqvbRpa96GSmZCVLAZAU6JHU84j2dXamexiuMpxDccaHdVRLDwKHF8PMBtDZnEvQY63NyGAwC4xx8UwJyv34o3ovAJmF/s1600/rss-blog-comments-feed-address-change-https-enablement.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="1570" data-original-width="1570" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_uAPOOuDUSYn7mnAklUAEPqpizbJ9WzHtWQxLb-mBhjglIsXNqvbRpa96GSmZCVLAZAU6JHU84j2dXamexiuMpxDccaHdVRLDwKHF8PMBtDZnEvQY63NyGAwC4xx8UwJyv34o3ovAJmF/s200/rss-blog-comments-feed-address-change-https-enablement.jpg" width="200" /></a></div>If your blog has a custom domain, you now have an option to switch on HTTPS to make it more secure.</div><div><br /></div><div>If you do this, then the RSS feed address for your blog's comments changes.</div><div><br /></div><div>This may be handled graciously by your template.  But if you use a service like Feedburner to display recent comments in an HTML gadget, then the gadget will break unless you update.    Well - mine did anyways.   Maybe your settings are different.</div><div><br /><br /></div><h2>What was your blog's RSS comment feed address</h2><div>Articles published by various people, including Google, say that your blog has various RSS feeds, including  2 site comments feeds.<br /><br /><b>Atom</b>:   http://yourCustom.Domain/feeds/comments/default<br /><b>RSS</b>:     http://yourCustom.Domain/feeds/comments/default?alt=rss<br /><br />(substituting your actual custom domain   eg myBlog.com   for yourCustom.Domain)</div><div><br />However after switching HTTPS on, I found that these were simply re-directing to the homepage - and this was causing any gadgets which used the comments feed to fail with a message like "the RSS feed is no longer available for display".    (I forgot to take a screenshot before fixing it - and now it's fixed I cannot un-fix it because Feedburner won't let me save an invalid feed address!)</div><div><br /><br /><h2>What is your blog's RSS comment feed address</h2><div>After trying various options, I have found that for my custom-domain blogs with HTTPS enabled, the correct RSS address for comments feeds is<br /><br />RSS:     http<span style="color: red;"><b>s://www.</b></span>yourCustom.Domain/feeds/comments/default?alt=rss</div><span style="font-family: "times new roman";">(Again - substituting your actual custom domain   eg myBlog.com   for yourCustom.Domain)</span><br /><br /><br /></div><div>This one may work also - I haven't had a need to test it properly, so don't want to say for certain:<br />Atom:   http<b><span style="color: red;">s://www.</span></b>yourCustom.Domain/feeds/comments/default  <br /><br /><div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><div style="margin: 0px;"><br /></div><div style="margin: 0px;"><br /></div><div style="margin: 0px;"><br /></div></div></div><div><br /></div><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">Why RSS / Subscribe to Posts is important for your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/12/adding-rss-feed-icon-to-your-blog-using.html">Adding an RSS feed icon to your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/07/finding-feed-address-for-blogs-rss-feed.html">Finding the RSS feed address for your blog</a>.<br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/03/follow-by-email-gadget-easy-way-to-add.html">The Follow-by-Email gadget:  a very simple way to give your readers access to blog-updates by email</a>

Comments RSS feed address after turning on HTTPS for a blog with a custom domains

This article documents the change the Comments RSS feed associated with blog, when you switch on the HTTPS option for a blog with a custom d...

Read more »

Show/Hide Blogger and Google+ Comments System With Toggle

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.<br /><br />In 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+.<br /><br />Previously, 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.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="google plus comments, blogger" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivLcoWq-r6ETXK06-n4mJfAd4Txis9WJBiiZGZeaY067On6MHP4KVSTC1EaMMKzaxlNzDhwq3DbgsRA9le8yHwinZlNjFYHN3EYQrpdLdNG-hZkRg5uLDJkBhYqLQvl5FSaeCfZjaCCIbZ/s1600/use-google-plus-blogger-comments-together-with-toggle.png" title="Show/Hide Blogger and Google+ Comments System With Toggle" width="320" /></div><div style="text-align: center;"><a class="demo-link" href="http://helploggertestblog.blogspot.com/2013/12/lorem-ipsum-viii.html" rel="nofollow" target="_blank">DEMO</a></div><br /><h3>How to Integrate Blogger and Google Plus Comments</h3>To 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 <b><b:include data='post' name='post'/></b>. So, let's start adding it:<br /><br />Step 1. Log into your Blogger account and select your blog > go to 'Template' and press the 'Edit HTML' button on the right side.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Step 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:<br /><blockquote class="tr_bq"><b:include data='post' name='post'/></blockquote>Step 3. Just after <b:include data='post' name='post'/> add the following code:<br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipGD6Kaifd8-mIAL-_sPi0SVERG_CYB33Qwb0uLfBdpWXmCGbdOEFOaU4wIerlR3A0E5Su1CJ6lPjbkfV1yXnIomLmRBWTs5amDlMJyiKkRODoNicvCxBpZPuZu3dspM6_64pD1VLsh0aP/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style><br /><div class='comments-icons'><br />Show Comments: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7N3w9Wz98TdiMwztVt6-b1oB20L21768B9mIbIlaHTz6EO8ZCAqWReW8f3FSURBn9GpG5vnEMkcr_oSi6X2NCROU0T1_LWn_DjZWkBjJxx1ippA-snFglo-wXkaYVg1sKUwmfh1c_1aG4/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYRlLUbn9Read63atHdZIKOGOE4DSBtZFOK-Bw0xxUPY87yvEzELGJ6fxSolZko9uSJO9ECKE0Q1IzkPM8HBzQNILf2jDOoGhVSzzCul2iiQh9-md_fz5AR5TBQsOK9vLR7FENfKD54bNH/s1600/blogger-logo.png' width='35'/></a><br /></div><br /><div id='gplus-comments-visibility'><br /><div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' <span style="color: #cc0000;">data-width='550'</span> expr:data-href='data:post.url'/><br /></div>       <br /></b:if></blockquote><br />Note: <span style="color: #cc0000;">data-width</span> 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.<br /><br />Step 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. <br /><br />Please 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 <span style="background-color: yellow;"></head></span> tag using the HTML template editor: <br /><blockquote class="tr_bq"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/></blockquote><h5>That's it!</h5>From 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.

Show/Hide Blogger and Google+ Comments System With Toggle

Many Blogger site owners received the new Google+ Comment System pretty negatively because it forced all commenting users to create their ow...

Read more »

Blog Comments and AdSense

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJIvW7XtDJibCgBpI5S4Yn1sPom93q2F3UtjtY_wv0CxvijHDkGv1vgJxwyV3p2DIWYdXFd9Kc1Kg437cnzRUccUu7VX6E-iT8_jMQVzBgPnDTSx4ED3jO5EfG8-RCdzeeb8u7-kD0iB4/s1600/PaperPenWriting.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJIvW7XtDJibCgBpI5S4Yn1sPom93q2F3UtjtY_wv0CxvijHDkGv1vgJxwyV3p2DIWYdXFd9Kc1Kg437cnzRUccUu7VX6E-iT8_jMQVzBgPnDTSx4ED3jO5EfG8-RCdzeeb8u7-kD0iB4/s1600/PaperPenWriting.jpg" width="200" /></a></div>Today's post isn't one I planned to write, in fact, I had planned to update some older posts to reflect some of the recent changes in AdSense, but after finding this comment (you'll see it later in the post) waiting to be published, I realized that it might be wise to remind publishers that the comments they allow to be posted on their blogs matter.<br /><br />You see, with AdSense, everything on your site matters. Whether it's your written contents, or images and videos, or even the comments your visitors leave. Visitor comments are considered "user generated content" and as publishers, we are responsible for contents generated by users of our sites.<br /><br /><b><span style="color: red;">What that means is that as a publisher, if you are using AdSense on your site, then you need to monitor and review all comments that are posted on your articles. Because even those comments can get ad serving disabled on your site.</span></b><br /><a name="more"></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTA3mlS4kr2kPdBujrPlnl1kHV1_2pKmC0lxykJAGOB7eOMfcK6AUdAtGObhiO1t8W1Ve-hy8wyfuIj6mAURjtWsKEdwJrUvlAObgBSL6Dz-l3smyTeK9hOel7FNtqfbtQFz7EMC9O1N0/s1600/QuestionStickGirl.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTA3mlS4kr2kPdBujrPlnl1kHV1_2pKmC0lxykJAGOB7eOMfcK6AUdAtGObhiO1t8W1Ve-hy8wyfuIj6mAURjtWsKEdwJrUvlAObgBSL6Dz-l3smyTeK9hOel7FNtqfbtQFz7EMC9O1N0/s1600/QuestionStickGirl.jpg" width="126" /></a>Comments that contain a lot of profanity, or provide links to prohibited or illegal contents are just as much a policy violation on your site, as that content would be if you posted it yourself. You need to set your comment system up so that you can review and approve comments before they appear on your blog or site, no matter what type of comment system you are using. For Adsense publishers, there isn't really an option - if you allow comments to be posted directly to your site without your review, you are opening yourself up to several kinds of abuse (spam comments is only one issue), and you are placing undue risk on your AdSense account.<br /><br />The type of comments I refuse to publish on my articles are:<br /><br /><ul><li>obvious spam</li><li>comments containing links to spammy websites</li><li>comments with profanity</li><li>comments where it's clear the person hasn't read the article</li><li>bot comments (also considered spam)</li><li>comments containing affiliate links</li><li>comments containing hate speech</li><li>comments containing potentially libelous statements</li></ul>And it's that last bullet point that I consider to be one of the more difficult ones to decide on. At least, it probably is for a lot of ordinary publishers.<br /><br />You see, a libelous statement can be one where false allegations are made, and if you don't know whether an accusation is false or not, you may not even know if the statement is libelous or not. I refuse to publish comments that might contain libel, such as the one I deleted:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYOzJayTwIVFOTdtKgX79AtYI5lr391cXCp3VFwNfa0ycN6DVAI_AVdb6EsDwnnk9NZAiTsk5m3pMpomNHkWFVaUsaEfxk5DKatP1XT0Sh3V_F6HGnvZd3iClXL1RbtN3-MXuWO1ERXg/s1600/comments.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYOzJayTwIVFOTdtKgX79AtYI5lr391cXCp3VFwNfa0ycN6DVAI_AVdb6EsDwnnk9NZAiTsk5m3pMpomNHkWFVaUsaEfxk5DKatP1XT0Sh3V_F6HGnvZd3iClXL1RbtN3-MXuWO1ERXg/s1600/comments.jpg" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"></div>Firstly, because the grammar is so bad, I can't really be sure what this person is trying to say exactly. I've blurred some of it out since it actually doesn't make much sense. Secondly, several references are made to AdSense and Google with respect to them not paying "billions of publishers" (adsense only has just over 2 <i><b>million</b></i> publishers, so that statement is a bold lie, since there aren't "billions" of publishers in the first place) and to "sending" fake traffic (Google do not "send" anyone, they provide search results, and AdSense doesn't bring traffic to your site at all). <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQURbnA5oIS931E0LA-CZ99eC9qfklqNS8YErmWTVaE8ojUs_zfrsIa57FuudTkidzYeGB_QoOlr1OyECaks6vt4ksjZEmSXYUO9LwkUhAPhEQJuhQN0kmb8fPAzCDHC3gJi-vLUlPF1Q/s1600/StickfigureBoy.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQURbnA5oIS931E0LA-CZ99eC9qfklqNS8YErmWTVaE8ojUs_zfrsIa57FuudTkidzYeGB_QoOlr1OyECaks6vt4ksjZEmSXYUO9LwkUhAPhEQJuhQN0kmb8fPAzCDHC3gJi-vLUlPF1Q/s1600/StickfigureBoy.jpg" width="120" /></a></div>Because these statements might be considered libel (and possibly defamation) I refuse to have them published on my blogs. Some people might consider that going a little overboard in terms of safety, but when it comes to AdSense, there it's always better to err on the side of caution (and you'll note, that I don't even have AdSense on this blog).  Today I published part of a screenshot, although I am hesitant to do even that, but publishing this sort of thing as standard textual content in the comments sections meas it is searchable by crawlers, and indexed as well. Not only do I not want to be responsible for publishing libel on my site, I don't think it's fair to publish unfounded statements that come with no proof attached.<br /><br /><blockquote class="tr_bq"><div class="vk_ans" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: xx-large !important; font-weight: lighter !important; margin-bottom: 0px;"><span data-dobid="hdw">def·a·ma·tion</span></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: small;"><div class="lr_dct_ent_ph" style="font-size: large;"><span class="lr_dct_ph">ˌdefəˈmāSHən/</span><span class="lr_dct_spkr lr_dct_spkr_off" data-log-string="pronunciation-icon-click" jsaction="dob.p" style="display: inline-block; height: 16px; margin: 0px 2px 4px 5px; opacity: 0.55; vertical-align: middle; width: 16px;" title="Listen"><input height="14" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAi0lEQVQokWNgQAYyQFzGsIJBnwED8DNcBpK+DM8YfjMUokqxMRxg+A9m8TJsBLLSEFKMDCuBAv/hCncxfGWQhUn2gaVAktkMXkBSHmh0OwNU8D9csoHhO4MikN7BcAGb5H+GYiDdCTQYq2QubkkkY/E6CLtXdiJ7BTMQMnAHXxFm6IICvhwY8AYQLgCw2U9d90B8BAAAAABJRU5ErkJggg==" type="image" width="14" /></span></div><div><div class="lr_dct_sf_h" style="padding-top: 10px;"><i>noun</i></div><div class="xpdxpnd vk_gy" data-mh="-1" style="-webkit-transition: max-height 0.3s; color: rgb(135, 135, 135) !important; max-height: 0px; overflow: hidden; transition: max-height 0.3s;"><b></b><b></b></div><ol class="lr_dct_sf_sens" style="border: 0px; margin: 0px; padding: 0px 0px 0px 20px;"><li style="border: 0px; line-height: 1.2; list-style: none; margin: 0px; padding: 0px;"><div class="lr_dct_sf_sen vk_txt" style="font-weight: lighter !important; padding-top: 10px;"><div style="margin-left: 20px;"><div style="margin-left: -20px;"><div data-dobid="dfn" style="display: inline;">the action of damaging the good reputation of someone; slander or libel.</div><div class="vk_gy" style="color: rgb(135, 135, 135) !important;">"she sued him for defamation"</div><div><table class="vk_tbl vk_gy" style="border-collapse: collapse; color: rgb(135, 135, 135) !important;"><tbody><tr><td class="lr_dct_nyms_ttl" style="font-style: italic; padding: 0px 3px 0px 0px; vertical-align: top; white-space: nowrap;">synonyms:</td><td style="padding: 0px;"><a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+libel&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CB4Q_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true">libel</a>, <a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+slander&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CB8Q_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true">slander</a>, <a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+calumny&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCAQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true">calumny</a>, <a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+character+assassination&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCEQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true">character assassination</a>, <a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+vilification&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCIQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true">vilification</a>; <span data-log-string="synonyms-more-click" jsaction="dob.m"><span class="lr_dct_more_btn" style="color: #1122cc; cursor: pointer; padding-left: 4px;">More</span></span><br /><div style="display: inline;"><div style="display: inline;"><div class="lr_dct_more_txt xpdxpnd xpdnoxpnd" data-mh="-1" style="-webkit-transition: max-height 0.3s; max-height: 0px; overflow: hidden; transition: max-height 0.3s;"><span data-log-string="synonyms-more-click" jsaction="dob.m"><a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+muckraking&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCQQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true"></a><a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+abuse&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCUQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true"></a></span></div><div class="lr_dct_more_txt xpdxpnd xpdnoxpnd" data-mh="-1" style="-webkit-transition: max-height 0.3s; max-height: 0px; overflow: hidden; transition: max-height 0.3s;"></div><div class="lr_dct_more_txt xpdxpnd xpdnoxpnd" data-mh="-1" style="-webkit-transition: max-height 0.3s; max-height: 0px; overflow: hidden; transition: max-height 0.3s;"><span data-log-string="synonyms-more-click" jsaction="dob.m"><a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+smear&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCYQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true"></a><a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+slur&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCcQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true"></a></span></div><div class="lr_dct_more_txt xpdxpnd xpdnoxpnd" data-mh="-1" style="-webkit-transition: max-height 0.3s; max-height: 0px; overflow: hidden; transition: max-height 0.3s;"><span data-log-string="synonyms-more-click" jsaction="dob.m"><i style="padding-right: 4px;"></i><a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+mudslinging&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCgQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true"></a><a href="https://www.google.ca/search?rlz=1C1CHFX_enCA562CA562&espv=2&biw=1281&bih=837&q=define+smack+talk&sa=X&ei=_SkgVKWoLJKcyATirICADA&ved=0CCkQ_SowAA" style="color: #660099; cursor: pointer; text-decoration: none;" wotsearchprocessed="true"></a></span></div><div class="_iYd xpdxpnd xpdnoxpnd vk_gy" data-mh="-1" style="-webkit-transition: max-height 0.3s; max-height: 0px; overflow: hidden; transition: max-height 0.3s;"></div></div></div><span data-log-string="synonyms-more-click" jsaction="dob.m"></span></td></tr></tbody></table></div></div></div></div></li></ol></div></div></blockquote><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioqU4ZJoDH_iVozU_ZTYeAtcG7bso8O0fshw28JgSZwZ2BT_8cN1Cx21YTO-v47mLzRCUtV1cmb84_vpNdM5XIFOt8IHTktJd7NYrfGwccttr9BVu3n-s4xTZXLBNNV4BWLIzVzVMd80U/s1600/libel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioqU4ZJoDH_iVozU_ZTYeAtcG7bso8O0fshw28JgSZwZ2BT_8cN1Cx21YTO-v47mLzRCUtV1cmb84_vpNdM5XIFOt8IHTktJd7NYrfGwccttr9BVu3n-s4xTZXLBNNV4BWLIzVzVMd80U/s1600/libel.jpg" width="400" /></a></div><br /><br />AdWords ads may send traffic if an advertiser has purchased ads, and if that's what this person was referring to, then AdWords actually has recourse for the Advertiser to have their funds return to them. I don't deal with AdWords in this blog, so I won't address that except to say that advertisers can request investigations directly from an AdWords rep - they have direct contact with AdWords staff.<br /><br />So for those of you who do not moderate your comments, you just might want to begin doing so, and go back and review some of the previously published comments on your site.<br /><br />Who wants to lose their account for comments someone else has made? I dunno about you folks, but I sure don't.<br /><br /><div style="text-align: right;"><span style="font-size: x-small;"><b><i>posted by J. Gracey Stinson</i></b></span></div></div>

Blog Comments and AdSense

Today's post isn't one I planned to write, in fact, I had planned to update some older posts to reflect some of the recent changes i...

Read more »

How to Display Most Commented Posts in Blogger

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.<br /><br />Having 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.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="most commented posts widget" border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3stT79a1SXwRXIVRVCDIp15DmQJzrhkix3dJ4mj9gyOXNfdrZNazMGlcnUY2JtZtIvKfpm60AA9B0B-zdgiofWi06YOfrv9G6cRJi5GepIq_sFnuXrWELW9-1BCfq8iZdnyFqsvLrS_E/s1600/most-commented-posts-widget-for-blogger.png" title="Get a Most Commented Posts Widget For Blogger" width="320" /></div><br /><div style="text-align: center;"><a class="demo-link" href="http://helplogger-demo-blog2.blogspot.com/" rel="nofollow" target="_blank">Demo</a></div><br /><h3>Here's What You're Going To Get</h3>There 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: <ul><li><b>Ordered by popularity.</b> 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.</li><li><b>Graphic incorporation.</b> 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.</li><li><b>Descriptions that blend in.</b> 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!</li></ul>Related: <a href="http://helplogger.blogspot.com/2012/03/add-multi-colored-popular-posts-to.html">Add Multi-Colored Popular Posts to Blogger</a><br /><br /><h2>Add the Most Commented Posts Widget to Blogger</h2>Step 1. Log in to your <a href="https://www.blogger.com/home" rel="nofollow" target="_blank">Blogger account</a> and go to Template, press the "Edit HTML" button.<br /><br />Step 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:<br /><blockquote class="tr_bq"></Group></blockquote>Step 3. Just below <span style="background-color: yellow;"></Group></span>, add this code:<br /><blockquote class="tr_bq"><Group description="Most Commented" selector=".most-commented"><br /><Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/><br /><Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/><br /><Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/><br /><Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/><br /><Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/><br /></Group> </blockquote><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add code to blogger html" border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrSkumCOTsGoWswsiz47uH3yCyDIQzjq8EaCbguaRQm0QzFPpMQhQDLVBm8UQuNAzoF3_W7CgnxMwbEzdqITkC87kFeFCIVwBsT-VCkK2cHkH4ijNSkAXMYZvSm9fvlvJseYoV60jb0AtX/s1600/add-css-to-blogger-template-html.png" title="Get a Most Commented Posts Widget For Blogger 1" width="640" /></div>Note: if you can't find the </Group> tag, try to find the following tag instead and add the variables just below it:<br /><blockquote><b:skin><![CDATA[</blockquote><br />Step 4. Now search for the following tag (CTRL + F):<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Step 5. And just above it, add this CSS code:<br /><blockquote class="tr_bq">.comment-count {<br />    padding: 3px 10px;<br />    background: #fff;<br />    color: #000;<br />    font-size: 10px;<br />    float: right;<br />}<br /><br />.most-commented ul {<br />    padding: 0px !important;<br />    font-family: Century Gothic, sans-serif;<br />}<br /><br />.most-commented ul li {<br />    list-style-type: none;<br />    padding: 10px;<br />    color: #555;<br />    margin-top: -10px;<br />}<br /><br />.most-commented ul li a {<br />    color: #444;<br />    font-weight: bold;<br />    text-decoration: none;<br />    font-size: 11px;<br />}<br /><br />.most-commented ul li img {<br />    float: left;<br />    margin: 0px 5px 0px 0px;<br />    width: 60px;<br />    height: 60px;<br />}<br /><br />.most-commented:nth-child(3n+0) {<br />    background: $(most.commented.background1);<br />    width: 100%;<br />}<br /><br />.most-commented:nth-child(4n+0) {<br />    background: $(most.commented.background2);<br />    width: 95%;<br />}<br /><br />.most-commented:nth-child(5n+0) {<br />    background: $(most.commented.background3);<br />    width: 90%;<br />}<br /><br />.most-commented:nth-child(6n+0) {<br />    background: $(most.commented.background4);<br />    width: 85%;<br />}<br /><br />.most-commented:nth-child(7n+0) {<br />    background: $(most.commented.background5);<br />    width: 80%;<br />}</blockquote>Step 6. Save the template.<br /><br />Now, 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:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger html javascript gadget" border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZDg2UP2Hjfv4Ie94dhItLnE1r-Bf8nyQ6xCfZWdbXqDu9Kp_eN19gLRZFHoeP4hHAFkTOFuFR7CTvR4-oYILIS-xVkcUcMxIXFMX0SJrxGOyq7T-Bf834rHQiJyCk1RY-lH3Uw4LnJj9A/s1600/add-a-gadget-or-page-element-html-javascript-blogger.png" title="Get a Most Commented Posts Widget For Blogger 2" width="640" /></div><br />Copy and paste this script inside the content box:<br /><blockquote class="tr_bq"><script type="text/javascript"><br />function stripTags(s,n) {<br />    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")<br />}<br />function mostcommented(feed) {<br />    var i;<br />    for (i = 0; i < feed.count ; i++) {<br />var postURL = "'" + feed.value.items[i].link + "'";<br />var postTitle = feed.value.items[i].title;<br />var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";<br />var postDescription = feed.value.items[i].postdescription;<br />var postComments = feed.value.items[i].commentcount;<br />var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,<span style="color: red;"><b>10</b></span>)+'...</p>' + '</li></ul></div>';<br /> document.write(postList);<br />     }<br /> }<br /> </script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?<br />AddUrlHere=<b><span style="color: blue;">http://helplogger.blogspot.com</span></b><br />&NumberofPosts=5<br />&_id=2cb5eb603ed55a6264ee1484e5fdd45c<br />&_callback=mostcommented<br />&_render=json"<br />type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span></blockquote>Here, change <span style="color: blue;">http://helplogger.blogspot.com</span> with your blog URL. If you want to add more characters to the description, modify the "<span style="color: red;">10</span>" value in red from "postDescription,<span style="color: red;">10</span>".<br /><br />If you want a more simple look (without the thumbnails and post snippets), add this script instead:<br /><blockquote class="tr_bq"><script type="text/javascript"><br />function stripTags(s,n)<br />    {<br />    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")<br />}<br />function mostcommented(feed) {<br /> var i;<br /> for (i = 0; i < feed.count ; i++)<br /> {<br />var postURL = "'" + feed.value.items[i].link + "'";<br />var postTitle = feed.value.items[i].title;<br />var postComments = feed.value.items[i].commentcount;<br />var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><span style="color: #cc0000;"><div class="comment-count">' + postComments + "</div>"</span> + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';<br /> document.write(postList);<br /> }<br /> }<br /> </script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?<br /> AddUrlHere=<b><span style="color: blue;">http://helplogger.blogspot.com</span></b><br />&NumberofPosts=5<br />&_id=2cb5eb603ed55a6264ee1484e5fdd45c<br />&_callback=mostcommented<br />&_render=json"<br />type="text/javascript"></script><br /><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span></blockquote>.... and replace <span style="color: blue;">http://helplogger.blogspot.com</span> with your address.<br />To add the "comments" text after the comments number, replace the line in red:<br /><blockquote class="tr_bq"><div class="comment-count">' + postComments + "</div>"</blockquote>with:<br /><blockquote class="tr_bq"><div class="comment-count">' + postComments + " comments" + "</div>" </blockquote>Once you have finished adding your own settings, press the "Save" button to enable the gadget in the sidebar of your blog. That's it! <br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="configure html javascript gadget" border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4P52lppwU0LParzQ99AXLGILe4fx3b2zh324t8gkA5QE0TyZvaFJNuOpxtTU3zMR5lReYMrH8yubgWpo3d8Ye6WCHINtlvxnT5XCpKH3HWQ55iZJsQICCtA_VBmzhI-fxBEtMPHkb3WH/s1600/add-blogger-gadget.png" title="Get a Most Commented Posts Widget For Blogger 3" width="640" /></div><br />To change the background colors of the most commented posts, go to "Template" > hit the "Customize" button and navigate to "Advanced" > "Most Commented" tab. Here you can pick 5 different colors by clicking on the color boxes:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template designer" border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkHqsJ8JdH2uNnhibtup8WQxr7dbvl48xWd10jr7aOXm5_ErE_E59KA9VdFt6Pp0Y2RtgbmIeXYDVslYJFdytKFhuuXAjM10vY5UDXPKSvsmt_IOMsRWHw-3IojjfeUB1oEhSnB3ioJwa/s1600/most-commented-posts-blogger-widget.png" title="Get a Most Commented Posts Widget For Blogger 4" width="640" /></div><br />Once you've selected your favorite color scheme, click the "Apply to blog" button to save the changes... and you're done.<br /><br /><h3>Why Use the Most Commented Posts widget?</h3>The 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.<br /><br />Take 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 ;)

How to Display Most Commented Posts in Blogger

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 ar...

Read more »

How to Enable Google Plus Comments in Blogger

<h2>How to Enable Google Plus Comments in Blogger</h2>Long 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.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="google plus commenting system on blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcrmol-vUAlu8OzL-QWEZcKmPoBEggOWIodqdmyG02ibpR2Az9XUKdsgJSmzd7vI83usamsMIMO6BUmeRkrLFZEnNYqCBWi3AyKUcimoWz75kc3m0D7hrp-VdEXcsvIWTg-J_MIB9SZiD/s1600/google-plus-commenting-system-on-blogger.png" title="How to Enable Google Plus Comments in Blogger" /></div><br />For those who haven't yet upgraded the Blogger profile to a Google+ profile, please see this tutorial on <a href="http://helplogger.blogspot.com/2014/05/how-to-share-blogger-posts-or-pages-to-google-plus.html">how to associate a blog to a Google plus page</a>. Once you have connected a blog to a Google+ profile, you'll have a new "<b>Use Google+ Comments on this blog</b>" setting on the Google+ tab of your blog. To enable the Google plus commenting system, just check the box next to this setting:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="use google+ comments on this blog, blogger tutorial" border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_fC4xIzXnR6e5Qf-oCJvDhni-30e2WBwQkx71x9nEjP9SUp3WFoqGDrxlabip6A94pVYOzTpm9q977pf1yEx-3R1aXpdcFDgGbGaIK-GDhemELIpYcUZCLO1Oi0OM-sBTPNIb5alqAAJj/s1600/google-plus-comments-on-this-blog-blogger-settings.png" title="How to Enable Google Plus Comments in Blogger" width="640" /></div><br />As soon as you've enabled the feature through your Blogger Dashboard, you'll have the following features: <ol><li><b>Threaded commenting system</b>: 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</li><li><b>Public and private comments</b>: this ensures a better privacy for your visitors which can make their comments either public or private</li><li><b>Edit or delete comments</b>: 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</li><li><b>Google Plus One (+1) button in comments</b>: 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+</li><li><b>"Also share on Google+" check box</b>: 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!</li></ol><h3>Things to consider before adding the Google Plus Comments in Blogger</h3><ul><li>the Google Plus commenting system won't work for private and adult blogs</li><li>If you are using a third-party commenting system like Disqus, your comments might not be retained when you enable Google+ Comments</li><li>If 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</li><li>If 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</li><li>Only 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</li></ul><h2>How to Enable Google Plus on Custom Blogger Templates</h2>If you are using a custom Blogger template, the comments might not show up after checking the "<b>Use Google+ Comments on this blog</b>" setting. In this case, we will need to apply the following trick in order to enable it on custom templates:<br /><br />Step 1. From the <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger Dashboard</a>, go to "Template" and click on the "Edit HTML" button.<br /><br />Step 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:<br /><blockquote class="tr_bq"><div class='post-footer'></blockquote>Step 3. Just below it, paste this code:<br /><blockquote class="tr_bq"><div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/></blockquote>Step 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.<br /><br />Happy commenting!

How to Enable Google Plus Comments in Blogger

How to Enable Google Plus Comments in Blogger Long time ago, Google proudly announced their new integrated commenting system which is now av...

Read more »

Add a Cool Style to Blogger Threaded/Nested Comments

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. <br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhe8tC6Aa5_aGL9GRYx1a1tVmeQS5FRgT9kkMVa91x2jb1qKWg_lRaFx9B9xZhdG0Z0RZcMn_XpPEypwfRfAjlc3Xd4v3wS81LPeXCVSgdqqawOWicOYvo2AZI8MUXmVK9y8pMnlglStuS/s1600/add-background-color-border-avatars-blogger-threaded-comments.png" width="320" /></div><br />You can see a demo <a href="http://demohelplogger1.blogspot.com/2014/01/lorem-ipsum-03.html?showComment=1390248204410#c3213838701644319004" rel="nofollow" target="_blank">here</a>.<br /><br />To 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 <span style="background-color: yellow;"><b:skin></span> and <span style="background-color: yellow;"></b:skin></span> tags.<br /><br /><h3>Styling Simple Nested Comments with CSS</h3>Step 1. From the <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger Dashboard</a>, go to "Template" and press the "Edit HTML" button<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8mV1AXRt-A5pMw2IqHtD9EyUsGWHNsVYhqt_PrEfR4EZMMmcuVzYRlAyVO87mRHPpnh9Bd23IXI8DzX0qZO2kwvwUUM6PluakhZy69vfqdrnHFJUs7QGrtpMs7Pt8oVSzTpeXgfZuRD3O/s1600/blogger-template-search-box.png" width="400" /></div><br />Step 3. Paste or type the following tag inside the search box and hit Enter to find it<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Step 4. Just above <span style="background-color: yellow;">]]></b:skin></span> add this CSS:<br /><blockquote class="tr_bq">.comments .comment-block {<br />background: <span style="color: #cc0000;"><b>#F9F9F9</b></span>;<br />color: <span style="color: #cc0000;"><b>#555</b></span>;<br />box-shadow: 0 4px 10px <span style="color: #cc0000;"><b>#EEEEEE</b></span>;<br />position: relative;<br />margin-top: 10px;<br />margin-left: 60px;<br />padding: 10px;<br />border: <span style="color: #cc0000;"><b>4px solid #EEEEEE</b></span> !important;<br />border-radius:10px;<br />font: <span style="color: #cc0000;"><b>1.190em</b></span>/1.2 Cambria,Georgia,sans-serif;<br />}<br />.comment-thread li .comment-block:before {<br />position: absolute;<br />display: block;<br />left: -26px;<br />color: <span style="color: #cc0000;"><b>#EEEEEE</b></span>;<br />content: "\25C4";<br />font-size: 30px;<br />}<br />.comments .avatar-image-container {<br />width: <span style="color: #38761d;"><b>60px</b></span>;<br />height: <span style="color: #38761d;"><b>60px</b></span>;<br />max-height: <span style="color: #38761d;"><b>60px</b></span>;<br />margin:0px 0px 0 -28px;<br />padding: 0px;<br />border: <span style="color: #cc0000;"><b>7px solid #EEEEEE</b></span>;<br />border-radius:<span style="color: #38761d;"><b>60px</b></span>;<br />}<br />.comments .avatar-image-container img {<br />overflow:hidden;<br />width: <span style="color: #38761d;"><b>60px</b></span>;<br />height: <span style="color: #38761d;"><b>60px</b></span>;<br />max-width: <b><span style="color: #38761d;">60px</span></b>;<br />border:0 !important;<br />border-radius:<span style="color: #38761d;"><b>60px</b></span>;<br />}<br />.comments .comment-thread.inline-thread {<br />background: none;<br />}<br />.comments .continue {<br />border-top: 0px solid transparent;<br />}<br />.comments .comments-content .datetime {<br />float: right;<br />font-size: 11px;<br />}<br />.comments .comments-content .user a{<br />font-size: 15px;<br />color: #498EC9;<br />}<br />.comments .comments-content .datetime a:hover{<br />color: #777;<br />text-decoration: none;<br />}<br />.comments .comments-content .comment:first-child {<br />padding-top: 0px;<br />}<br />.comments .comments-content .comment {<br />margin-bottom: 0px;<br />padding-bottom: 0px;<br />}<br />.comments .continue a {<br />padding: 0px;<br />}<br />.comments .comments-content .icon.blog-author {<br />background-image: none;<br />}</blockquote><br /><h3>How to Change Blogger Threaded Comments Background, Border and Colors</h3><ul><li>replace the <span style="color: #cc0000;">#F9F9F9</span> value to change the background color of the comments;</li><li><span style="color: #cc0000;">#555</span> to change the text comments color;</li><li><span style="color: #cc0000;">#EEEEEE</span> to change the color of the shadow around comments;</li><li><span style="color: #cc0000;">4px solid #EEEEEE</span> to change the border width (<span style="color: #cc0000;">4px</span>), style (<span style="color: #cc0000;">solid</span>) and color (<span style="color: #cc0000;">#EEEEEE</span>) around comments;</li><li><span style="color: #cc0000;">1.190em</span> to change the comments font size;</li><li>to change the arrow color, replace the <span style="color: #cc0000;">#EEEEEE</span> value from color: <span style="color: #cc0000;">#EEEEEE;</span></li><li>to change the border width (<span style="color: #cc0000;">7px),</span> style (<span style="color: #cc0000;">solid</span>) and color (<span style="color: #cc0000;">#EEEEEE</span>) around avatars, modify this part: <span style="color: #cc0000;">7px solid #EEEEEE;</span></li><li>to change the avatars size and roundness, change the <span style="color: #38761d;">60px</span> value;</li></ul>Here is a tool from that may help to pick your favorite color: <a href="http://helplogger.blogspot.com/2012/02/color-code-generator.html">Color Code Generator</a><br /><br />Step 5. Finally, click on the "Save template" button... and you're done!

Add a Cool Style to Blogger Threaded/Nested Comments

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 dif...

Read more »

Top Commentators Widget with Avatars for Blogger

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.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZwYPFY_weK6tpnoDbX83_B_k4TMG94qAKvordq46gMBNIi-stkC0XnXOL_jQ8O5S0lK3jjhv-qTNeZ4cmB9pRiJ7wJ-dt0p7xyyMy6hfaQ8zn62HkD_XF44RQ4U5G3hI5W9bx4mnWW6T/s1600/top-commenters-gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to add top commenters widget to blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZwYPFY_weK6tpnoDbX83_B_k4TMG94qAKvordq46gMBNIi-stkC0XnXOL_jQ8O5S0lK3jjhv-qTNeZ4cmB9pRiJ7wJ-dt0p7xyyMy6hfaQ8zn62HkD_XF44RQ4U5G3hI5W9bx4mnWW6T/s1600/top-commenters-gadget.png" title="top commenters blogger gadget" /></a></div><br />It 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.<br /><br />The gadget will look something like this:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3AiFk11jLOs6CDZJkltwjAsQhwBB52wUIhTDmutihYmfsTyEbfnHTyTBu8DJryTWagHnJby6wi-1ZUPeTHME42BXY2QGq6gsghEDzFXWxsjCKKG4tW_SbIRVeRMlanph1L0pc1IJSnHIH/s1600/top-commentators-gadget-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="add top commentators widget to blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3AiFk11jLOs6CDZJkltwjAsQhwBB52wUIhTDmutihYmfsTyEbfnHTyTBu8DJryTWagHnJby6wi-1ZUPeTHME42BXY2QGq6gsghEDzFXWxsjCKKG4tW_SbIRVeRMlanph1L0pc1IJSnHIH/s1600/top-commentators-gadget-blogger.png" title="top commentators gadget with avatars for blogger" /></a></div><br />This Top Commentators gadget comes with user's avatar and is done with JavaScript.<br /><br /><h2>How to Add the Top Commenters Gadget to Blogger</h2><br />1. To add this gadget, you have to go to <b>Layout</b>, click on <i><b>Add a Gadget</b></i> link.<br /><br />2. Select the <b>HTML/JavaScript</b> gadget and copy/paste within the empty box the following code:<br /><blockquote class="tr_bq"><style type="text/css"><br />.top-commentators {<br />margin: 3px 0;<br />border-bottom: 1px dotted #ccc;<br />}<br />.avatar-top-commentators {<br />vertical-align:middle;<br />border-radius: 30px;<br />}<br />.top-commentators .commenter-link-name {<br />padding-left:0;<br />}<br /></style><br /><script type="text/javascript"><br /><b>var maxTopCommenters = 8; </b><br />var minComments = 1;     <br />var numDays = 0;         <br />var excludeMe = true;    <br />var excludeUsers = ["Anonymous", "<b><span style="color: #cc0000;">someotherusertoexclude</span></b>"]; <br />var maxUserNameLength = 42;<br />//<br />var txtTopLine = '<b>[#].</b> [image] [user] ([count])';<br />var txtNoTopCommenters = 'No top commentators at this time.';<br />var txtAnonymous = '';<br />//<br /><b>var sizeAvatar = 33;</b><br />var cropAvatar = true;<br />//<br />var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7opHpKrsAFWk2m9wNUMJMuaWVsV4UeLxEHh-Bd97e8tCnmJw0CodNAUHlc3FHMAqihyphenhyphena39FJJqM1JcyLtO0JqMT7coQmHSnJl84fIYwcY299XtQerXO3-MFP6ahRw1ZQIJ25m6Fwn36fa/s1600/avatar_blue_m_96.png" + sizeAvatar;<br />var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5THJtHK9Wrwv8pfdiarcsAEBlVncJ3oYqFDmcHZ2fBTTMoJ4zOgrYvdu2b7BojwzmnixCKzuqjK4Bz82kiAEH1ApRHmslwlJjo_YezrZwHT-l2aXUGBYkFEMJt2npYSzWhgASDmX4eRW/s1600/avatar1.png' + sizeAvatar;<br />var urlMyProfile = '';<br />var urlMyAvatar = '';<br />if(!Array.indexOf) {<br /> Array.prototype.indexOf=function(obj) {<br />  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;<br />  return -1;<br />}}<br />function replaceTopCmtVars(text, item, position)<br />{<br />  if(!item || !item.author) return text;<br />  var author = item.author;<br />  var authorUri = "";<br />  if(author.uri && author.uri.$t != "")<br />    authorUri = author.uri.$t;<br />  var avaimg = urlAnoAvatar;<br />  var bloggerprofile = "http://www.blogger.com/profile/";<br />  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)<br />    avaimg = author.gd$image.src;<br />  else {<br />    var parseurl = document.createElement('a');<br />    if(authorUri != "") {<br />      parseurl.href = authorUri;<br />      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;<br />    }<br />  }<br />  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")<br />    avaimg = urlMyAvatar;<br />  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")<br />    avaimg = urlNoAvatar;<br />  var newsize="s"+sizeAvatar;<br />  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");<br />  if(cropAvatar) newsize+="-c";<br />  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");<br />  var authorName = author.name.$t;<br />  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)<br />    authorName = txtAnonymous;<br />  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';<br />  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';<br />  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)<br />    authorName = authorName.substr(0, maxUserNameLength-3) + "...";<br />  var authorcode = authorName;<br />  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';<br />  text = text.replace('[user]', authorcode);<br />  text = text.replace('[image]', imgcode);<br />  text = text.replace('[#]', position);<br />  text = text.replace('[count]', item.count);<br />  return text;<br />}<br />var topcommenters = {};<br />var ndxbase = 1;<br />function showTopCommenters(json) {<br />  var one_day=1000*60*60*24;<br />  var today = new Date();<br />  if(urlMyProfile == "") {<br />    var elements = document.getElementsByTagName("*");<br />    var expr = /(^| )profile-link( |$)/;<br />    for(var i=0 ; i<elements.length ; i++)<br />      if(expr.test(elements[i].className)) {<br />        urlMyProfile = elements[i].href;<br />        break;<br />      }<br />  }<br />  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {<br />    var entry = json.feed.entry[i];<br />    if(numDays > 0) {<br />      var datePart = entry.published.$t.match(/\d+/g);<br />      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);<br />   <br />      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));<br />      if(days > numDays) break;<br />    }<br />    var authorUri = "";<br />    if(entry.author[0].uri && entry.author[0].uri.$t != "")<br />      authorUri = entry.author[0].uri.$t;<br />    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)<br />      continue;<br />    var authorName = entry.author[0].name.$t;<br />    if(excludeUsers.indexOf(authorName) != -1)<br />      continue;<br />    var hash=entry.author[0].name.$t + "-" + authorUri;<br />    if(topcommenters[hash])<br />      topcommenters[hash].count++;<br />    else {<br />      var commenter = new Object();<br />      commenter.author = entry.author[0];<br />      commenter.count = 1;<br />      topcommenters[hash] = commenter;<br />    }<br />  }<br />  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {<br />    ndxbase += 200;<br />    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');<br />    return;<br />  }<br />  // convert object to array of tuples<br />  var tuplear = [];<br />  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);<br />  tuplear.sort(function(a, b) {<br />    if(b[1].count-a[1].count)<br />        return b[1].count-a[1].count;<br />    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;<br />  });<br />  var realcount = 0;<br />  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {<br />    var item = tuplear[i][1];<br />    if(item.count < minComments)<br />        break;<br />    document.write('<di'+'v class="top-commentators">');<br />    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));<br />    document.write('</d'+'iv>');<br />    realcount++;<br />  }<br />  if(!realcount)<br />    document.write(txtNoTopCommenters);<br />}<br />document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');<br /></script> </blockquote>3. Now you just have to save changes and you're done!<br /><br /><h3>Configuration </h3>- To modify the number of users displayed in the gadget, look for <b>var maxTopCommenters = 8;</b> and change <b>8</b> with any number you want.<br />- To change the avatar size of the commenters, look for <b>var sizeAvatar = 33;</b> and change number <b>33</b> with the number of pixels you want. <!-- adsense -->- To hide your name or some other username, replace the <b><span style="color: #cc0000;">someotherusertoexclude</span></b> 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)

Top Commentators Widget with Avatars for Blogger

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...

Read more »

Expandable Recent Comments Widget for Blogger/Blogspot

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 plus/minus icon or by hitting the "Show all" or "Hide all" button.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUHWqschysMKr_L-sMIOBr4c-Bz4pkzuz-bQatJLS3dWQhDlAISlgMiN6iDuOjWSDom9ejYyl_uJa-rIA3LY-t-btX65qdf_ahLflQf3MDtGTSWsQAzvAjhiMgNgAv7obkUUiWK6fV-9J/s1600/expandable-recent-comments-widget-for-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="recent comments widget, blogger gadgets, blogspot tricks" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUHWqschysMKr_L-sMIOBr4c-Bz4pkzuz-bQatJLS3dWQhDlAISlgMiN6iDuOjWSDom9ejYyl_uJa-rIA3LY-t-btX65qdf_ahLflQf3MDtGTSWsQAzvAjhiMgNgAv7obkUUiWK6fV-9J/s320/expandable-recent-comments-widget-for-blogger-blogspot.png" title="recent comments widget for blogger blogspot with expand/collapse function" width="247" /></a></div><br />To add the Expandable Recent Comments widget for Blogger, please follow the next steps below:<br /><br /><h2>Adding Expandable Recent Comments Widget to Blogger</h2>1. From your <a href="https://www.blogger.com/ rel=">Blogger dashboard</a>, go to "Layout", then click on "Add a Gadget" link:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJYdOUEwoOdAsgZ0WL_oqqNB7BI2CbRHtS3vIVUuzsAyeooUtlCW59Bb3nWbwAXGaYFUQaicbrfvFI6L4YwUSAt1Aa-HZaumumOu0G9mDI0MfCgHt24452kQgGFtF3wJlBYotWAI-IQDb/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJYdOUEwoOdAsgZ0WL_oqqNB7BI2CbRHtS3vIVUuzsAyeooUtlCW59Bb3nWbwAXGaYFUQaicbrfvFI6L4YwUSAt1Aa-HZaumumOu0G9mDI0MfCgHt24452kQgGFtF3wJlBYotWAI-IQDb/s640/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div><br />2. When the pop-up window appears, scroll down and select the "HTML/JavaScript" widget:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmrFAsGS_Wc3zSIYYpqR0IQKpqYJ8z_0gZj0uHog56etusvU7qjqBwzo3e-EZ6huttK4B1DWhKrJm0k0aZng_LmZfeTXqE63_rqEYMhWU9ea1kWxEa0yplbdo5U6SoIVkuIJZnS7_JEdN/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmrFAsGS_Wc3zSIYYpqR0IQKpqYJ8z_0gZj0uHog56etusvU7qjqBwzo3e-EZ6huttK4B1DWhKrJm0k0aZng_LmZfeTXqE63_rqEYMhWU9ea1kWxEa0yplbdo5U6SoIVkuIJZnS7_JEdN/s400/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></a></div><span style="color: #3d85c6;"><br /></span>3. Copy and paste this code inside the empty box:<br /><blockquote class="tr_bq"><style type="text/css">.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;}<br /></style><br /><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;; }" value="Show all" /></div><br /><div class="comment-box"><br /><script type="text/javascript"><br />var tgl=false;var title_arr=new Array();var arr=0;var err="[err]";var icon_expand="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6pYouP8eeX_smmh8xe21_pYUOptrEtvJ-2EB0Hkb3ZdpCo3r-cOq-DJC15qFPFjAK8PXGY_HC35ARTBLKG9WEgUwCFbzBHEjpRslXs9X7hDDzc4fBV7qPjcux0YlM5-DisGNk6wvBHZ5/s1600/icon-plus.png";var icon_collapse="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiE9G8FHo-gNmLbguGD5gMofHtBqPZ612pt7nn29ciZ614_SSHUOiddYS2fYTzmhNHv-Xk04ViPemf964aLr6gAEgW4E-OVbaxHztUH54AetwHWjhUc612PYwBGgSOWLLUcpwPXW_b1bR/s1600/icon-minus+copy.png";var maxcomments=20;function real_posttitle(postid){for(var i=0;i<title_arr.length;i++){if(title_arr[i][0]==postid)return title_arr[i][1];}<br />return err;}<br />function showrecentposts(json){var numposts=999999;for(i=0;i<numposts;i++){var entry=json.feed.entry[i];var postid;var title;if(i==json.feed.entry.length)break;for(var k=0;k<200;k++){if(entry.link[k].rel=='self'){postid=entry.link[k].href;postid=postid.substr(postid.lastIndexOf("/")+1,100);}<br />if(entry.link[k].rel=='alternate'){title=entry.link[k].title;break;}}<br />title_arr[arr]=postid+"&#176;"+title;title_arr[arr]=title_arr[arr].split("&#176;");++arr;}}<br />function 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";}}<br />function unfold_all(el){try{for(var i=0;i<maxcomments;i++){document.getElementById("com_id"+i).style.display="block";document.getElementById("click_id"+i).src=icon_collapse;}}catch(e){;}<br />el.value='Show all';}<br />function fold_all(el){try{for(var i=0;i<maxcomments;i++){document.getElementById("com_id"+i).style.display="none";document.getElementById("click_id"+i).src=icon_expand;}}catch(e){;}<br />el.value='Hide all';}<br />function showrecentcomments(json){var numcomments=999999;var postid;var i=0;for(i=0;i<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<entry.link.length;k++){if(entry.link[k].rel=='self'){postid=entry.link[k].href.split("/");postid=postid[5];}<br />if(entry.link[k].rel=='alternate'){alturl=entry.link[k].href;break;}}<br />var 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)<br />{anonymous=true;};var posttitle=real_posttitle(postid);if(posttitle==err){posttitle=linktext.replace(/-/g," ");}<br />var 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;}<br />else<br />if("summary"in entry){var comment=entry.summary.$t;}else var comment="";if(i<maxcomments){if(tgl){tgl=false;var cl="row-a";}else{tgl=true;var cl="row-b";}<br />document.write('<div class="'+cl+' row-div"><img id="click_id'+i);document.write('" style="cursor:pointer;" onclick="unfold(this);"');document.write('src="'+icon_expand+'" />&nbsp;');document.write('On '+cdday+' '+monthnames[parseInt(cdmonth,10)]+' '+cdyear);document.write(', at '+ctime+', ');if(anonymous==false){document.write('<a href="'+profilelink+'">'+entry.author[0].name.$t+'</a> ');}else{document.write(entry.author[0].name.$t+' ');}<br />document.write('commented on <a href="'+alturl+'">'+posttitle+'</a>');document.write('</div>');document.write('<div class="comments1" id="com_id'+i+'" style="display:none;">'+comment+'<\/div>');}}<br />document.getElementById("numcom").innerHTML=i;}<br /></script><script type="text/javascript"  src="<span style="color: blue;">http://helplogger.blogspot.com</span>/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts"></script><script type="text/javascript"  src="<span style="color: blue;">http://helplogger.blogspot.com</span>/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments"><br /></script></div></blockquote><br />Note: Replace <span style="color: blue;">http://helplogger.blogspot.com</span> with the URL address of your blog or site.<br /><br />4. Save the expandable <a href="http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html">recent comments widget for Blogger</a> / Blogspot by clicking on the 'Save' button... and you're done!

Expandable Recent Comments Widget for Blogger/Blogspot

The Expandable Recent Comments widget for Blogger is a very accessible widget that can be collapsed or expanded through user interaction, so...

Read more »

Recent Comments Widget with Hide Author Comments function For Blogger

A few days ago, <a href="http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html?showComment=1362622570533#c4751730170457297073">Mrpolie</a> asked if there's a way to hide the author comments in the Recent Comments widget so that we would be able to see only readers' comments and our replies to be hidden. So, in this post I'll be sharing with you the Recent Comments widget that comes with this function. If you want to show just blog readers' comments rather than yours, you have just to change "Blogger User" text with the surname under which you are posting.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Q31kEinhJu9o_8O4UoaktfyrCey2jo1oBIlpR-7CzDwSoKK0q36QxMFXxxNvAftfephTAF0uWoiw0FgKz4xKXg0UtOyM2X7tI_1hKIaz4Utlb4xB04_J0QwvXvMk0g3SClBp-xTzMcVF/s1600/recent-comments-widget-with-hide-own-comments-option-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="recent comments widget, recent comments, blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Q31kEinhJu9o_8O4UoaktfyrCey2jo1oBIlpR-7CzDwSoKK0q36QxMFXxxNvAftfephTAF0uWoiw0FgKz4xKXg0UtOyM2X7tI_1hKIaz4Utlb4xB04_J0QwvXvMk0g3SClBp-xTzMcVF/s1600/recent-comments-widget-with-hide-own-comments-option-for-blogger.png" title="recent comments widget for blogger with hide own comments function" /></a></div><br />The main features of this recent comments widget:<br /><br />- You'll be able to hide your comments<br />- Change the avatar size<br />- Set the number of comments to display<br />- Set the length of comment for the widget to display<br /><br /><h2>Recent Comments Widget with Hide Author Function</h2><br /><br /><span style="color: #3d85c6;"><b>Step 1. </b></span>From your Blogger Dashboard, go to <b>Layout</b> and click on <b>Add a Gadget</b> link<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJYdOUEwoOdAsgZ0WL_oqqNB7BI2CbRHtS3vIVUuzsAyeooUtlCW59Bb3nWbwAXGaYFUQaicbrfvFI6L4YwUSAt1Aa-HZaumumOu0G9mDI0MfCgHt24452kQgGFtF3wJlBYotWAI-IQDb/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJYdOUEwoOdAsgZ0WL_oqqNB7BI2CbRHtS3vIVUuzsAyeooUtlCW59Bb3nWbwAXGaYFUQaicbrfvFI6L4YwUSAt1Aa-HZaumumOu0G9mDI0MfCgHt24452kQgGFtF3wJlBYotWAI-IQDb/s1600/blogger-layout-add+a+gadget-how-to.png" width="400" /></a></div><br /><span style="color: #3d85c6;"><b>Step 2. </b></span>In the pop-up window, choose the HTML/JavaScript widget<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmrFAsGS_Wc3zSIYYpqR0IQKpqYJ8z_0gZj0uHog56etusvU7qjqBwzo3e-EZ6huttK4B1DWhKrJm0k0aZng_LmZfeTXqE63_rqEYMhWU9ea1kWxEa0yplbdo5U6SoIVkuIJZnS7_JEdN/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmrFAsGS_Wc3zSIYYpqR0IQKpqYJ8z_0gZj0uHog56etusvU7qjqBwzo3e-EZ6huttK4B1DWhKrJm0k0aZng_LmZfeTXqE63_rqEYMhWU9ea1kWxEa0yplbdo5U6SoIVkuIJZnS7_JEdN/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="320" /></a></div><br /><span style="color: #3d85c6;"><b>Step 3.</b></span> Copy-paste the following code:<br /><br /><b>Recent Comments Widget with Round Avatars: </b><br /><script type="text/javascript">function toggleMe(a){ var e=document.getElementById(a); var i = document.getElementById(a + '_image'); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" i.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMILYF-aHMJEpvxv9y_WtVjIQYS_lTNg7DiAm1S0wZjGl2v_3rEWmhQXE3Caf0ee2rflbsU0J-ItFt3QEUF5CUAUpvOZ5F-C2SUnzSWWAeRs-dX6t59g0-rn4k4VliGCaL8ODKoWKaApNL/s1600/open_folder.gif'; } else { e.style.display="none" i.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7fSkkC_jKsgFJeDcluQZahFKYVzotm0D-QEnUChLXmXDo2iW5N21gafeQSJcwIGnwWxWKpg0Uo5PQY7R1lsJqa5g-tvvrp9wf8GORrhpvBcwyJ2J9n13st4fJ59JwTS-vnJZGqy4FNJ18/s1600/closedfolder.gif'; } return false; } </script> <br /><a href="https://www.blogger.com/null" onclick="return toggleMe('para1')" style="cursor: pointer;"><img id="para1_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7fSkkC_jKsgFJeDcluQZahFKYVzotm0D-QEnUChLXmXDo2iW5N21gafeQSJcwIGnwWxWKpg0Uo5PQY7R1lsJqa5g-tvvrp9wf8GORrhpvBcwyJ2J9n13st4fJ59JwTS-vnJZGqy4FNJ18/s1600/closedfolder.gif" style="border: 0; margin-right: 5px; vertical-align: middle;" />Click to see the code</a><br /><div id="para1" style="display: none;"><blockquote class="tr_bq"><style type="text/css"><br />.rc{padding-left:24px; padding-top: 6px;}<br />.rc a:hover {color: #F3903E;text-decoration: none;}<br />.rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}<br />.rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;<strike>-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;</strike>-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br />-webkit-transition: all 1s ease-in-out;<br />-moz-transition: all 1s ease-in-out; <br />-o-transition: all 1s ease-in-out; <br />-ms-transition: all 1s ease-in-out; }<br />.rc-ico img:hover {-webkit-transform: rotate(360deg); <br />-moz-transform: rotate(360deg); <br />-o-transform: rotate(360deg);<br />-ms-transform: rotate(360deg);}<br />.rc-header{font-size: 13px;}<br />.rc-header a{}<br />.rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}<br />.rc-footer{font-size:11px; float: right;}<br /></style><br /><script type="text/javascript"><br /><span style="color: orange;"><b>var numRecentComments = 5;</b></span><br /><span style="color: #38761d;"><b>var maxCommentChars = 67;</b></span><br />var trueAvatars = true; <br />var urlMyAvatar = '';<br />var urlMyProfile = '';<br />var cropAvatar = true;<br /><span style="color: blue;"><b>var sizeAvatar = 50;</b></span><br />var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLkZ5WVZ7Zy26syx86R3JPt5Nd0Kbfbut_VWNOzmrhij6NtPYygKmfSi7GZFyPKECh7hPGUB7qEpIcL1v-SCIgVq_rcuEFiCEV1o3IzY_akZOFqplv7hn4fcm6LqpzWvnOpBpEaz5liWU/"+sizeAvatar+"/anonymous-Icon.jpg"; <br />var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;<br />var txtMore = '';<br />var txtWrote = 'commented:';<br />var txtAnonymous = ''; <br />var maxResultsComments = "";<br />var numPerPost = 2;<br />var maxPostTitleChars = 40; <br />var getTitles = true;<br />var maxResultsPosts = ""; <br />var txtTooltip = '[user] on &quot;[title]&quot; - [date MM-dd-yyyy hh:mm]';<br />var urlToTitle = {};<br />function replaceVars(text, user, title, date) {<br />text = text.replace('[user]', user);<br />text = text.replace('[date]', date.toLocaleDateString());<br />text = text.replace('[datetime]', date.toLocaleString());<br />text = text.replace('[time]', date.toLocaleTimeString());<br />text = text.replace('[title]', title.replace(/\"/g,'&quot;'));<br />var i = text.indexOf("[date ");<br />if(i > -1) {<br />var format = /\[date\s+(.+?)\]/.exec(text)[1];<br />if(format != '') {<br />var txtDate = format.replace(/yyyy/i, date.getFullYear());<br />txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));<br />txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));<br />txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));<br />txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));<br />txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));<br />//or: txtDate = txtDate.replace("dd", date.getDate());<br />txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));<br />//or: txtDate = txtDate.replace("hh", date.getHours());<br />text = text.replace(/\[date\s+(.+?)\]/, txtDate)<br />}<br />}<br />return text;<br />}<br />if(urlMyProfile == "") {<br />var elements = document.getElementsByTagName("*");<br />var expr = /(^| )profile-link( |$)/;<br />for(var i=0 ; i<elements.length ; i++)<br />if(expr.test(elements[i].className)) {<br />urlMyProfile = elements[i].href;<br />break;<br />}<br />}<br />function getPostUrlsForComments(json) {<br />for(var i = 0 ; i < json.feed.entry.length ; i++ ) {<br />var entry = json.feed.entry[i];<br />for (var k = 0; k < entry.link.length; k++ ) {<br />if (entry.link[k].rel == 'alternate') {<br />href = entry.link[k].href;<br />break;<br />}<br />}<br />urlToTitle[href] = entry.title.$t;<br />}<br />}<br />function showRecentComments(json) {<br />var postHandled = {};<br />var j = 0;<br />if(numPerPost) {<br />while(numPerPost < numRecentComments) {<br />for(var i = 0 ; i < json.feed.entry.length ; i++ ) {<br />var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="<span style="color: #cc0000;"><b>Blogger User</b></span>") continue;<br />if(entry["thr$in-reply-to"]) {<br />if(!postHandled[entry["thr$in-reply-to"].href])<br />postHandled[entry["thr$in-reply-to"].href] = 1;<br />else<br />postHandled[entry["thr$in-reply-to"].href]++;<br />if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)<br />j++;<br />}<br />}<br />if(j >= numRecentComments)<br />break;<br />numPerPost++;<br />j = 0;<br />postHandled = {};<br />}<br />if(numRecentComments == numPerPost)<br />numPerPost = 0;<br />}<br />postHandled = {};<br />j = 0;<br />for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {<br />var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="<span style="color: #cc0000;"><b>Blogger User</b></span>") continue;<br />if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)<br />continue;<br />if(entry["thr$in-reply-to"]) {<br />if(!postHandled[entry["thr$in-reply-to"].href])<br />postHandled[entry["thr$in-reply-to"].href] = 1;<br />else<br />postHandled[entry["thr$in-reply-to"].href]++;<br />j++;<br />var href='';<br />for (var k = 0; k < entry.link.length; k++ ) {<br />if (entry.link[k].rel == 'alternate') {<br />href = entry.link[k].href;<br />break;<br />}<br />}<br />if(href=='') {j--; continue; }<br />var hrefPost = href.split("?")[0];<br />var comment = "";<br />if("content" in entry) comment = entry.content.$t;<br />else comment = entry.summary.$t;<br />comment = comment.replace(/<br[^>]*>/ig, " ");<br />comment = comment.replace(/<\S[^>]*>/g, "");<br />var postTitle="-";<br />if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];<br />else {<br />if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");<br />postTitle = postTitle.replace(/-/g," ");<br />postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);<br />}<br />if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {<br />postTitle = postTitle.substring(0, maxPostTitleChars);<br />var indexBreak = postTitle.lastIndexOf(" ");<br />postTitle = postTitle.substring(0, indexBreak) + "...";<br />}<br /><br />var authorName = entry.author[0].name.$t;<br />var authorUri = "";<br />if(entry.author[0].uri && entry.author[0].uri.$t != "")<br />authorUri = entry.author[0].uri.$t;<br />var avaimg = urlAnoAvatar;<br />var bloggerprofile = "http://www.blogger.com/profile/";<br />if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)<br />avaimg = entry.author[0].gd$image.src;<br />else {<br />var parseurl = document.createElement('a');<br />if(authorUri != "") {<br />parseurl.href = authorUri;<br />avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;<br />}<br />}<br />if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")<br />avaimg = urlMyAvatar;<br />if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")<br />avaimg = urlNoAvatar;<br />var newsize="s"+sizeAvatar;<br />avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");<br />if(cropAvatar) newsize+="-c";<br />avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");<br />if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)<br />authorName = txtAnonymous;<br />var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';<br />if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';<br />var clsAdmin = "";<br />if(urlMyProfile != "" && authorUri == urlMyProfile)<br />clsAdmin = " rc-admin";<br />var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601<br />var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);<br /><br />var txtHeader = txtWrote;<br />if(txtWrote.indexOf('[')==-1)<br />txtHeader = authorName + ' ' + txtWrote;<br />else<br />txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);<br /><br />var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);<br />if(!/#/.test(href)) href += "#comments";<br />document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');<br />document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');<br />if(comment.length < maxCommentChars)<br />document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');<br />else {<br />comment = comment.substring(0, maxCommentChars);<br />var indexBreak = comment.lastIndexOf(" ");<br />comment = comment.substring(0, indexBreak);<br />document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');<br />if(txtMore != "") {<br />var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);<br />document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');<br />}<br />}<br />document.write('<div style="clear:both;"></div></div>');<br />}<br />}<br />}<br />if(getTitles)<br />document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');<br />document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');<br /></script><br /></blockquote></div><br /><b>Recent Comments Widget With Post Titles (no avatars): </b><br /><script type="text/javascript">function toggleMe(a){ var e=document.getElementById(a); var i = document.getElementById(a + '_image'); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" i.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMILYF-aHMJEpvxv9y_WtVjIQYS_lTNg7DiAm1S0wZjGl2v_3rEWmhQXE3Caf0ee2rflbsU0J-ItFt3QEUF5CUAUpvOZ5F-C2SUnzSWWAeRs-dX6t59g0-rn4k4VliGCaL8ODKoWKaApNL/s1600/open_folder.gif'; } else { e.style.display="none" i.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7fSkkC_jKsgFJeDcluQZahFKYVzotm0D-QEnUChLXmXDo2iW5N21gafeQSJcwIGnwWxWKpg0Uo5PQY7R1lsJqa5g-tvvrp9wf8GORrhpvBcwyJ2J9n13st4fJ59JwTS-vnJZGqy4FNJ18/s1600/closedfolder.gif'; } return false; } </script> <br /><a href="https://www.blogger.com/null" onclick="return toggleMe('catalog')" style="cursor: pointer;"><img id="catalog_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7fSkkC_jKsgFJeDcluQZahFKYVzotm0D-QEnUChLXmXDo2iW5N21gafeQSJcwIGnwWxWKpg0Uo5PQY7R1lsJqa5g-tvvrp9wf8GORrhpvBcwyJ2J9n13st4fJ59JwTS-vnJZGqy4FNJ18/s1600/closedfolder.gif" style="border: 0px none; margin-right: 5px; vertical-align: middle;" />Click to see the code</a><br /><div id="catalog" style="display: none;"><blockquote class="tr_bq"><style type="text/css"><br />.rc{margin-left: 0px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px dotted;}<br />.rc-ico{float:left; margin-right:3px}<br />.rc-ico img {display:none; }<br />.rc-header{}<br />.rc-header a{color: #045FB4;}<br />.rc-body{font-style: italic; font-size: 12px; color: #444444; border: 0px dotted #000000;}<br />.rc-footer{font-size:11px; }<br /></style><br /><script type="text/javascript"><br />var numRecentComments = 5;<br />var maxCommentChars = <span style="color: #38761d;"><b>95</b></span>;<br />var trueAvatars = true; <br />var urlMyAvatar = '';<br />var urlMyProfile = '';<br />var cropAvatar = true;<br />var sizeAvatar = 50;<br />var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLkZ5WVZ7Zy26syx86R3JPt5Nd0Kbfbut_VWNOzmrhij6NtPYygKmfSi7GZFyPKECh7hPGUB7qEpIcL1v-SCIgVq_rcuEFiCEV1o3IzY_akZOFqplv7hn4fcm6LqpzWvnOpBpEaz5liWU/"+sizeAvatar+"/anonymous-Icon.jpg";<br />var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;<br />var txtMore = '';<br />var txtWrote = '[user] commented on [title]';<br />var txtAnonymous = ''; <br />var maxResultsComments = "";<br />var numPerPost = 2;<br />var maxPostTitleChars = 50; <br />var getTitles = true;<br />var maxResultsPosts = ""; <br />var txtTooltip = 'Date: [date MM-dd-yyyy hh:mm]';<br />var urlToTitle = {};<br />function replaceVars(text, user, title, date) {<br />text = text.replace('[user]', user);<br />text = text.replace('[date]', date.toLocaleDateString());<br />text = text.replace('[datetime]', date.toLocaleString());<br />text = text.replace('[time]', date.toLocaleTimeString());<br />text = text.replace('[title]', title.replace(/\"/g,'&quot;'));<br />var i = text.indexOf("[date ");<br />if(i > -1) {<br />var format = /\[date\s+(.+?)\]/.exec(text)[1];<br />if(format != '') {<br />var txtDate = format.replace(/yyyy/i, date.getFullYear());<br />txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));<br />txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));<br />txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));<br />txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));<br />txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));<br />//or: txtDate = txtDate.replace("dd", date.getDate());<br />txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));<br />//or: txtDate = txtDate.replace("hh", date.getHours());<br />text = text.replace(/\[date\s+(.+?)\]/, txtDate)<br />}<br />}<br />return text;<br />}<br />if(urlMyProfile == "") {<br />var elements = document.getElementsByTagName("*");<br />var expr = /(^| )profile-link( |$)/;<br />for(var i=0 ; i<elements.length ; i++)<br />if(expr.test(elements[i].className)) {<br />urlMyProfile = elements[i].href;<br />break;<br />}<br />}<br />function getPostUrlsForComments(json) {<br />for(var i = 0 ; i < json.feed.entry.length ; i++ ) {<br />var entry = json.feed.entry[i];<br />for (var k = 0; k < entry.link.length; k++ ) {<br />if (entry.link[k].rel == 'alternate') {<br />href = entry.link[k].href;<br />break;<br />}<br />}<br />urlToTitle[href] = entry.title.$t;<br />}<br />}<br />function showRecentComments(json) {<br />var postHandled = {};<br />var j = 0;<br />if(numPerPost) {<br />while(numPerPost < numRecentComments) {<br />for(var i = 0 ; i < json.feed.entry.length ; i++ ) {<br />var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="<span style="color: #cc0000;"><b>Blogger User</b></span>") continue;<br />if(entry["thr$in-reply-to"]) {<br />if(!postHandled[entry["thr$in-reply-to"].href])<br />postHandled[entry["thr$in-reply-to"].href] = 1;<br />else<br />postHandled[entry["thr$in-reply-to"].href]++;<br />if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)<br />j++;<br />}<br />}<br />if(j >= numRecentComments)<br />break;<br />numPerPost++;<br />j = 0;<br />postHandled = {};<br />}<br />if(numRecentComments == numPerPost)<br />numPerPost = 0;<br />}<br />postHandled = {};<br />j = 0;<br />for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {<br />var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="<span style="color: #cc0000;"><b>Blogger User</b></span>") continue;<br />if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)<br />continue;<br />if(entry["thr$in-reply-to"]) {<br />if(!postHandled[entry["thr$in-reply-to"].href])<br />postHandled[entry["thr$in-reply-to"].href] = 1;<br />else<br />postHandled[entry["thr$in-reply-to"].href]++;<br />j++;<br />var href='';<br />for (var k = 0; k < entry.link.length; k++ ) {<br />if (entry.link[k].rel == 'alternate') {<br />href = entry.link[k].href;<br />break;<br />}<br />}<br />if(href=='') {j--; continue; }<br />var hrefPost = href.split("?")[0];<br />var comment = "";<br />if("content" in entry) comment = entry.content.$t;<br />else comment = entry.summary.$t;<br />comment = comment.replace(/<br[^>]*>/ig, " ");<br />comment = comment.replace(/<\S[^>]*>/g, "");<br />var postTitle="-";<br />if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];<br />else {<br />if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");<br />postTitle = postTitle.replace(/-/g," ");<br />postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);<br />}<br />if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {<br />postTitle = postTitle.substring(0, maxPostTitleChars);<br />var indexBreak = postTitle.lastIndexOf(" ");<br />postTitle = postTitle.substring(0, indexBreak) + "...";<br />}<br /><br />var authorName = entry.author[0].name.$t;<br />var authorUri = "";<br />if(entry.author[0].uri && entry.author[0].uri.$t != "")<br />authorUri = entry.author[0].uri.$t;<br />var avaimg = urlAnoAvatar;<br />var bloggerprofile = "http://www.blogger.com/profile/";<br />if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)<br />avaimg = entry.author[0].gd$image.src;<br />else {<br />var parseurl = document.createElement('a');<br />if(authorUri != "") {<br />parseurl.href = authorUri;<br />avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;<br />}<br />}<br />if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")<br />avaimg = urlMyAvatar;<br />if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")<br />avaimg = urlNoAvatar;<br />var newsize="s"+sizeAvatar;<br />avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");<br />if(cropAvatar) newsize+="-c";<br />avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");<br />if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)<br />authorName = txtAnonymous;<br />var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';<br />if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';<br />var clsAdmin = "";<br />if(urlMyProfile != "" && authorUri == urlMyProfile)<br />clsAdmin = " rc-admin";<br />var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601<br />var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);<br /><br />var txtHeader = txtWrote;<br />if(txtWrote.indexOf('[')==-1)<br />txtHeader = authorName + ' ' + txtWrote;<br />else<br />txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);<br /><br />var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);<br />if(!/#/.test(href)) href += "#comments";<br />document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');<br />document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');<br />if(comment.length < maxCommentChars)<br />document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');<br />else {<br />comment = comment.substring(0, maxCommentChars);<br />var indexBreak = comment.lastIndexOf(" ");<br />comment = comment.substring(0, indexBreak);<br />document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');<br />if(txtMore != "") {<br />var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);<br />document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');<br />}<br />}<br />document.write('<div style="clear:both;"></div></div>');<br />}<br />}<br />}<br />if(getTitles)<br />document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');<br />document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');<br /></script><br /></blockquote></div><br />Some changes before saving it.<br /><br />- to set the number of comments to be shown, change the "<b><span style="color: orange;">5</span></b>" value from the orange line<br />- for the number of characters, change the "<b><span style="color: #38761d;">67</span></b>" (for the 2nd widget, it is <span style="color: #38761d;"><b>95</b></span>) value from the green line <br />- to hide your comments, replace the<b> </b><span style="color: #cc0000;"><b>Blogger User</b></span> text TWICE with your username<br />- to change the size of avatar, change "<span style="color: blue;"><b>50</b></span>" from the blue line. <br />- if you don't want rounded avatars, delete this line:<br /><br /><blockquote class="tr_bq"><strike>-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;</strike></blockquote><span style="color: #3d85c6;"><b>Step 4.</b></span> Save your widget and you're done! <!-- adsense -->

Recent Comments Widget with Hide Author Comments function For Blogger

A few days ago, Mrpolie asked if there's a way to hide the author comments in the Recent Comments widget so that we would be able to se...

Read more »

Add a Different Background For Author Comments in Blogger's Threaded Comments

In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything that makes them stand out from the others. To achieve this, we need to add a code in the Blogger's template and to modify the style according to our preferences.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOGmavJqp4QJa-Y9kYmlaUHxJ7A57tOSZvSE7YjTAuLZAfH71QRizv-SfkD8FSiallm97RS5EYzpPR9q9L5V49HoF2XwFlDUfeCRnoDM_HGdRtvFF1Ab39L5zYAUW7xTBGmV5wVJxamgP/s1600/how-to-add-a-different-background-color-for-author-comments-in-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, blogger comments" border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOGmavJqp4QJa-Y9kYmlaUHxJ7A57tOSZvSE7YjTAuLZAfH71QRizv-SfkD8FSiallm97RS5EYzpPR9q9L5V49HoF2XwFlDUfeCRnoDM_HGdRtvFF1Ab39L5zYAUW7xTBGmV5wVJxamgP/s400/how-to-add-a-different-background-color-for-author-comments-in-blogger-threaded-comments.png" title="how to change the background for author comments in blogger" width="400" /></a></div> <span style="color: #3d85c6;"><b><span style="font-size: large;"> </span></b></span><br /><h2><span style="color: orange;">How to highlight author comments in Blogger:</span></h2><span style="color: #3d85c6;"><b>Step 1.</b></span> Go to Template, click on Edit HTML<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLA2xqRpKDmu9DNin2il14ygiFmHb-8UFXoU-kM-ZGnk0dPslBj5AkipAi_P3QFWHaeJE1fQlwQ6XEdGLhJJOAHupByoWTM35IbfnHusM5x7TwcrgRVZx7mSGiVS9Db6ccU92aAVpBwRr/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger threaded comments, customize blogger comments" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLA2xqRpKDmu9DNin2il14ygiFmHb-8UFXoU-kM-ZGnk0dPslBj5AkipAi_P3QFWHaeJE1fQlwQ6XEdGLhJJOAHupByoWTM35IbfnHusM5x7TwcrgRVZx7mSGiVS9Db6ccU92aAVpBwRr/s320/blogger-template-edit-html.png" title="how to customize author comment in blogger threaded comments" width="320" /></a></div><br /><span style="color: #3d85c6;"><b>Step 2. </b></span>Click anywhere inside the code area and try to find - using CTRL + F keys - this tag:<br /><blockquote class="tr_bq"></body></blockquote><div style="text-align: center;"><b>Screenshot:</b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_GqqCvFtAvohH5-b5HM3OX6XLL_fDbIfhTpSvKnr0p-PlDVde9genv_pABisxrW2Vg3e-T1zngMXWgpTxll44SxuKFRXconWpiv1Y7zt2xfpuTIBP493cTmmUZKEFGb1DTveIhtsozW4/s1600/how-to-customize-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger comments, blogger tricks" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_GqqCvFtAvohH5-b5HM3OX6XLL_fDbIfhTpSvKnr0p-PlDVde9genv_pABisxrW2Vg3e-T1zngMXWgpTxll44SxuKFRXconWpiv1Y7zt2xfpuTIBP493cTmmUZKEFGb1DTveIhtsozW4/s400/how-to-customize-blogger-threaded-comments.png" title="background style for author comments in blogger" width="400" /></a></div><br /><span style="color: #3d85c6;"><b>Step 3.</b></span> Just above it, paste the following code:<br /><blockquote class="tr_bq"><script src='http://code.jquery.com/jquery-latest.js'/><br /><script><br />$(function() {<br />function highlight(){<br />$('.user.blog-author').closest('.comment-block')<br />.css('border', '<span style="color: orange;">1px solid #FFA500</span>')<br />.css('background','<span style="color: blue;">#F1F1F2</span> url("<span style="color: #0b5394;">http://www.blogblog.com/1kt/transparent/white80.png</span>")')<br />.css('color', '<span style="color: green;">#444444</span>')<br />.css('font-size', '<span style="color: #cc0000;">12px</span>')<br />.css('padding', '10px');<br />}<br />$(document).bind('ready scroll click', highlight);<br />});<br /></script></blockquote><br /><h3><span style="color: orange;">Customizing the Author Comments:</span></h3><br /><b>Border:</b><br />The line marked in orange represents the border's style.<br />What it can be done:<br /><ul><li>1px - you can increase the value to change the border's thickness</li><li>solid - change the border's style to <i>dotted</i>, <i>dashed, inset, outset </i>etc.</li><li>#FFA500 - this is the border's color value, change it with your own color </li></ul><!-- adsense --><b>Background:</b><br />The line marked in blue represents the background's style. You can use a plain color or an image. By default there's a combination of both (a white transparent image with a gray plain color).<br />To change/add:<br /><ul><li>a different color: replace the <i>#F1F1F2</i> value with your own (use <a href="http://helplogger.blogspot.ro/2012/02/color-code-generator.html">this tool</a> to find the hex code of your desired color)</li><li>an image: replace the defaul url <span style="color: #0b5394;">http://www.blogblog.com/1kt/transparent/white80.png </span>with that of your image </li></ul><br /><b>Font Color:</b><br />To change the font's color, replace the #444444 color value in green with your own. (you can use <a href="http://helplogger.blogspot.ro/2012/02/color-code-generator.html">this tool</a> to find the hex code of your desired color)<br /><br /><b>Font Size:</b><br />Modify the value in red by increasing/decreasing the "12" value in order to change the size of text.<br /><br /><span style="color: #3d85c6;"><b>Step 4. </b></span>Now Save your Template.<br /><br />To customize the entire style of threaded comments, please check my previous tutorial on <i><a href="http://helplogger.blogspot.ro/2013/03/how-to-customize-blogger-comments-by.html" style="color: #0000ee; text-decoration: none;">How to Customize Comment's Background, Font Color and Border in Blogger.</a></i>

Add a Different Background For Author Comments in Blogger's Threaded Comments

In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything...

Read more »