SIMPLE FLAT UI EMAIL SUBSCRIPTION BOX FOR BLOGGER

As it is recommended by pros to build email list, bloggers are trying out different methods for it. We've also shared some of them which you might have read previously. One of the most popular reason for it is that we can easily make money with email list but having a great number of subscribers is important. Email subscribers can be increased by adding attractive subscription box on such areas where every visitor's eye must reach and offering something interesting is also great technique to get email subscribers. At this time, everyone is using sidebar subscribe box and you should implement that too. Just recently, we've made simple Flat UI email subscription box for blogger. Let's learn about it's features and also tutorial of inserting it in blogger blog.

Simple Flat UI Email Subscribe Box

This is just simple Flat UI email subscription or newsletter widget which will help you to gain more subscribers and monetize them. It's design is not much gorgeous but have simplicity and Flat UI style which attracts people to become your subscriber. First, it has unique header and descriptive message below header. After that, it contains two input fields which are name and email. Whenever someone comes to write his/her name or email, it gives a beautiful shadow effect which beauty the subscriber's name or email. At the end or bottom, it has big cute sign up button with Flat effect. This widget is made with pure HTML and CSS3.(source: as from codiblog)

How To Add This in Your Blog?

• Go To Blogger >> Layout >> Add a Gadget
• Choose HTML/JavaScript
• Paste The Following Code in Content Box.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='byard-emailsubsocial'>
<div class='heading'>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</p> 
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="BloggerYard" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />

</form>
</div>

<p id='credits'>Powered By : <a href='http://www.bloggeryard.com'>Blogger Yard</a></p>

</div> 

<style type='text/css'>
#byard-emailsubsocial {
width: 300px;
height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#byard-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#byard-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#byard-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#byard-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#byard-emailsubsocial .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#byard-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}

• Replace BloggerYard With Your Feedburner Username.
• N/B: With kind consideration of hard work done by the owners of the widget, please do not attempt to remove the credit without their permission.
• Finally click Save and you all set up to receive new subscribers

Happy blogging