How to 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. Our custom widget is styled very well with help of CSS code.

Add custom google plus followers widget to blogger


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