How This Works?
You can have look at our commenting system that we’re also using
both systems together with toggle. You will see the two icons and
between them a little message telling the visitors that they can use
Blogger and Goolge+ comments. By default, it will show the Blogger
comments and when someone click on Google+ icons then Blogger comments
will be hidden and Google+ comments will be appearing. To show the
header with icons, the post must have a Blogger comment otherwise it
will not be shown.
How This is Made?
We’ve made this with simple JavaScript and CSS and it will not
affect on loading speed. It just loads in micro seconds. Google+ comment
system is added the JavaScript which we’re going to add in blog
template in the tutorial and you’ll not need to enable it from Google+
area of blogger. Originally the developer of this hack is David Kutcher and Syed Faizan Ali so all the credits goes to him.
Why Use Both Systems?
The main reason is that we should use Google+ comment system but
due to it’s disadvantages it creates problem and due to these problem
we’re using Blogger comments with them. This will be fine from every
side. You will not loose your comments by allowing only Google+ users to
comment. By this your blog will be more Google friendly that is pretty
cool for every webpage. It will also help in improving the author rank
which is the future of SEO.
Tutorial
Well, after telling you something about this now it’s time to do
this hack. Now follow the below given steps carefully and don’t forget
to backup your template.
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML and Search For Below Code
<b:includable id=’comment_picker’ var=’post’>
.
.
.
.
</b:includable>
- Replace The Above Code With The Following.
<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 code, once again search another below code.
<b:includable id=’threaded_comments’ var=’post’>
.
.
.
.
</b:includable>
- Again Replace This Code With The Following One
<b:includable id=’threaded_comments’ var=’post’>
<div id=’com-header’>
<h6>Comment With:</h6> <img class=’com-on’ id=’com-norm’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6DThJeANakctCanWrd-jAjQIgQHg27dm8xte5UNbGxIHcvaM-bHDiAnwPvijbqAjjRpJX1Be2-nZH5nms5YOhONUjDl7TWugaYydL1HoRaysx1pMI8135B_FjwBbLgdiyhRWg8A-Au-er/s50/blogger_on.png’ title=’view Blogger comments’/><h6>OR</h6> <image id=’com-gplus’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0bAA2YXQf-zsZdHzxBs-gUgCNGDnU1JlQos2KE5SHi3DqkoBjkFLv6u6_k0Q3HWG-ffIq56EUZbrfG4K6_0zOZec9H4-jRNgyLJ-MZUcl06HDvyhLpNmuAnZBMdHorTvEBqyttv3EYEmZ/s50/plus_off.png’ title=’view Google+ comments’/><h6>The Choice is Yours!</h6>
<div id=’copyrigtsmbl’><a href=’http://www.mybloggerlab.com/2013/04/ow-to-use-blogger-and-google-comments-together.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>a
- Now finally save your template and you’ve done!
Need Help?
So friends, This was our little hack which is gonna rock. I hope
this tutorial is helpful for you and if you’re facing any problem then
feel free to ask in comments. I’ll reply you back soon. Stay connected
with us for more hacks and also subscribe us for getting updates in your
inbox. Take care. Happy Blogging!
Post a Comment