Thursday, August 2, 2018

Add/Install Google+ and Blogger Comments With Blogger

Users can easily comment on your every single post while reading your post or using the Google+ account. Today I'm going to show you how to attach/add Google+ and blogger comments only on blogger platform. It means when any webmaster create a post, he/she shares this post on Google+, So your post also available in Blogger and Google plus. Users/Viewers can comments on your post even on your Google plus share post. As you know Google plus is Google property and it's very powerful for SEO. If any visitors come to your post from google plus, Google considers that visitors as organic visitors.

By this way, you can increase blog Traffic, Google plus followers and Google plus circle. You can take advantage of the google plus comment system on blogger. You can reply easily of google plus commentator as well as a blogger on one platform.

How to Integrate Google Plus and Blogger Comments:

To add this installation as simple as possible, We used inline JQuery and CSS, but anybody can change it later. So let's start to add it.

Step 1. Go to your Blogger Dashboard, Open specific Blog, > then select "Template" and click on "Edit HTML"

Step 2. Clock anywhere on the code and press Ctrl + F to open the search box, Now Find the code below

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

Step 3. Copy the given below code and paste just <b:include data='post' name='post'/> after it

 <b:if cond='data:blog.pageType == &quot;item&quot;'><style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url( 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='' 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='' 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>

Step 4.  The code data-width='550' indicate that you can change easily by increasing/decreasing '550' according to your blog size.

Step 5. Now Save your Template, and check your blog to see if you have successfully added this code to blogger

Note: If this code is not working for you it means you must have to put JQuery script in <head> </head> section 

Add JQuery script: 

Paste the given below code before the </head> tag

<script src='' type='text/javascript'/>

You have Done. Your reader will enjoy the flexibility that your site provides and you will also get benefit from the inclusive services offered by Google.

Share this post of this site with your friends on social media sites. If you have any Question and any problem feel free to contact me in the comment section.

Add Social Sharing Icons with Email Subscription Widget Below Every Post

You have a blog and if your blog is with out collaboration of social media sites, then may be your blog worth is nothing in online world. In this post I will tell you how to add social sharing buttons with Email subscribe widget and facebook page like icon. If you add this widget in your blog, your viewers can easily share/like and subscribe your every post. This widget can help you a lot to popular you in social media sites.

Instructions to Add Widget in Blogger:
1- Go to blogger Dash Board →  Template →  Edit HTML

2- After it Find the shown code below by pressing Ctrl+F (Click anywhere in code then press Ctrl+F)


3- Now Copy code shown below and paste just after ( <data:post.body/> ) it.

<b:if cond='data:blog.pageType == "item"'><style>p#socialicons img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} p#socialicons img:hover { -moz-transform:  "><a href="" target="_blank" ><span style="font-size: xx-small;">Get This</span></a></div></center></b:if>

Customize this Widget
4- Replace USERNAME1 with your Feed Burner user name {by pressing Ctrl+F}

5- Replace URL HERE with you Facebook fan page URL

6- Replace USERNAME2 with you Twitter user name. 

7- Save Targeted widget and Enjoy.

Note: If this widget doesn't appear after paste Code, then find next [ <data:post.body/> ] code and paste widget code just after it. In case of me I was find this code for 4 time then paste widget code, So Widget will be show below every post. 

I hope you enjoyed this featured post. And I'm sure It's working for you. If you have any question and query please ask me in comment section and remember don't forget to share this post with your friends in social media sites.

Previous Post
Next Post