Windows 7 beta feedburner subscription form for blogger

Hi friends once again I returned to design feedburner subscription .And this code is still in beta-mode yet you can use this form .The form works perfect.We planned to design perfectly like windows 7 copying popup –window in future.Sometimes it may not workout proper in third party templates due to same class name declaration.And it will be solved in next design.Ok you can now use the below code by copying it and pasting in HTML/Javascript widget in blogger template.When we come to blogger blog there is no doubt feedburner is the best subscription form for us.If you are new to hear about widget kindly read the below line.

Goto Blogger >> Layout >> Add a gadget >> Choose Html/Java script and click plus icon.

Now copy and paste the below code in that widget .

<style>

/*Background-Layer*/

.background-layer{

width:250px;

height:370px;

border-color:#b8d9fc;

border-width:5px;

border-style:solid;

background-color:#cec6d1;

}

/*Social-Layer*/

.social-layer    {

width:250px;

height:40px;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSw7JBX8nX49kK4MlzOuO1wLmrlKv_i1CfXwF4Bw6dzLHHqpnJvUqtcPH5nJaL2-BALz-_Wz66vxaTmCVF04CZhF99Dv92fim5DBqLhKKpDb6FSntrpxjkT1egHRkZye0WlYJFV-BlFys9/s1600/light-glossy-button.png);

}

.social-layer li {

list-style:none;

display:inline-block;

}

.social-layer ul{

float: right;

}

/*sometext*/

#sometext{

text-align:center;

}

#sometext2{

text-align:center;

}

/*Subscribe-Layer*/

.subscribe-layer{

width:250px;

height:40px;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmxce0QRIDTB56Xq65ZIYCojPNVOtGiRWYGR9ovTF2RcTfOn_5WqYoz4wZaccG4o7pv_KWRgt0T03wYGkdxqV1rLcCCd9m68OQRHy3e5OlMxLmJbTi30YTz_Alwmc2tLmWTw1rtPR4YCx/s1600/thick-glossy-button.png);
}

/*subscribe-button*/

.subscribe-button{

width: 200px;
     height: 50px;
     display: inline-block;
   vertical-align: top;
   position: relative;
   overflow: hidden;
   min-width: 96px;
   line-height: 46px;
   padding: 0 24px;
   font-size: 14px;
   color: black;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 1px #154c86;
   background-color: #e3f5ff;
   background-clip: padding-box;
   border: 1px solid;
   border-color: #36ccef #36ccef #36ccef;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
   background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
   background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));

}

/*field border */

.field-border{

border-color:#b8d9fc #b8d9fc #b8d9fc #b8d9fc;

width:200px;

height:30px;

text-align:center;

}

/*green-loader*/

.green-loader{

width:180px;

height:25px;

margin:10px 0 0 30px;

background-color:#cec6d1;

}

</style>

<div id="background-layer" class="background-layer">

<div id="social-layer" class="social-layer">

<ul >
             <li><a href="#" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg92T2b4BofcdG3V9r5BppeRb-bw3i3Z9km4czh8CF46HgFug-YeeoZMqs9HN4Nlrgkt1OpC0xfr-8MTFFNmELEGOJImfGD1uOIZVsBa14QELu-tXt0rYcQQ17MPUlIxhy7VxMIilUXUuqd/s1600/facebook.png" width="30" height="30"/></a></li>
             <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1YbVMEeGU_2EkHoNpBlVO_L52cAzDB0wAIeGluLlqGFrfJeJ-2kwz095go4mQKWrSdSRurBE0DPVbzT6yDGzemrpRcESLCa0pDHJghabyVbz3IyhZ4F-xcgnTRiHI5FDhOmsbf0WPP_Tb/s1600/twitter.png" width="30" height="30"/></a></li>
             <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQfO_LLvRvo5RjfWQNe1xuySjmcgWQTtkGPUNIePQHiqlVOmUgIjaBU9SiPWGI_mnFNjRcWLEy5fImxxZ0lPFh3e_33BlQ5RHKB4241EXzbxY1-mMQyWvmvoL9wcwhhWRIQCSLhh8MU0fc/s1600/google.png" width="30" height="30"/></a></li>
             </ul>

            </div>
     <div id="subscribe-layer" class="subscribe-layer"></div>
         <p id="sometext" >Enter your email address:</p>
     <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xt5WrKB8Rm1SNhOMlUNt-1UUG_V7TSVyeyIN11u_Om5iiyz8_M96q3Q_OgirG0J7CaQ61ZLsZpH_vgJ_TGxmmekL6LDzyISPR1UuqYwi2Dhc_sMhv-S8urZIFeJNWif0GuT7-Vz4W3y3/s1600/loader3.gif" class="green-loader" /></div>

    <form style="padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post"
     target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=techinfoweb', 'popupwindow',
     'scrollbars=yes,width=550,height=520');return true">

     <p><input class="field-border" type="text" name="email" placeholder="Your Email"/></p>
     <input type="hidden" value="techinfoweb" name="uri"/>
     <input type="hidden" name="loc" value="en_US"/>
     <input class="subscribe-button" type="submit" value="Subscribe" />
     </form>


<p id="sometext2" >We Too Hate Spam!</p>

</div>

Replace # which is highlighted in yellow color with respective social network links.Replace techinfoweb with your respective feedburner name. We try to post more design for feedburner subscription form.