Add custom Google plus followers widget to blogger

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.

Add custom Gplus followers 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.

Code

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