CSS
Add this part before the </b:skin> closing tag
.subscribe-box {
border-top: 4px solid #1ebab2;
}
.subscribe-box p {
padding: 15px 0;
margin: 0;
}
.subscribe-box input {
padding: 10px 12px;
border-radius: 3px;
border: 1px solid #ddd;
background-color: #f8f8f8;
width: 100%;
box-sizing: border-box;
font-size: 15px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.subscribe-box input:focus {
padding: 10px 12px;
border-radius: 0;
border: 1px solid #fff;
background-color: #fff;
width: 100%;
font-size: 15px;
outline: none;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.subscribe-box #submit {
margin: 25px 0 0;
font-size: 16px;
text-transform: uppercase;
background-color: #1cbbb4;
color: #fff;
cursor: pointer;
border: 0;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.subscribe-box #submit:hover {
background-color: #189f99;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
border-top: 4px solid #1ebab2;
}
.subscribe-box p {
padding: 15px 0;
margin: 0;
}
.subscribe-box input {
padding: 10px 12px;
border-radius: 3px;
border: 1px solid #ddd;
background-color: #f8f8f8;
width: 100%;
box-sizing: border-box;
font-size: 15px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.subscribe-box input:focus {
padding: 10px 12px;
border-radius: 0;
border: 1px solid #fff;
background-color: #fff;
width: 100%;
font-size: 15px;
outline: none;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.subscribe-box #submit {
margin: 25px 0 0;
font-size: 16px;
text-transform: uppercase;
background-color: #1cbbb4;
color: #fff;
cursor: pointer;
border: 0;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.subscribe-box #submit:hover {
background-color: #189f99;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
HTML
Go to the layout option and add a HTML/Javascript gadget.Copy and paste the below code and replace the Feedburner username (The one highlighted with blue).
<div class="subscribe-box">
<h2 style="padding: 20px 0 10px;display: inline-block;font-size:18px;">Subscribe to our newsletter</h2>
<p style="color: #818181;padding:0 0 15px 0;font-size:15px;margin:0;border-bottom:1px solid #ddd">Awesomeness delivered to your Inbox</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=barrelUI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<b><p>Your Name</p></b>
<input type="text" name="name" placeholder="John Smith" />
<b><p>Your Email</p></b>
<input type="text" name="email" placeholder="johnsmith@site.com" />
<input type="submit" value="Take me in" id="submit" />
<input name="uri" type="hidden" value="barrelUI" />
</form>
</div>
<h2 style="padding: 20px 0 10px;display: inline-block;font-size:18px;">Subscribe to our newsletter</h2>
<p style="color: #818181;padding:0 0 15px 0;font-size:15px;margin:0;border-bottom:1px solid #ddd">Awesomeness delivered to your Inbox</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=barrelUI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<b><p>Your Name</p></b>
<input type="text" name="name" placeholder="John Smith" />
<b><p>Your Email</p></b>
<input type="text" name="email" placeholder="johnsmith@site.com" />
<input type="submit" value="Take me in" id="submit" />
<input name="uri" type="hidden" value="barrelUI" />
</form>
</div>
(or)
One Click Install
Hope you like the gadget.Please comment your opinions and share it among other bloggers.Thanks
No comments:
Post a Comment