Add Beautiful Social Subscribe Gadget To Blog with Hover Effect

Hello friends, I am new author to this blog. It is my first post. Here I am posting about beautiful social subscribe widget or gadget for blogger blog. This gadget is exclusively made by me. You can easily add this gadget in Blogger Blog or in any website. The importance of Social Media in our life is very important. It connect us with our friends, but it also gives traffic to our sites or blogs.

 

Add This Gadget in Blogger Blog

• First open Blogger in your browser and select your blog.


• Now Go to Layouts—> Add A Gadget—> Html/JavaSciprt


• Now paste The Below Code In Html/JavaScript Box

<style>
.holder {
position: relative;
margin: 20px;
width: 50px;
height: 50px;
cursor: pointer;
float: left;
}
.first {
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
border: 1px solid #ddd;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 1;
box-shadow: inset 0 0 1px 1px #fff,
0 0 5px -1px #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.holder:hover .first {
left: -50px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
z-index: 999;

}
.second {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
z-index: -1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: inset 0 1px 0px 0px rgba(255,255,255,0.5);
border: 1px solid rgba(0,0,0,0.4);
}
.purple{
background: -webkit-linear-gradient(top, rgba(36, 203, 218, 1) 1%,rgba(39, 148, 182, 1) 100%);
background: -o-linear-gradient(top, rgba(36, 203, 218, 1) 1%,rgba(39, 148, 182, 1) 100%);
background: -ms-linear-gradient(top, rgba(36, 203, 218, 1) 1%,rgba(39, 148, 182, 1) 100%);
background: linear-gradient(top, rgba(36, 203, 218, 1) 1%,rgba(39, 148, 182, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d10087', endColorstr='#9b0067',GradientType=0 );
}
.blue {
background: -webkit-linear-gradient(top, rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
background: -o-linear-gradient(top, rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
background: -ms-linear-gradient(top, rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
background: linear-gradient(top, rgba(22,114,201,1) 0%,rgba(0,79,153,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1672c9', endColorstr='#004f99',GradientType=0 );
}
.orange {
background: -webkit-linear-gradient(top, rgba(204, 48, 35, 1) 0%,rgba(189, 38, 38, 1) 100%);
background: -o-linear-gradient(top, rgba(204, 48, 35, 1) 0%,rgba(189, 38, 38, 1) 100%);
background: -ms-linear-gradient(top, rgba(204, 48, 35, 1) 0%,rgba(189, 38, 38, 1) 100%);
background: linear-gradient(top, rgba(204, 48, 35, 1) 0%,rgba(189, 38, 38, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 );
}
a{color: white; text-decoration: none;}
</style>

<a href="[highlight]http://www.twitter.com/[/highlight]" target="_blank"> <div class="holder">
<div class="first"></div>
<div class="second purple"><span style="
color: white;
font-size: 42px;
font-family: corbel;
margin-left: 17px;
font-weight: 600;
">t</span></div>
</div></a>

<a href="[highlight]http://www.facebook.com/[/highlight]" target="_blank"><div class="holder">
<div class="first"></div>
<div class="second blue"><span style="
color: white;
font-size: 42px;
font-family: corbel;
margin-left: 17px;
font-weight: 600;
">f</span></div>
</div></a>

<a href="[highlight]http://plus.google.com/[/highlight]" target="_blank"><div class="holder">
<div class="first"></div>
<div class="second orange"><span style="
color: white;
font-size: 21px;
font-family: corbel;
margin-left: 4px;
font-weight: 600;
"><span style="
margin-left: 9px;
font-size: 38px;
text-align: center;
line-height: 0.9;
">g</span></span></div>
</div></a>

• Now Replace Highlighted texts with your usernames or profile links


• Now click on Save button. Your widgets will save.