Social Media

Tuesday, 15 July 2014

Add Google Plus Followers widget to Blogger| Blogspot

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

About Muhammad Shoaib Khan

we are certified themeforest Developers, Google blogspot developer and UI designers. We are popular at JavaScript engineers. We are team of professinal programmers, developers work together and make unique blogger templates.

0 comments:

Post a Comment

Copyright © All Rights Reserved ™

Blog Templates Designed by: Templatezy - Free Fonts - Sb Game Hacker