Hover Style Social Media Widget for Blogger

Follow @dhavalkuku

In post I am gonna explain how to add Hover Style social media widget for blogger. By using this widget  you can link your social media profile Facebook ,Twitter , RSS, Google+ and YouTube.Check link for Demo.Click here.

STEPS:

• Goto to the Layout Option which you can find on your blogger dashboard.

• Click On Add Gadget and Select HTML/Javascript.

• <style>
  .StarsBloggingSocialButtonsBorder {
  margin:0 auto;
  padding:5px;
  width:auto;
  border-radius:5px;
  border: 1px #BBBBBB solid;
  }
  #blogtrixz-SexySocialButtons{
  list-style:none;
  text-decoration:none;
  font-size:0.9em;
  font-family:trebuchet ms,sans-serif;
  }
  #blogtrixz-SexySocialButtons a{
  text-decoration:none;
  font-family:trebuchet ms,sans-serif;
  }
  #blogtrixz-SexySocialButtons li{
  position:relative;
  height:38px;
  cursor:pointer;
  padding: 0 !important;
  }
  #blogtrixz-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
  position:relative;
  z-index:5;
  display:block;
  float:none;
  margin:5px 0 0;
  width:210px;
  height:38px;
  border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;
  background-color:rgba(217,30,118,.42);
  -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  color:#141414;
  text-align:left;
  text-indent:50px;
  text-shadow:#333 0 1px 0;
  white-space:nowrap;
  line-height:32px;
  -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  }
  #blogtrixz-SexySocialButtons li:after{
  position:absolute;
  top:0;
  left:50px;
  z-index:2;
  display:block;
  height:38px; color:#ffffff;
  content:attr(data-alt);
  line-height:32px;
  }
  #blogtrixz-SexySocialButtons .icon{
  overflow:hidden;
  color:#fafafa;
  }
  #blogtrixz-SexySocialButtons .facebook{
  width:32px;
  height:32px;
  background-color:rgba(59,89,152,0.42);
  background-position:0 0;
  }
  #blogtrixz-SexySocialButtons .twitter{
  width:32px;
  height:32px;
  background-color:rgba(64,153,255,0.42);
  background-position:0 -33px;
  }
  #blogtrixz-SexySocialButtons .googleplus{
  width:32px;
  height:32px;
  background-color:rgba(228,69,36,0.42);
  background-position:-3px -66px;
  }
  #blogtrixz-SexySocialButtons .YouTube{
  width:32px;
  height:32px;
  background-color:rgba(174,45,39,0.42);
  background-position:-2px -95px;
  }
  #blogtrixz-SexySocialButtons .rss{
  width:32px;
  height:32px;
  background-color:rgba(255,102,0,0.42);
  background-position:-3px -126px;
  }
  #blogtrixz-SexySocialButtons li:hover .icon,
  .touch #blogtrixz-SexySocialButtons li .icon{
  width:210px;
  }
  .touch #blogtrixz-SexySocialButtons li .facebook, #blogtrixz-SexySocialButtons li:hover .facebook{
  background-color:rgba(59,89,152,1);
  }
  .touch #blogtrixz-SexySocialButtons li .twitter, #blogtrixz-SexySocialButtons li:hover .twitter{
  background-color:rgba(64,153,255,1);
  }
  .touch #blogtrixz-SexySocialButtons li .googleplus, #blogtrixz-SexySocialButtons li:hover .googleplus{
  background-color:rgba(228,69,36,1);
  }
  .touch #blogtrixz-SexySocialButtons li .YouTube, #blogtrixz-SexySocialButtons li:hover .YouTube{
  background-color:rgba(174,45,39,1);
  }
  .touch #blogtrixz-SexySocialButtons li .rss, #blogtrixz-SexySocialButtons li:hover .rss{
  background-color:rgba(255,102,0,1);
  }
  </style>
  <div class="blogtrixzSocialButtonsBorder">
  <ul id="blogtrixz-SexySocialButtons">
  <li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/blogtrixz">Follow us on Facebook</a></li>
  <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/dhavalkuku">Follow us on Twitter</a></li>
  <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/103181909992661418479">Follow us on Google+</a></li>
  <li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/Username">Subscribe us on YouTube</a></li>
  <li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/blogtrixz">Subscribe with RSS</a></li></ul></div>
  
  
  

                    Replace blogtrixz with your Facebook username 
                    Replace dhavalkuku with your Twitter Username
                    Replace 103181909992661418479 with your Google+ ID
                    Replace Username with your YouTube Username
                    Replace blogtrixz with your Feed burner ID.

• Now Save you HTML/JavaScript.

Now you can enjoy your hover style widget..:)

           

Follow @dhavalkuku