Adding A Google+ Badge To Blogger (Updating My Blogger Template)

Adding a Google+ badge to our Blogger templates enables readers to easily connect with our Google+ page. This can be achieved in just a few simple steps by adding a Google+ Badge gadget; it's also possible to customize the badge and change the display effect.

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:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

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.

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.

Did you find this tutorial helpful?

I hope you have found this documentation of my update process useful for adding and customizing your own Google+ badge. Please feel free to leave your comments below and don't forget to follow on Google+!

Free Blogger Backgrounds And Textures To Spice Up Your Site

Background images can instantly transform the appearance of our Blogger sites. Using the Blogger template designer, we can easily upload and configure a new background image in just a few clicks, while those using older templates need only add a few lines of code to achieve a dramatic effect. In this post, you'll find resources for hundreds of different free backgrounds, patterns and textures you can use to spice up your Blogger site, along with instructions for applying this simple but extensive effect. Large background images Large background images enable us to display a single large image behind the main content of our site, such as a photograph or complementary texture. Here is a selection of excellent resources for large background images and textures: HOT Bliggity Blog Provides a huge selection of large background images with a contrasting central panel to offer contrast for the main site content. Shabby Blogs A beautiful col...

Baca selengkapnya

Another Blog Is Already Hosted At This Address - How To Fix

When attempting to set up their Blogger custom domain, many Blogger users have received the following error message: Another blog is already hosted at this domain Although I have set up many custom domains to use with Blogger , until this weekend I had never experienced this issue for myself (and was unable to offer any definitive solution for those experiencing this problem). My friend was experiencing this very persoalan after setting up her new blog a few days ago. We have been able to find some solutions which I hope may help others who see this error message when attempting to set up their custom domain. Assuming you have already configured the DNS settings for your particular domain provider and have attempted to publish to a custom domain through your Blogger dashboard, here are the steps you should take: 1. Publish back to your Blog*Spot domain In order to make your blog accessible while troubleshooting your custom domain, it is advisable to publish back to your Blog*Spot...

Baca selengkapnya

Google Blogger For Dummies To Be Released In February!

If you're familiar with the "Dummies" series of books, you'll understand how helpful and insightful these textbooks can be in dealing with any subject. That being said, I'm happy to announce that Google Blogger for Dummies is due to hit bookshops on February 3rd. It's available to pre-order now from Amazon.com (priced at $16.49) and will be available in Barnes and Noble, Waterstones and other bookshops, and also directly from Wiley. The author, Susan Gunelius, has been kind enough to send me a 60 page preview of this book, complete with a full and detailed table of contents and two sample chapters for my preliminary review. Also, when the book is released early next month, Susan has graciously offered me a copy of the book so that I can review it in it's entirety and offer readers my insights. What Google Blogger for Dummies will cover Being a "Dummies" guide, Google Blogger for Dummies will cover both the basics of using Blogger (crea...

Baca selengkapnya

lovethemedownload

Cari Blog Ini