Skip to main content

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.

Comments

  1. 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.

    Any 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

    ReplyDelete

Post a Comment

Popular posts from this blog

Microsoft pays Facebook to put Bing on logout page

Facebook got its first customer for the logout page, and the customer is also OS giant Microsoft . Now, it may bee soon that you will get to see Bing page as you logout of the Facebook, though some of the people have got it already as it is testing phase . This step is taken by Microsoft to save its search engine so called BING 'Bing Is Not Google' . Microsoft has been spending millions of dollars to increase Bing's market share so this

JQuery Plugins Site Down

Two three days before when I entered to  http://plugins.jquery. com   I thought it might be a small error and will be fixed in a hour or so . But, when I returned it showed the same message COME BACK LATER.

Jailbreak for iPhone OS 6 Beta

If you are iPhone user then this post is surely going to surprise you. Whenever iPhone or iPad with new iOS is released then it takes some time for their jailbreak to come. But this time it is something special. It’s only 15 days from the date when iOS 6 was released and in this short span of time, iPhone Dev team has announced that they have released the jailbreak for it. Seems to be interesting and this news is hitting the web across the world. Some say that it’s just announcement and far from reality. Whatever is, in this post I am going to post the procedure to jailbreak iOS6. Hope you find it useful for you. So let’s have a look on it.