CSS Dropdown Subscribe Widget For Blogger

Today, we are going to build a simple subscribe widget for blogger with some animation and awesome outfit. This widget is much faster then any other subscription widget in the web. It created using less coding and contain only HTML and CSS. Let’s jump in the tutorial, see how it works and how to install it in your blog.

Demo

Install This Widget In Blogger

As always i have make installation is simple. Add HTML/Javascript gadget into your blog, and paste the following code and save!

<style  type="text/css">
p {
margin: 0px auto;
line-height: 24px;
}
.as-dsf {
position: relative;
display: inline-block;
}
.as-dsf a {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
text-decoration: none;
text-align: center;
padding: 5px 0;
        text-shadow: 0 0 1px #56A0F1;
}
.as-dsf > a {
display: inline-block;
width: 250px;
z-index: 1;
font-weight: bold;
color: #666;
border: 1px solid #aaa;
border-radius: 3px;
background: #f5f5f5;
}
.as-dsf > a:hover {
background: #f1f1f1;
}
.as-dsf div {
position: absolute;
width: 250px;
height: 8px;
overflow: hidden;
left: 2px;
top: 28px;
        -webkit-transition: all 350ms linear;
-moz-transition: all 350ms linear;
-o-transition: all 350ms linear;
-ms-transition: all 350ms linear;
transition: all 350ms linear;
}
.as-dsf:hover div {
height: 118px;
}
.as-dsf ul {
position: absolute;
bottom: 5px;
left: 0;
width: 246px;
background: #56A0F1;
margin: 0;
padding: 2px 0 9px;
border-radius: 0 0 3px 3px;
border: 1px solid rgba(0,0,0,0.25);
border-width: 0 1px 1px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset;
z-index: 9999;
}
.as-dsf ul::before {
content: '.';
text-indent: -9999px;
display: block;
background: #56A0F9;
width: 15px;
height: 15px;
position: absolute;
bottom: -4px;
left: 38px;
border-radius: 15px;
box-shadow:
0 -1px 0 rgba(255,255,255,0.5) inset,
0 1px 0 #666;
z-index: 0;
}
.as-dsf ul::after {
content: '.';
text-indent: -9999px;
display: block;
background: #fff;
width: 5px;
height: 5px;
position: absolute;
bottom: -2px;
left: 42px;
border-radius: 15px;
border: 1px solid #666;
box-shadow: 0 -1px 0 rgba(255,255,255,0.5);
z-index: 0;
}
.as-dsf:hover ul {
bottom: none;
}
.as-dsf ul li {
list-style: none;
margin: 0;
padding: 0;
}
.as-dsf ul li a {
display: block;
color: #ddd;
text-shadow: 0 0 8px #111;
}
.as-dsf ul li a:hover {
        color:#fff
}
</style>

<div class="as-dsf">
<a href="#">Join us!</a>
<div>
<ul>
<li><a href="#">Find us on google+</a></li>
<li><a href="#">Find us on facebook</a></li>
<li><a href="#">Find us on twitter</a></li>
<li><a href="#">Grab our newsletter</a></li>
</ul>
</div>
</div>

Change Red Texts with your social profile user names and as always, you can also modify the CSS as your taste. This widget created by me and you can reshare this widget with a link back to us. And Let me know your Feedback :)