How to Add Blogger and Google+ Comments System With Toggle

You might have noticed a blogger and Google+ comments system in many blogger blogs. Do you want to have the same commenting system with toggle on your blog too? Are you looking for the tutorial?

Then in today's we are going to discuss on the same.

Google+ comment is an awesome new commenting system for blogger. but the problem is that it requires an account on Google+ before comments. and if your site/blog readers doesn't want to have an account on Google+ then he/she will not be able to comment on your blog posts.

But you don't have to worry for this as we have a great solution for the same is that you are also enable to add blogger and Google+ commenting system together using toggle.

Here is the screenshot of the Google+ and blogger comment system together with toggle that you can see how actually it looks like.

Now, if you want to have this both commenting systems to be installed on your blogger blog. Then all you have to do is just follow the simple and easy steps given below.

Related : Add Missing Embedded Comments Form to Blogger

How to Add Google+ and Blogger Comments System with Toggle?

Go to Blogger Dashboard > Template > Edit HTML
Press CTRL + F to enable search box, then search for the following code :

<b:include data='post' name='post'/>

Now, After above code, Paste the following code :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #gplus-comments-visibility {display:none;}  .comments-icons {background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEoJLJ6fvQOelZGRATHJV3TTPHsd1WiuozCAs5cWNLnkbJOrwyfMMh973AGbZi43SgViX3DXuOfSGjhrx7ojdBntlx67FSFbUyC5rvJrCrMVO76dOetOyQBoh2_TragyLbyvScDtRxFq4/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>
<div class='comments-icons'>
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/AVvXsEj1AX3w-bEAWEDErPnWgCkrwDhOrfyhJuf5gpE7xJR0AjuwxqMH603Fc9gEdBo-0cmDBjnlLRzQGRy9dx2hmf6VwzCd_b6F5YHDLms6CeIP6Yp-eByh-hk5-RRRoIpZB73WpgDHoRsr7nk/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/AVvXsEgNk2K4_tir6KereHLIvPl8-G9TJptioJL_HX1n-B7NosjGf-tyFL4mPSFZuOC4K3QJosPAll5SrcwiFJ_XkJIs5sfc6WwC3xujQo1mp1dPtHrguw0h3VDcC-EOO06rs-oJhMivQ3dK6q0/s1600/blogger-logo.png'  width='35'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>       
</b:if>

Note: The data-width 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.

To make it works, your blog must have a jQuery plugin installed otherwise it won't be work. If your blog don't have a jQuery plugin, Add below line just above </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Finally save template and you're done !

Also see : How to Add Smileys & Emoticons inside Blogger Comments

Add Missing Embedded Comments Form to Blogger

I just downloaded a blogger template from a blogger template directory site. Template was simple and good looking that was designed and published on 2008. So thus, there was some bugs and an embedded comments form was missing. And here is the tutorial that will explain how i fixed it. Mostly now, it won't be required as now you can find a lot of templates without a single error or bug. but when you go through older custom blogger template you might face some issues with it but you no need to worry for that as i am here to solve your all problem with blogger. :) follow the steps given below to know how to add missing embedded comments form to blogger / blogspot.

The inline (embedded) comments form is provided by blogger officially. so there is option in settings to set up an embedded comments form in blogger. Go to blogger dashboard > Settings > Posts and Comments > Comments. Then click the dropdown menu and choose "Embedded" .

Now, check your blog once, Still if embedded comment form is not displaying, follow the next steps.

Related : Customize Blogger Threaded/Nested Comments with CSS

Well, in this step you will need to edit your blogger template code, but you don't need to worry as it's a very simple customization to make!

From your blogger dashboard navigate to Template > Edit HTML. search for the following code in your blog's HTML :

<p class='comment-footer'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl'  expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></b:if> </p>

Now, simply replace above code with below code :

<p class='comment-footer'><b:if cond='data:post.embedCommentForm'><b:include data='post' name='comment-form'/><b:else/><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl'  expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></b:if></b:if></p>

Finally, Save your template and you're done. Check your blog's post page there you should have a comment form right after / below the post.

