Style the default blogger email subscription form

™» CGC Blog «™  Blogger recently added the new feature Follow by Emailwhich 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 bloggerDashboard 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>

Posted in: Blogger

Nguồn : techirsh.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!