-->

Saturday, 27 July 2013

2 Google Plus Badge Widget with Author Image For Blogger

at 07:35
Google widget
Google Plus Badge is important to grow your Google community as well as Search Engine trace it as trusted site. So blogger should use Google Plus badge, however default Google plus badge is not suite your sidebar or footer bar because it width is within 200px but your side bar or footer bar is within 300px as a result we can see a small gap beside Google Plus widget. So I have customized it little bit to tailor your sidebar best way. In this widget you can add total number of member on your circle but you have to change it manually and author picture beside Google Plus widget that make it professional.
Live Demo




Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget
<div  style="width:280px; padding:10px 10px 5px 10px; margin-bottom:3px; border:1px solid #dcdcdc;">
<a href="https://plus.google.com/u/0/102331886274459115104/"><span style="font-family: Georgia, cursive;"><span style="color: #04BDFA;">Mohammad</span><span style="color: #FF0000;"> Rabbi</span></span>
</a> in <a rel="author"href="https://plus.google.com/102331886274459115104">100+</a> Circles →<div style="clear"><br />
<a href="https://lh3.googleusercontent.com/-zDo7L4DAYmM/AAAAAAAAAAI/AAAAAAAACA0/91nAwB2_l4E/s48-c-k/photo.jpg"><img width="54" height="54" style="margin-right:10px;" src="https://lh3.googleusercontent.com/-zDo7L4DAYmM/AAAAAAAAAAI/AAAAAAAACA0/91nAwB2_l4E/s48-c-k/photo.jpg" align="left"/></a>
<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<g:plus href="https://plus.google.com/102331886274459115104/posts" rel="author" width="200" height="79"></g:plus></div></div>

Step 5 Now Hit on save Button

Customization

  • Change Mohammad Rabbi with your name
  • Change 102331886274459115104 with your Google Plus ID
  • Change https://lh3.googleusercontent.com/-zDo7L4DAYmM/AAAAAAAAAAI/AAAAAAAACA0/91nAwB2_l4E/s48-c-k/photo.jpg with your image.
Share this article :

2 comments:

  1. It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thanks.
    website design

    ReplyDelete

 

Labels

Labels

Labels

Labels

Copyright © 2013. Blogger Spice - All Rights Reserved