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/AVvXsEg1c6acQG8lLHzsXtn0It_Goc7Plzpq0z5RLaMsITxnwJUnDBEEy3_Zi9A3T18p7ADZEVD_owSasEDfTrVPuGcZSJkYjuD2Kr30OJ19eGxN3L7xcIl5l13S66QRha6j_5KJdP0ysPDF8j6K/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/AVvXsEgJYL_9r-8212M7362av0MJc025hC2_oaiPqBrvYLjHdMJr4YiM7qfAk3g_NHGYaRKgNpH5vk5KubE6ZbymE06WYpF3ROBu2ub0J41ZA4rdpjaUes_sAeLdHCVkoAqdtmMIoWRZT9GpFVzQ/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/AVvXsEiGpe7mlq2OSfiVoLxh179dRPj9QSbShHbyT6BTKGGieYc6D709vS22v-zL9vHaSfvX5pXbCLpva4arhsKegfoFM5b6AjQzWJlI-HDrD7-NHM3xDZTKSdV7ACXTmG1HMkV7JHSjwxRhaoIn/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/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/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/AVvXsEiLfZGUz_ltJYtwZLmfazCzdUex_IySNW6zDN9Lq9CauxFlnf7EoNV3E3I5oJnHsxyn0q2Ksi8p8Tw6jONo64_6L8GMVc8fez7XlLTZtBjT4tozFpgmL5bGa3uM8hUd6MdB8njrwHz77udf/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 »

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/AVvXsEixHssocU5qXkCxxSZ1TJ7UtDSgmy0m89EMVS8-uzNaLU8FEJPISToN7tQeC-sTT5wgMBxsEzjutf9gHuWCqh3vjLW2885vEs_NHoxwmsD796rvgvdxvPPRb9ZgndXA8QU00mxvX6jFt-2t/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/AVvXsEixHssocU5qXkCxxSZ1TJ7UtDSgmy0m89EMVS8-uzNaLU8FEJPISToN7tQeC-sTT5wgMBxsEzjutf9gHuWCqh3vjLW2885vEs_NHoxwmsD796rvgvdxvPPRb9ZgndXA8QU00mxvX6jFt-2t/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/AVvXsEgkg98s3iJp7UuhdpFe1FmlHigG5PSJuZXWlk1vs8tdfOh5rHb2Y_4xzgLUeJiC7vlysP6OiCAi8ZjoWbBbuD9JqPJHI3pDoG5ppKEkQfMPGT2lYyekBKUBR45OmU4MAVJcLyNGeuEatLNl/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/AVvXsEgkg98s3iJp7UuhdpFe1FmlHigG5PSJuZXWlk1vs8tdfOh5rHb2Y_4xzgLUeJiC7vlysP6OiCAi8ZjoWbBbuD9JqPJHI3pDoG5ppKEkQfMPGT2lYyekBKUBR45OmU4MAVJcLyNGeuEatLNl/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/AVvXsEiuwwSnem78XI4Wybaf0cf5RMBQsZRsrcoDPYwQYCSEeTUUxR1LCm-1jdcyaxWyT_Z0wpL37ITswrblkW5L1wkJHn4UjxQ3kR9alzLTkHOzCwR7z1kVrPoucL0REmyhHKQ3qK8M2rwYi9PJ/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/AVvXsEiuwwSnem78XI4Wybaf0cf5RMBQsZRsrcoDPYwQYCSEeTUUxR1LCm-1jdcyaxWyT_Z0wpL37ITswrblkW5L1wkJHn4UjxQ3kR9alzLTkHOzCwR7z1kVrPoucL0REmyhHKQ3qK8M2rwYi9PJ/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 »