I have the following code for Google +1 Button <!-- Place this tag where you want the +1 button to render --> <g:plusone size="tall"></g:plusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> Code (markup): But I wanna make this button float to the right bottom corner of my page, how do I do it? THanks
Hi, I think can place this tag within a <div> and float it right <div class='right'><glusone size="tall"></glusone></div> and post it after your content but before the footer to have it on the right bottom corner of the page. Unless you want it at the very bottom of the page, in which case you could post it in the footer.
Thank you for your reply, but I'm confused... What' the faces all about??? where in the code provided do I insert google's code?
Never mind, I got it.. I was confused about the faces on the code but that's only because you didn't wrap your code .. I'm gonna try this out.
If that doesn't work, try this <div style="float: left; margin: 5px;"><g:plusone size="tall"></g:plusone></div> Code (markup): What i've done is made it float to the left of the content (you could change it to float: right; to make it float to the right) which automatically makes it an inline element (it doesn't fill 100% of the space it's in, just the space it needs) and added a 5px margin around it so it doesn't touch text and look ugly. The only problem now is on really short content, that'll flow over the box if the article isn't longer than the size of the button and it's margin. Easily fixed, though - just add <div style="clear: both;"></div> Code (markup): To the bottom of the article (or wherever you definately want the button to be above). If you wanna clean the code up a bit, you could add this to your CSS: .gPlusButton { float: left; margin: 5px; } .clear { clear: both; } Code (markup): This where you want the button to be: <div class="gPlusButton"><g:plusone size="tall"></g:plusone></div> Code (markup): And this where you want to make sure there are no overlapping issues! <div class="clear"></div> Code (markup): If your code was this: <div class="gPlusButton"><g:plusone size="tall"></g:plusone></div> hey there <div class="clear"></div> Code (markup): The button would be to the left of 'hey there'. If your code was this: <div class="gPlusButton"><g:plusone size="tall"></g:plusone></div> <div class="clear"></div> hey there Code (markup): Hey there and the button would be on their own lines edit: oh yeah. you can put this anywhere really but i'd put it in the <head> tag <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> Code (markup):