Css style expanded social widget for footer

Previously i shared wordpress-style-social-subscription-form check it down here.
And this time i am here with a new social widget especially for footer. This involves the Css style hover effect in colorful ways. 
When you hover your mouse on it, it show effect. It's so Attracted that it will force your viewer to give you appreciations and social + and likes. 

First let see the Fatures:
  • Covers the major social networking buttons plus RSS icon.
  • Smooth Sexy expand on hover Use of CSS and sprites image.
  • Very neat and clean No JavaScript. No jQuery. It's pure CSS

scroll down till footer the check it down .

 
Now lets start with how to add this to your blog.?
 
  1. Just in your footer, Layout > Add a Gadget > HTML/Javascript
  2. Copy all the code from above and just paste in that place
  3. Don't prefer giving it a name
 
 
Here is the code for the widget

<!-- CSS Expanded "Social Network" Widget By www.rbpatel.in-->
<style>
#blogncash-SNS {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#blogncash-SNS li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#blogncash-SNS .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #141414;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;z-index: 5;
-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;
-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;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}
#blogncash-SNS span:hover {
visibility: hidden;
}
#blogncash-SNS span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#blogncash-SNS .icon {
color: #fafafa;
overflow: hidden;
}
#blogncash-SNS .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#blogncash-SNS .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#blogncash-SNS .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#blogncash-SNS .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#blogncash-SNS .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#blogncash-SNS .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#blogncash-SNS .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#blogncash-SNS .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#blogncash-SNS li:hover .icon {
width: 250px;
}
#blogncash-SNS li:hover .icon {
background-color: #d91e76;
}
#blogncash-SNS li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#blogncash-SNS li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#blogncash-SNS li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#blogncash-SNS li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#blogncash-SNS li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#blogncash-SNS li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#blogncash-SNS li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#blogncash-SNS li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#blogncash-SNS .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<ul id="blogncash-SNS">
<li ><a href="Here comes your Facebook URL" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="Here comes your Twitter URL" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="Here comes your Google+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="Here comes your Pinterest URL" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span>
</li>
<li ><a href="Here comes your Linkedin URL" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span>
</li>
<li ><a href="Here comes your DeviantArt URL" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span>
</li>
<li ><a href="Here comes your YouTube URL" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span>
</li>
<li ><a href="Here comes your RSS Feed URL" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul>
<!-- CSS Expanded "Social Network" Widget By www.rbpatel.in-->

Happy Blogging

Post a Comment

➜ Your feedback is always important to us
➜ Do not post any spam comments here,it will be directly remove upon our review and .
➜ Don't add website URL in your comments.

 
Top