How It Work?
You can see many commenting system like below this.
- Recommended : Facebook Comments Inside the Tabs for Blogger Blogs
You can see the two images and between them a short message telling the visitors that they can use Blogger Commenting or Google+ Commenting systems? By default setting it will show the Blogger comments and when anyone click on Google+ logo then blogger comments will be hidden and Google+ comments will be appearing at the place of blogger comments. If anyone click on blogger or Google+ icon then other icon will seen in black and white styles otherwise it will not shown.
Why Using These Two Commenting Systems?
The main purpose is that we should use Google+ with its comments system but due to it's disadvantages it creates many problem for blogger comments system. This will be fine from every side. You will not loosing your blogger comments by enabled only Google+ comments. By this method of both comments are using in blogger blog are effect any part of your blog it just only show both systems comments. This systems will be more Google friendly that is simple and pretty for every posts and pages of your blogger blog. It also improve your rank which is the future.
How It Made?
We've made this system with the help of JavaScript and CSS and it will not affected on your blog loading speed. Google+ comments system is added the JavaScript which we are going to add in blogger template the posts and you will not need to again enable from Google+ section of blogger. This Both systems are developed by Syed Faizan Ali and David Kutcher so all credits goes to them.
How To Show Google+ & Blogger Comments Together?
Well, after explain it, now it's time to add this in your blogger blog. Now follow the simple steps and don't forget to before the editing your template make its backup.
- Go to Blogger Dashboard>>Template>>Edit HTML
- Find the below code using (Ctrl+F)
<b:includable id='comment_picker' var='post'>
.
.
.
</b:includable>
- Replace the above code with the following below coe.
<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>
- Now find the below code.
<b:includable id='threaded_comments' var='post'>
.
.
.
</b:includable>
- Replace the above code with following below code.
<b:includable id='threaded_comments' var='post'>
<div id='com-header'>
<img class='com-on' id='com-norm' src='https://lh4.googleusercontent.com/-lpZEcOM0zb0/U7K69Q84wJI/AAAAAAAAAR0/ICqZsVUJqac/h120/blogger.jpg' title='view Blogger comments'/><h6><h6>← Blogger OR Google+ →</h6></h6> <image id='com-gplus' src='https://lh6.googleusercontent.com/-23L5rFcsPlE/U7K4MvDhmLI/AAAAAAAAARk/zi0J_g2L-_4/h120/google%2B.JPG' title='view Google+ comments'/><h6>The Choice is Yours!</h6>
<div id='copyrigtsmbl'><a href='http://nextbloggertricks.blogspot.com/2014/07/show-google-and-blogger-comments.html' id="mblrights">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/0B0WJjcJEFNziQU01STJVc3RzeWc'/>
<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: 580px;
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;
}
#copyrigtsmbl {
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;
}
#copyrigtsmbl a {
text-decoration:none;
color:111!important;
}
</style>
</div>
</b:includable>
- Now finally. Click on "Save Template" Button.
- CONGRATULATION You're successfully add this plugin in your blogger blog.
Last Words
So Bloggers, this was our small tutorial or blogger trick. I hope you can add this both systems in your blogger blog, if not? so please leave a comments for your solution and don't forget to like our Facebook Page and also share this post with your friends on social networking sites.
Happy Blogging!
No Comment
Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.