Cool New Follow Us Social Share Blogger Plugin

Social Share widget is one of the most important blogger plugins. If you got a unique and cool new social sharing widgets, it will surely attract bloggers to click on them and share the blog. So you have to place the social sharing widget at the right place, which should appear professional.


One of the cool new social share blogger plugin is shown below:

NOTE: I've not made this widget. Its the work of All Blog Tools (Original Post Here: Blogger Follow Us J-Query Widget). However I've made some modifications, by changing the icons and links of social share widget above.


Check out some more Cool Making Money Blogger Plugins


To add this widget follow the steps below:

- Login to "Blogger" > "Design" > "Edit HTML" > Use Ctrl-F to find the following code




           ]]></b:skin>

- Add the code below BEFORE ]]></b:skin>




   #social {
  width: 98%;
  height: 45px;
  margin: 0;
  padding: 10px 5px 5px 30px;
  list-style: none;
  border-right:solid 1px #853529;
  position: relative;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37c4WLOSUeqdpcS0ATr2ry2WgCT0A5jPUCQf-eiehcsPArEzLNrK27ZPcqcDhGkUu6yGQnPKNOnNRrZp901K_7AcPm92kWYBor0EBNruHcN2Gn_GxNeWRWtKp1JvYpGM9LxqTXRieQQs/) no-repeat left top;
  }


#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1); 
  }


.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1); 
  }


#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }


#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }


#social #rss {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWjJp2-_GuV8g-l9G_mIzBQfe01l4SI17sDmNVsQRvOJzH6wKVbVVPMaEoLDM83jXiWApMW7DKZ43pwpyt_y64KyIgB293y-zeNapSiFlD_LWsXDreUiREv4dN9kbBYRYYnGdAXAKsDQ/s400/allblogtools_rss.png);
  }


#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyndwRpp2HbawqNA07BuUJf3WprSHvBj2TS6flTO9hFoybuGoqOLRFmK_F9zchbtL4Px0oqq_Gd0gzMMB4CEBYa0PCBePZuKdVVCKokp7ueNWk0vt1WbpwPVE0pZRWKk_m2alR4umGjAg/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheKdboD561vOfEv1lFh0zjz-76kgEU1zX9uguiB4sB9vBDSlut6h7bqPIvgohgcAe6WcwALErGvmgV5TIFWq6MNL5cNkhpjwOqOXZPRp219VsHtNP6V0Tghc8xb9TeR9_Q2ctQF0KgM9I/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr85RSj4gtMhDkIlR6R8Fzc5s0QD9szonpDy-jBaLbUOyWQr5VzVEQ690hS5u8A0eyTa0XIDKTgt8CxBT3M_aog43fJe45ZpbkkVCBGX_kHsKg_AdihW-KVohp1wDehYi9Z-t4ilVu5c4/s400/allblogtools_email.png);
  }


span.tooltip {
  background: #575757;
  padding: 3px;
  display: block;
  width: 140px;
  border: 1px solid #000000;
  position: absolute;
  margin-top:-40px;
  color: #F0F0F0;
  font-size:10px;
  text-indent: 0;
  font: Arial, sans-serif;
  text-align: center;
  -webkit-box-shadow: inset 2px 2px 2px #616161;
  -moz-box-shadow: inset 2px 2px 2px #616161;
  box-shadow: inset 2px 2px 2px #616161; 
  -moz-border-radius: 5px;
  border-radius: 5px; 
  }

- Next thing, use Ctrl-F to find the code below

           </body>

- Copy the following code BEFORE </body>

         <script type='text/javascript'>

  window.setTimeout(function() {

  document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);

  }, 10);

  </script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

  <script type='text/javascript'>

  //<![CDATA[

  $(document).ready(function() {

 $('#social li').each(function() {

  var $li = $(this);

  var title = $li.find('a').attr('title');

  $li.find('a').removeAttr('title');

  $('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();

  $li.find('a').mouseover(function() {

  var top = $(this).position().top;

  var left = $(this).position().left;

  $(this).find('span').fadeIn()({

  top: top,

  left: left

  }, 'slow'); 

  });

  $li.find('a').mouseout(function() {

  $(this).find('span').fadeOut('slow');

  });

  });

});

//]]>

  </script>

- "Save The Template" and click on "Page Elements" of "Design (or) Layout" tab

- "Add a Gadget"(On left or right sidebar)

- Select "HTML/Javascript" from "Add a Gadget list":

- Now leave the "Title" section blank and copy-paste the code below in "Content" section:

  

  <ul id="social">

  <p>Follow Us </p>

  <li><a href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR-BLOG-NAME" id="rss" title="Follow Our Feeds">Rss</a></li>

<li><a href="https://plus.google.com/YOUR-GOOGLE+-ID/posts" id="mail" title="Join Our G+ Circle">Mail</a></li>

<li><a href="YOUR-FACEBOOK-PROFILE OR PAGE-ID" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="http://twitter.com/#!/YOUR-TWITTER-USERNAME" id="twitter" title="Follow Us On Twitter">Twitter</a></li>

  </ul>

<b class="abt"><a href="http://www.allblogtools.com/#">Get This Widget</a> | By <a href="http://www.allblogtools.com">AllBlogTools.com</a></b>

- Notice the RED-COLOR? Replace it with your username in the respective place

- Click "Save" and you're done!

All the best. If you got any question or suggestion let me know. 

Posted in: Blogger Plugins For Making Money,top ideas