Random

Theme images by Storman. Powered by Blogger.

Disqus Shortname

Slider No.

Recent Post Number

Fixed Menu (yes/no)

Related Post Number

Multimedia Updates

Widget Label Posts No.

Related Posts No.

PageNavi Results No.

Ads Inside Post

Comments system

Ticker No.

Blog Archive

Blog Archive

Subscribe

Subscribe

Awesome Video

Recent Posts

Most Popular

Recent Posts

Boxed Style (yes/no)

SLIDE1

Titulo

About me

www.CodeNirvana.in

Join this site

Translate

Recent

Number of Posts

About Us

Random Post Number

Slider Display

Random

Video of the day

Pages

About Us

Carousel

Breaking News
Loading...

Popular Posts

Thursday, 23 June 2016

Top 5 Beautiful Newsletter Forms for Blogger

 



Beautiful Newsletter Forms for Blogger
I had already shared a post about adding subscription box with hover effect to your blogger blog or website. In this post too me wanna share brilliant 5 stylish Newsletter Forms for your blog. Each form is different in style. So it's your decision to choose your style which is suitable for your blog.



You can see the demo screenshot of each Newsletter Form before it's code and get an idea of what we are going to make right here. As I mentioned just above each form is different in style (Your Newsletter Form seems as below screenshots named Newsletter Form Style 1,2,3,4 and 5).

question mark icon png How to add this Nesletter Forms to your blog
To add this stylish Newsletter Forms to your blogger blog/website follow below 6 steps carefully. 

  1. First choose your desired Newsletter Form below
  2. Copy the code of that Newsletter Form
  3. Go to Blogger Dashboard > Layout
  4. Click on Add a Gadget 
  5. Select HTML/JavaScript
  6. Paste code (leave title column blank) and save it


Newsletter Form Style 1 

Newsletter Form Style 1

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style type="text/css">
#LS-Newsletter1-Box {
    background: url(http://4.bp.blogspot.com/-YL316LAsD9U/UEEicRMg7tI/AAAAAAAALSo/huvi3XqnnIo/s1600/Newsletter-1.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 264px;
}
form#LS-Newsletter1-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter1-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 21px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 160px;
    outline:0px;
}
form#LS-Newsletter1-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 21px;
    padding-right: 45px;
    position: relative;
    left: 92px;
    top: 28px;
    width: 35px;
}
</style>
<div id="LS-Newsletter1-Box">
    <form id="LS-Newsletter1-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJVajXpgbD5ERlc_nZVhblSTQYmUd95F0gRNnBoUm0CbAhwPgapmE-n8lD82oIkN_930suzlWXCAQ0N_XPMBwrALrg95fmm7YK3N9rgVb940jaXFmecW-fUfkUVXNtG0CCkWLP_CMYw/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 2

Newsletter Form Style 2

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css">
#LS-Newsletter2-Box {
    background: url(http://3.bp.blogspot.com/-HpHwkouqhho/UEEidW-KuJI/AAAAAAAALSw/ezxs40Pqyzg/s1600/Newsletter-2.png)no-repeat scroll center center transparent;
    height: 142px;
    width: 300px;
}
form#LS-Newsletter2-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter2-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: -6px;
    padding-left: 2px;
    vertical-align: top;
    width: 270px;
    outline:0px;
    position: relative;
    left: -57px;
}
form#LS-Newsletter2-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 107px;
    top: 13px;
    width: 111px;
}
</style>
<div id="LS-Newsletter2-Box">
    <form id="LS-Newsletter2-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJVajXpgbD5ERlc_nZVhblSTQYmUd95F0gRNnBoUm0CbAhwPgapmE-n8lD82oIkN_930suzlWXCAQ0N_XPMBwrALrg95fmm7YK3N9rgVb940jaXFmecW-fUfkUVXNtG0CCkWLP_CMYw/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 3

Newsletter Form Style 3

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<style type="text/css">
#LS-Newsletter3-Box {
    background: url(http://4.bp.blogspot.com/-Y-vF5-bSEro/UEEighPucII/AAAAAAAALTA/DDi0Mk_gEa8/s1600/Newsletter-4.png)no-repeat scroll center center transparent;
    height: 311px;
    width: 349px;
}
form#LS-Newsletter3-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter3-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#LS-Newsletter3-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 22px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#LS-Newsletter3-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 28px;
    position: relative;
    left: 179px;
    top: 41px;
    width: 90px;
}
</style>
<div id="LS-Newsletter3-Box">
    <form id="LS-Newsletter3-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJVajXpgbD5ERlc_nZVhblSTQYmUd95F0gRNnBoUm0CbAhwPgapmE-n8lD82oIkN_930suzlWXCAQ0N_XPMBwrALrg95fmm7YK3N9rgVb940jaXFmecW-fUfkUVXNtG0CCkWLP_CMYw/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 4

Newsletter Form Style 4

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<style type="text/css">
#LS-Newsletter4-Box {
    background: url(http://1.bp.blogspot.com/-65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#LS-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}
</style>
<div id="LS-Newsletter4-Box">
    <form id="LS-Newsletter4-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJVajXpgbD5ERlc_nZVhblSTQYmUd95F0gRNnBoUm0CbAhwPgapmE-n8lD82oIkN_930suzlWXCAQ0N_XPMBwrALrg95fmm7YK3N9rgVb940jaXFmecW-fUfkUVXNtG0CCkWLP_CMYw/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Newsletter Form Style 5

Newsletter Form Style 5

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css">
#LS-Newsletter5-Box {
    background: url(http://1.bp.blogspot.com/-kJo_v4W6Qto/UEEie4wT7XI/AAAAAAAALS4/OgZfjp9e2o4/s1600/Newsletter-3.png)no-repeat scroll center center transparent;
    height: 230px;
    width: 355px;
}
form#LS-Newsletter5-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter5-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 118px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: -35px;
}
form#LS-Newsletter5-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 206px;
    top: -31px;
    width: 55px;
    border-radius: 0px 25px 25px 0px;
}
</style>
<div id="LS-Newsletter5-Box">
    <form id="LS-Newsletter5-Form" action="#" method="post" >
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJVajXpgbD5ERlc_nZVhblSTQYmUd95F0gRNnBoUm0CbAhwPgapmE-n8lD82oIkN_930suzlWXCAQ0N_XPMBwrALrg95fmm7YK3N9rgVb940jaXFmecW-fUfkUVXNtG0CCkWLP_CMYw/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

Next
Prev Post
Previous
Next Post
Unknown

About Unknown

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

Show Comments: OR
0 on: " Top 5 Beautiful Newsletter Forms for Blogger "

Submit
Subscribe to Newsletter

Complete the form below, and we'll send you our recent update.

Recent Posts

© Copyright 2016 Widget-SpY. Designed by Bloggertheme9. class='deen'>Distributed By Protemplateslab.