Blogger Tips & Tricks

I hope that you might be familiar with the latest commenting system Google has introduced that integrates Google+ comments with Blogger blogs. This new commenting system is a major improvement over the default Blogger system, and it supports threaded comments. It also looks a lot better. We earlier shared a tutorial on how to enable this new Google Plus commenting system for Blogger blogs. But some people still have problems implementing it on custom templates. For them, we have compiled this short tutorial on how to effectively implement and use this new improved commenting system.

Switching To Google + Comments

Displaying Google comments on custom templates

Custom templates have customized widgets that usually override the default settings. And that is why this commenting system might not work with custom templates. However, if you were to somehow remove those overrides, the commenting system would display on your blog without a hitch.

To do that, you can revert your Blog Widget to defaults in your template HTML editor via the following steps.

• From inside your blog's dashboard, click on Template from the left sidebar.
• Click on Edit HTML

(Before moving on, we'd suggest you backup your template, just in case anything goes wrong)

• Click on the Revert Widget templates to defaults button
• Now, Be careful to select Blog1 Widget from the list. Do not select any other, as it will reset other widgets to default as well.

All you have to do is replace a couple lines of code with another. From inside your HTML editor, press Ctrl + F and search for "threaded_comments". You will see a chunk of code as shown below.

<b:if cond='data:blog.pageType == & quot;static_page&quot;'>

   <b:if cond='data:post.showThreadedComments'>

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

      <b:else/>

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

   </b:if>

</b:if>

<b:if cond='data:blog.pageType == & quot;item&quot;'>

   <b:if cond='data:post.showThreadedComments'>

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

      <b:else/>

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

   </b:if>

</b:if>

 Carefully look at the bolded code, and then replace them with the following line of code.

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

 If you want to display comment count, you can simply modify the above line of code

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

 Still not working? Please feel free to mention your queries in the comments below. And please try to be as relevant as possible. Thank you :)

Since we know that Blogger recently implemented Google Plus comments on their Blogger platform, and we know that many bloggers like you have gone ahead and implemented this new functionality to your blogger blogs. But a lot of our readers have been asking us how to add Google Plus comments, or Google Plus comments API  to Blogger custom templates? This feature turns on and off smoothly for default templates. But most bloggers don't use default templates. For them, we have compiled this short tutorial on how to implement Google Plus commenting system on custom Blogger Templates.

Enabling Google Plus comments

To Enable Google + Comments on blogger,first log into your Blogger account, and click on the blog you want to add Google Plus comments to. Now, click on the Google+ option on the left sidebar. You must be the admin of a blog to be able to view this option.

Now, you need to upgrade our account, and integrate it with Google Plus if you haven't already done so. You will get a "Get Started" button if you haven't. Follow the simple instructions, and then move on to the next step.

Check the option that says Use Google+ Comments on this Blog - For default templates, this is pretty much all you need to do.

For custom templates, here's what you need to do;

• Click on the Template tab from the left sidebar, and then click on Edit HTML.
• From the code editor, press Ctrl + F, and search for the following line of code

<div class='comments' id='comments'>

• After the above code Just paste the Below Code.

 <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl'expr:data-viewtype=' data:post.viewType'/>

 Take care not to make a mistake while editing. And it would be a good idea to backup your template (Backup/Restore option at the top-right), just in case.

For comments to work on custom templates, you need to add the code as well as to enable it.

How to add "Reply Button or Link" to Blogger Blog.

Adding the Third Sidebar Column in Blogger Template

And change float to:

What is “Status Message Bar” in Blogger Blog? 

You can Remove or Hide this message by following simple tricks

If you feel like changing your blog’s social sharing widget then you’re in luck. Today’s featured tutorial involves a new and refreshing social sharing widget design courtesy of Abu Shaleh.
The widget appears as a simple grey circle with the word ‘Share’ written inside it but once you hover your mouse cursor over it, four share buttons appear spinning and zooming out of it: a Facebook ‘Like’ button, a Google +1 button, a Tweet button and a ShareThis button.
Check out the live demo.
Here’s how you can install it to your blog:
In your Blogger dashboard, go to Design and then click on Edit HTML.
Check the Expand Template widgets box.
Search for the following tag or line of code by pressing Ctrl+F.

<div class=’post-footer-line post-footer-line-1’>

Copy/paste this CSS/JavaScript code immediately right after/below it:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.ringMenu {
width: 100px;
margin: 150px auto;
}
.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
background: rgba(50,50,50,0.7);
text-align: center;
line-height: 100px;
-webkit-border-radius: 50px;
border-radius: 50px;
font-size: 20px;
}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
text-decoration: none;
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -70px;
left: 50px;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -70px;
left: 50px;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 10px;
right: -50px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 10px;
left: -50px;
}
</style>
<div>
<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"});</script>
<ul>
<li><a href="#main">SHARE</a></li>
<li><span class='st_fblike_vcount' displayText='Like'></span></li>
<li><span class='st_sharethis_vcount' displayText='Share'></span></li>
<li><span class='st_plusone_vcount' displayText='+1'></span></li>
<li><span class='st_twitter_vcount' displayText='Tweet'></span></li>
</ul>
</div>
</b:if> 

Save your template and that’s it. You’re done!

What is “Status Message Bar” in Blogger Blog? 

Have you faced any difficulties to show some particular codes or snippets within Blogger Post Editor or within the comment section? I hope, most of you did and still do. Well, I have the perfect solution to this.
While writing you will notice that every time you use "less than" sign (<) or "greater than" sign (>) to show JavaScript or HTML codes and snippets, either in Blogger Post Editor (in HTML mode) or within comments, it does not get published or better say, not visible.


This happens because Blogger recognizes it as codes that should be used for formatting purpose only. The only solution is to encode them.
So to show JavaScript or HTML codes within Blogger posts or comments, use &lt; instead of < and &gt; instead of >. Now if there are big codes then search for online tools to encode your codes.
This is the simplest method to show JavaScript and HTML codes within Blogger comments or posts