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.
Isn't changing dimensions violating T&C? Bad part is even after so much time, google hasn't brought out any modifications or enhancements. The zooming thing doesn't seem to be a violation to me, but not sure if Google thinks the same too.
ReplyDeleteAny way there are lots of alternate third party badges which look better than the G+ one which are same. E.g. - http://goo.gl/VcoHv
I don,t think it is violation.
Delete