Friday, 14 June 2013

Add Social Buttons With An Amazing Mouse Hover Effects To Blogger Blog

Hi All I am Fine and I hope you will be fine too. As you know that previously I shared and Awesome Social Bookmarking Widget With Mouse Hover Effect For Blogger. And today I am sharing a best , eye catching , beautiful , fully customized widget for blogger. This is an social widget. I published that widget because it is an type of SEO . You have seen that in almost every social widget I labeled it as SEO . I labeled it as SEO because when ever someone likes / shares your posts pages it is automatically published in it's wall / timeline so then his friends / relatives see it and comes to your site , so it's an good and amazing type of SEO. This widget is developed from CSS Hover Effects Hope you like it. 

Let's Add It


  1. Go to Blogger >> Layout >> Add a Gadget
  2. Select HTML/Java Script
  3. Add the Code Below


/* --- Cloudspedia Social Hover Buttons Plugin For Blogger --- */                              <div id="mbl-social-hover">
<div class="tota2"><img src="http://2.bp.blogspot.com/-pKK9MYp8Ww0/UK9z4ugMyOI/AAAAAAAAIRE/KMY-EJCl96s/s1600/SUB-BAN.png" /></div>
<div id="links"><a href="http://twitter.com/cloudspediaweb" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-GVPx4HMrNDY/UK9uv3rA0iI/AAAAAAAAIO4/yfuiRGXLeVU/s1600/cloudspedia.blogspot.comtwitter.png" /></div></a>

<a href="http://www.facebook.com/cloudspedia" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-DX-Bx5WR6zE/UK9whE-OCzI/AAAAAAAAIPg/9k_zjlDPF8s/s1600/cloudspedia.blogspot.comFB.png"  /></div></a>

<a href="https://plus.google.com/u/0/106374439082237286396" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-eP0U9g8fm0Q/UK9wYNQ4CmI/AAAAAAAAIPY/UWYbc7e9-go/s1600/cloudspedia.blogspot.comgoogle.png" /></div></a>

<a href="http://pinterest.com/YourName/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-nEZw_TpzSoU/UK-TOH8OEEI/AAAAAAAAISg/bDcBgt2yEe4/s1600/cloudspedia.blogspot.compin.png" /></div></a>

<a href="http://feeds.feedburner.com/Cloudspedia" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-yOEZQT7it74/UK9wClCPwpI/AAAAAAAAIPQ/EK4CB92xQ98/s1600/cloudspedia.blogspot.comrss.png" /></div></a>
</div></div>

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("http://4.bp.blogspot.com/-CNgQWNU8Sg4/UK91PeHlvjI/AAAAAAAAIRM/56SruW6DBQ0/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("http://4.bp.blogspot.com/-CNgQWNU8Sg4/UK91PeHlvjI/AAAAAAAAIRM/56SruW6DBQ0/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style><small><a href =http://goo.gl/M1XMC>Social Buttons Widget By Cloudspedia</a></small>

Now , Change
cloudspedia  with your facebook url


https://plus.google.com/u/0/106374439082237286396 with your Google +  Url

YourName with your Pinterest profile name

Cloudspedia with your RSS Feed URL.

Thanks.

Hope You Like It





← Blogger OR Google+ →

4 comments:

  1. Hey ! I did everything as mentioned above. . There are extra buttons beneath the all the social buttons.

    This is my blog : www.letittech.com

    How can I fix this ?

    ReplyDelete
    Replies
    1. Dear Shashank
      Thanks For It
      Now I Fixed It and now I checked it works fine.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. wow nice

    http://www.helpnewbloggers.me/

    ReplyDelete

  • Home
  • About Us
  • Contact Us
  • Sitemap
  • Back To Top ^

    About us

    Shiraz Shakeel is a young boy who is founder and the owner of Cloudspedia. He is 13 years old and living in Pakistan, K.P.K, Peshawar. Now a days, He is studying in 7th grade and running his site..... Continue Reading

    Global Ranking