How to change width of Google+ Badge using CSS

The problem all the bloggers and sites are finding to customize (especially change the width) the Google+ Badge.
Now the problem is that most of the templates have 250px sidebar but the Google+ Badge width is 300px.





Now the trick lies with CSS as it provides solution to most of our site related issues.

There are two tricks.

The First trick is about changing the width of the Google+ Badge.



Now as you can see the Badge is cropped and is fitted into the sidebar. The CSS code used for this is


To change width you just need to change the pixels. But I know no one would like to crop the Badge as it looks crap.

So, for that you can use the second trick. It is also a CSS trick.




As you can see the size of badge is decreased and it can be fitted into any sidebar using the CSS code below.



Now to edit you need to change only the values such as zoom and other transformation so that it is visible in all the browsers.

I'll recommend you to let the zoom have value 1.0 and only change the transformations.

As the value of zoom is changed the Google+ Badge is cropped from bottom.

This is called a real CSS Trick.

I am not able to show you live badges due to some template problems Google+ Badge is not rendering.
You can try it and it is working cent percent.
Also For Second trick you can see demo here Navneet Pandey.