Add Google Plus Followers widget to Blogger| Blogspot

Posted by Muhammad Shoaib Khan on

Google plus may be a stylish social network that is growing day by day. If you've got a blog or website then you want to add your Google and network along with your blogger website. During this post we will bring up adding a custom Google and followers widget to blogger blogs. Default Google and followers widget isn't offensively engaging in its style, that's why i've got created a custom version of the widget. My custom widget is titled well with help of CSS,


How to Add Google Plus Widget

  • Go to Blogger->Dashboard->Layout
  • Click "Add gadget"
  • Select "HTML/Javascript"
  • Paste the below 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/112126372822486069948?prsrc=2" data-source="blogger:blog:followers" data-width="290"> </div> </div>

==========================================
  • Replace Red color url with your google plus Profile or Page Url.
  • Save it. Now See your blog or website. You can see attractive google plus widget.
Tags: Add Google Plus Followers widget to Blogger| Blogspot, how to Add Google Plus Followers widget to Blogger| Blogspot

Comments

Post a Comment