Google plus is a popular social network which is growing day by day. If you have a blog or website then you must integrate your Google plus network with your blog or website. In this post we will talk about adding a custom Google plus followers widget to blogger blogs. Default Google plus followers widget is not very attractive in its design, That is why we have created a custom version of the widget. Our custom widget is styled very well with help of CSS code.
Adding custom Google plus followers widget to blogger
- Open your blogger dashboard.
- Select your blog.
- Select Layout option and Click on Add a gadget option.
- Select HTML/JavaScript widget from the list.
- In the HTML/JavaScript widget paste following code and save the widget.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <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> <style> .wc-gplusmod, .wc-gplusmod:before, .wc-gplusmod:after { background: #ffffff; border-radius: 5px 5px 0 0; border: 1px solid #ccc; box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); } .wc-gplusmod { position: relative; width:250px; padding: 1em; margin: 50px auto; } .wc-gplusmod:before, .wc-gplusmod:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: rotateZ(2.5deg); -o-transform: rotate(2.5deg); transform: rotateZ(2.5deg); z-index: -1; } .wc-gplusmod:after { -webkit-transform: rotateZ(-2.5deg); -o-transform: rotate(-2.5deg); transform: rotateZ(-2.5deg); } </style> <div class="wc-gplusmod"><div class="g-plus" data-action="followers" data-height="290" data-href="https://plus.google.com/113077073682792857677?prsrc=2" data-source="blogger:blog:followers" data-width="290"> </div> </div>
Note: Change the Red colored code with your own Google plus profile or page address.