As part of updating my Blogger template, I added a badge to the sidebar which enables readers to directly connect to the a Google+ Gadget which we can add to our Blogger layouts in just a couple of clicks.
To add this gadget to your layout, click on the Layout link in the left hand side of your dashboard and choose to add a new gadget in the section where you would like it to appear.
Select the Google+ Badge gadget from the list of official gadgets (this currently appears near the very top of the list. You'll need to paste in your Google+ Page ID in the appropriate section of this pop-up window, like this:
Press "enter" to update the preview, and select whether you prefer a light or dark colour scheme. Finally, save your gadget to make your Google+ badge appear in your template layout.
But my Google+ badge doesn't appear!
If you are using an older or customized Blogger template, the javascript code required to render the Google+ badge (and other features) may not be present in your template.We can fix this by adding a single line of code to our template HTML.
Go to Template>Edit HTML in your Blogger dashboard and search for the opening <head> tag using your browser's search function.
Immediately before this line, paste the following line of code:
Now preview your changes. Once the preview has finished loading, you should see your Google+ badge appear in your layout as intended and can save the changes you have made.<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Customize your Google+ Badge gadget
To alter the appearance of your Google+ Badge, you'll need to alter the dimensions of the badge within your blog's HTML code. These dimensions are what effect the appearance of the Google+ badge as we can see in these examples provided by Google's documentation:
Since we cannot (yet) change the dimensions of our Google+ badge through the gadget's settings, we must do this by editing our template code.
Go to Template>Edit HTML and be sure to check the "Expand Widget Templates" box. Then search for the following line of code (or similar):
<g:plus expr:href='"https://plus.google.com/" + data:profileId' expr:theme='data:theme' height='69' rel='author' width='260'/>The width specified in the above line may be different in your own template.
We may only specify one of two heights for our Google+ badge: 69 or 131. If any other height is specified, the badge will not work.
By default, the badge gadget specifies the height as 69. If you would prefer to display a taller badge to display the profile pictures of your followers (as I have for this site) you will need to change the height from 69 to 131.
If you would prefer to display the narrow, compact Google+ badge (the third example in the image above), change the height to 131 and the width to 100.
Now preview your template to see how these changes will appear. Once you are happy with the appearance of your badge, save your template and enjoy your customized badge.
Note: the customizations you make to your Google+ badge will not appear in the preview if you edit your gadget. Also, if you choose to remove the gadget and later wish to add another, you will need to make these changes again.