Style the default blogger email subscription form


Blogger recently added the new feature Follow by Email which allows the visitor to subscribe to blog post via email.
This feature can be added from blogger dashboard under Add a Widget area. The default style of subscription form looks very simple. I have designed some CSS styles, using which, you can make the form more attractive. To add the style, select your desired style and copy its code below the preview image. then GoTo blogger Dashboard and Click on any of the Add a Widget link then Select HTML/JavaScript and paste the code under Content, Leave the title empty and click save. You are done.
<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('http://i39.tinypic.com/w8m0jk.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#e8ab2b;
font-weight:bold;
}
/* css by www.techirsh.com  01  */
</style>


<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('http://i39.tinypic.com/wbubnp.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#2790a8;
font-weight:bold;
}
/* css by www.techirsh.com   02 */
</style>
<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('http://i42.tinypic.com/27xe3v4.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#464e53;
font-weight:bold;
}
/* css by www.techirsh.com   03 */
</style>


<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('http://i41.tinypic.com/5mlaug.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#72ac00;
font-weight:bold;
}
/* css by www.techirsh.com   04 */
</style>
<style type="text/css">
.FollowByEmail table{
padding-top:110px;
background: url('http://i43.tinypic.com/dzwjur.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#6784ac;
font-weight:bold;
}
/* css by www.techirsh.com   05 */
</style>


<style type="text/css">
.FollowByEmail table{
padding-top:90px;
background: url('http://i43.tinypic.com/2m7au5d.png') center top no-repeat;
}
.follow-by-email-inner input {
border-radius: 5px;
color: #fff;
padding-left:0px;
background:#f59829;
font-weight:bold;
}
/* css by www.techirsh.com   06 */
</style>

No comments:

Post a Comment