If you can't find the code I've described above, then search for the code below :

<b:include data='post' name='comments' />

Immediately after this line, add the following line of code:

<b:include data='post' name='comment-form'/>

Then, save your template.

If you have any questions about this tutorial, Feel free to comment below. I would love to answer your each questions. :) Also do not forget to check out other blogger comments tutorials

Customize Blogger Threaded/Nested Comments with CSS

Here is this tutorial you will learn how you can customize your blogger threaded ( nested ) Comments with CSS. As you can see the screenshot below to get idea actually, how it will be look like after adding a CSS style to your blogger blogspot. Also you can see a demo of this stylish, customized threaded comments here [Link]

To have this stylish threaded comments on your blog, all you will need to add a CSS code to your blogger template.

Related :
-- Enable YouTube Video Comments on Blogger
-- How to Add Smileys & Emoticons inside Blogger Comments
-- Add Stylish Most Commented Posts Widget to Blogger

Customize Simple Nested Comments with CSS

Go to blogger dashboard > Template > Edit HTML
Click anywhere inside the text area to enable search box,
Type </b:skin> on search box to search for it.

Just above the </b:skin> add below code.

.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}

Changes :

- replace the #F9F9F9 value to change the background color of the comments;
- #555 to change the text comments color;
- #EEEEEE to change the color of the shadow around comments;
- 4px solid #EEEEEE to change the border width (4px), style (solid) and color (#EEEEEE) around comments;
- 1.190em to change the comments font size;
- to change the arrow color, replace the #EEEEEE value from color: #EEEEEE;
- to change the border width (7px), style (solid) and color (#EEEEEE) around avatars, modify this part: 7px solid #EEEEEE;
- to change the avatars' size and roundedness, change the 60px value;

You can use this color code generator to pick your favorite color

Finally, Save Template and you're done !

Add Stylish Most Commented Posts Widget to Blogger

Most commented posts widget is an another blogger widget which works as same as popular post and other widgets we used such as recent posts, recent comments, random posts etc. But as the name of this widget introduce itself that it will display the most commented posts along with the number of comments of post in stylish bubbles. This widget developer has used existing script from Yahoo! Pipes that uses json to parse and display the highest number of commented posts. If you would like to have this widget installed in your blog, then it will take just few minute to be done. let's add this dynamic and fast loading widget to your blogger blogs!

Image Credit : mybloggertricks.com

Also read : Recent Comments with Avatar Widget for Blogger

Add Most Commented Posts Widget to Blogger

Go to blogger> Layout > Add a Gadget
Choose HTML/Javascript from the list.
Paste following code just inside it.

    <style>

    /* ######### Most Commented Widget by bloggerwidgetgenerators.com ##########*/
    .commentbubble {
    background: #292D30;
    width: 49px;
    float: left;
    margin: 2px 20px 35px 0px;
    font-weight: bold;
    font-size: 1.3em;
    text-align: right;
    font-family: georgia,Helvetica;
    padding: 0px 0px 5px 0px;
    text-align: right;
    color: #FFF;
    text-shadow: 4px 1px #202022;
    position: relative;
    top: 5px;

    }
    .commentbubble:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 0px;
    top: 100%;
    border-width: 5px 8px;
    border-style: solid;
    border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    top: 34px;
    right: 6px;
    }

    </style>


    <script type="text/javascript">
    function getYpipePP(feed) {
    document.write('<ul style="list-style:none; ">');
    var i;
    for (i = 0; i < feed.count ; i++)
    {
    var href = "'" + feed.value.items[i].link + "'";
    var pTitle = feed.value.items[i].title;
    var pComment = + feed.value.items[i].commentcount;
    var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ;
    document.write(pList);
    //to remove comment count delete this line
    document.write('</a></li>');
    }
    document.write('</ul>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
     YourBlogUrl=http://www.bloggerwidgetgenerators.com
    &ShowHowMany=6
    &_id=390e906036f48772b2ed4b5d837af4cd
    &_callback=getYpipePP
    &_render=json"
    type="text/javascript"></script>

• Replace with your Blog URL  http://www.bloggerwidgetgenerators.com  
• Replace this 6 with how many post titles you wish to display in the list.
• To change the background color of the comment bubbles, Simply replace the yellow highlighted hexadecimal color codes ( #292D30 ) with your custom color.
• To change the Text color of the Comment count Replace #FFF.
• Replace #dedede if you wish to change the border color that appears below each post title. If you don't want to show a border below each list item then simply delete this line:  border-bottom: 1px dashed #dedede;

Finally save your widget, and you're all done !

Enjoy ! :)

How to Add Smileys & Emoticons inside Blogger Comments

Hello friends ! You might seen smileys and emoticons inside the blogger comments in many blogger blogs but you have the question about how you can add that smileys to your blog at comments then here is the another blogger tutorial from my side about what you are looking for. In one of mine previous post i shared how to enable video comments on blogger comment that also you might like to have on your blog and to get it feature available on your blog you have to just go and grab it.

Also see : Enable YouTube Video Comments on Blogger

Well, here is the tutorial that you have to follow in order to enable your readers / visitors to leave their comments with smileys and emoticons. if you would to show demo then check out the screenshot below to get idea actually how it looks like.

So, if you like to have this awesome feature enabled to your blogger comment system then follow the given steps below :

1. Go to blogger dashboard > Template > Edit HTML
2. Press CTRL + F to search for </body> tag, then copy and paste below code just above it.

<b:if cond='data:blog.pageType == "item"'><style  type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#fff;background-image:-ms-linear-gradient(right,#fff  0,#fff9f2 100%);background-image:-moz-linear-gradient(right,#fff  0,#fff9f2 100%);background-image:-o-linear-gradient(right,#fff 0,#fff9f2  100%);background-image:-webkit-gradient(linear,right top,left  top,color-stop(0,#fff),color-stop(1,#fff9f2));background-image:-webkit-linear-gradient(right,#fff  0,#fff9f2 100%);background-image:linear-gradient(to left,#fff 0,#fff9f2  100%);border:1px solid  #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0  4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px  6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px  6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px  rgba(0,0,0,0.1),0 1px 1px  rgba(0,0,0,0.3);font-weight:normal;color:#333}.emoWrap:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px  solid #ccc;border-right:20px solid  transparent;width:0;height:0;line-height:0}</style> 
<script  type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]></script><script src='https://googledrive.com/host/0B6-apgHh7s2tZG9oR3JMNlN6RHc/blogger-comment-emoticons.js' type='text/javascript'/></b:if>

3. Now, make sure your blog have jQeury plugin installed , if not then place below code after the <head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

4. That's it ! Now just save your template and you have enabled smileys to your blogger commenting stream.

If you have any questions or suggestion about this article or this blog then you can feel free to say by commenting below.

Thanks :)

Enable YouTube Video Comments on Blogger

Enable YouTube video comments on blogger, actually, it isn't officially provided by blogger but we can make it possible using JavaScript. After installing JavaScript on your blog, your readers will be enable to do comment on your post with YouTube video. sometimes we need to explain something via comment which cannot be done with text i mean we need to explain it with some examples then video comment is one of the best way to show what you are talking about on comments. also it could helpful feature on many way. so, guys if you found that enabling video comments on your blog is really useful for you and you want to have this feature on your blog, then you just need to follow simple and easy steps given below.

Also see : Blogger XML Sitemap Generator

How to Enable YouTube Video Comments on Blogger ?

Go to Blogger Dashboard > Template > Edit HTML
Search for </head> tag.
Copy and paste below code just above </head> tag.

 <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script src='http://makingdifferent.github.io/blogger-widgets/YTcomment.js' type='text/javascript'</script>

Finally, Save your template and you have enabled YouTube video comment on your blog.

Now, whenever, you or your readers have to embed YouTube video on comment then just need to add below code into comment textarea box and replace "YT-URL" with YouTube URL.

[video=YT-URL]

If you have any query about this tutorial you can ask by joining the discuss here to find out the best answers by the admin or community.