Google is already offered a Google+ followers box for your blog/website, however i feel it's want an outsized area for it, therefore by adding this sliding widget we do not want waste area of your sidebar. sliding Google+ followers box can float on your blog/website. and once the mouse over, it'll animate by sliding to left.
How To Add Sliding Google+ Followers Box To Blogger
1. Go to Blogger > Layout > Add Gadget > HTML/JavaScript.
2. Paste the following code in it. Change https://plus.google.com/118404403948415614817 with your Google+ url.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //<!-- $(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .gplusbox{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCij9WrtnvJuQvlJFdoIm_FZRgfm5Aw1UrlDCQlR1VWbY8nrog3Og-i3Ja4Fam_heeS2ZU-yhSDIm3xHaCAJy3b8O9cPwIi_iJoiCs5KKCxYwqm8FacfwoB6f46qkZMnlYj6aTelS6NtE/s400/g%252B+softglad.png") no-repeat scroll left center transparent !important; display: block; float: right; height: 275px; padding: 0 0px 0 46px; width: 325px; z-index: 99999; position:fixed; right:-330px; top:20%; } .gplusbox div{ padding: 8px; background: white; border: 2px solid #D64937; border-radius: 15px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } </style> <div class="gplusbox"><div> <div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/118404403948415614817" data-source="blogger:blog:followers" data-width="320"> </div> <script type="text/javascript"> (function() { window.___gcfg = {'lang': 'en'}; 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> </div></div>
If you needed any help about this widget then feel free to post your question as comment below..
0 comments:
Post a Comment