How To Use Blogger And Google+ Comments System Together In Blogger?

On : 2/01/2014

In : Blogger Tricks, Comments, Widgets

As You Know That Blogger Platform Is Growing Day By Day, Google Is Introducing Many New Features Along With It. Google Had Rolled Out New Google+ Comment System In Blogger To Use For Better Appearance And Traffic. The Blog Always Have Advantages And Disadvantages Of It. So, We've Discussed About Enable Google+ Comments In Blogger, This Article Is Similar To That One. When We See Advantage Side Which Is Having To You, We Always Think That Why Shouldn't We Apply It For Advantage For Us. But Every People Want That No Disadvantage Should Come In His Blogger. So Here Newbies Get Confused To What Should They Go. But We Have A Great Solution For It, That Is We Should Use Both Google+ And Blogger Comments In Blogger. Basically Or Default, The Comments System Is Blogger Comments And Then We Apply Google+ Comments If We Want But What If We Apply Both Of Them?. Yes It Is Possible In Blogger Now, We Can Apply Both. We Are Going To Discuss About It Below. So Read Carefully And Learn Below.

How This Will Work In Blogger?

So, Working Of This Comment System Is Very Simple Like That One Of The Blogger And Google+, But There Are Some Changes. If You Are Going To Comment, You Will See Two Icons, The Default Enabled Icon Will Be Blogger And If We Click On It If It Is Not Selected, Then The Blogger Comment System Will Appear, Then On The Right, There Will Be A Google+ Comment Icon And If We Click On It, The Google+ Comments Will Appear. So It Will Give You Great Advantage That The User Can Do This Comment By His Own Way. But See The Disadvantages And Advantages Carefully In The Previous Enabling Google+ Comment System In Blogger. On Thing Remember, Your Each And Every Post Must Contain Atleast One Comment To Show Google+ Comments Otherwise It Will Not Work.

How Made It?

This Is Made With Simple Javascript And CSS Language So It Will Not Affect Your Loading Speed Of Your Website. Javascript Allows To Use Blogger And Google+ Comments System While CSS Makes It Professional And Perfect For You. Remember That While Applying These Both System, Disable Your Google+ Comments In Blogger. Well, I Want To Tell The Developer Of This Comments System Is David Kutcher From BlogXPertise. But I Have Made For You Myself!.

Why To Use These Both Systems In Blogger?

So This Question Might Have Come In Your Mind That Why To Add These Both Systems Together In Blogger. But Due To It's Disadvantages, You Might No Use These System. This Will Be Fine For Every Side. You Will Not Loose Your Comments Via Adding Google+ Comments. But This Allow On Disadvantage Which Is That Spammers Can Spam Comment In Your Google+ Comments Because It Has Not Moderation Requests. Which Means That If They Found That You Have Comment Moderation In Blogger Comments, Then They Can Annoy You By Google+ Comments. But The Advantage Is That Your Blog Will Now More Google And Google+ Friendly, Which Will Allow Many Peoples To Arrive On Your Website Because Now A Days, Google+ Is Also Getting Very Popular.

Adding In Blogger

So This Is The Main Part Of Our Today's Post. I Recommend You To Backup Your Template In Case If You Stuck In This Tutorial.

Go To Blogger.com >> Your Blog >> Template >> Backup/Restore.
After Your Template Backup, Click On "Edit HTML" In The Template Tab.
Search For The Following Code Below:-

<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>

After Finding The Above Code, Replace It With The Following Code. Don't Forget To Replace The Whole Code Until </b:includable>.

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='threaded_comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

After Replacing The Above Code, Let's Find For Another Code Below:-

<b:includable id='threaded_comments' var='post'>
.
.
.
.
</b:includable>

Replace The Following Code Again With The Code Below:-

<b:includable id='threaded_comments' var='post'>
<div id='com-header'>
<h6>Comment With:</h6> <img class='com-on' id='com-norm' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments'/><h6> ← OR → </h6> <image id='com-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/><h6>The Choice is Yours!</h6>
<div id='copyrigtsbt'><a href='http://bloggingtutorials2.blogspot.com/2014/02/how-to-use-blogger-and-google-comments_1.html'>Get This Widget</a></div>
</div>
<div id='comment-zone'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script src='https://googledrive.com/host/0B3Ztl1RRz6W7NWNHalYzOWh5MzQ'/>
<style>
#gcontainer {
display:none;
}
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left
}
#com-header {
border: 1px solid #d2d2d2;
padding: 10px;
float: left;
width: 650px;
margin-bottom: 20px;
background: #f5f5f5;
}
#com-header h6{
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
}
#copyrigtsbt {
float: right;
margin-top: 20px;
border-top: 1px solid #d2d2d2;
margin-right: -10px;
padding-right: 10px;
padding-top: 5px;
padding-left: 10px;
border-left: 1px solid #d2d2d2;
padding-bottom: 5px;
margin-bottom: -10px;
font-size:11px;
background: #fff;
}
#copyrigtsbt a {
text-decoration:none;
color:111!important;
}
</style>
</div>
</b:includable>

Finally Click On "Save Template".
CONGRATULATIONS! That's All.

Facing Problem?

Guys, If You Found This Error While Saving Template "The widget with id "Blog1" cannot contain element: "#text". A widget can only contain b:includable elements.", Then See The Last Line Of The Above Code, There Will Be Written Like This "See More - http://bloggingtutorials2.blogspot.com/blablablabla", Then Remove This Code From The Last Line And Then Save Your Template.

So Friends That Was The Tutorial For You To Use Blogger And Google+ Comments System In Blogger. I Hope You Will Like This Post. If You Are Facing Problem In Adding The Code Above, Then Ask In Comments, Because Comments Are Always Appreciated; Comments Are Always Helpful. Share This Post With Your Friends And Blogger Fellows And On Social Networks. Also Subscribe Us Now To Receive Hot Updates From Us Straight In Your Inbox. Get In Touch With Us. Happy Blogging!.

728x90 Ad Space

Saturday 1 February 2014