As part of updating my Blogger template, I added a badge to the sidebar which enables readers to directly connect to the official Blogger Buster page on Google+. I've documented my methods here for other Blogger users who may find this tutorial useful.
Find the ID number for your Google+ pageBefore adding a Google+ Badge gadget, you will need to know the ID of the Google+ Page you would like to connect with. This can be either a personal or business page.
To find the ID for your page, open up your Google+ page in your browser and look for the 21 digit number in the address bar. Copy this number to your clipboard or paste into a text file for later use.
Take a look at this page on the Google Developers site to see a visual guide.
Add the official Google+ Badge gadget to your Blogger layoutThe Blogger Team recently added 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.
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:
Customize your Google+ Badge gadgetTo 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.