5 Jun 2017

Responsive Email Subscription Box for Blogger

How to add responsive email subscription box on Blogger?

Responsive Simple Email subscription box for blogger.

Hello Bloggers! Here I am going to share a simple responsive Blogger Email subscription box widget/gadget with name and email form section. Through which people can subscribe your blog to get your latest updates of your blog post through Email notifications. This widget/gadget is quite responsive and is also great in appearance. You should use this widget/gadget.

Script codes to setup Email subscription box on your blog

 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
67
68
69
70
71
72
73
74
75
76
77
<style>
#bgt-subscribe-box .header{
background: none ;
color: #a333333;
font-size: 28px;
line-height: 36px;
padding: 15px 25px;
font-weight: 700;
font-family: open sans;
text-align: center;
}
#bgt-subscribe-box {
width:auto;
height:auto;
background:#ffffff;
}
#bgt-subscribe-box p {
font-family:'Open Sans';
font-size:13px;
color:#888;
line-height:20px;
padding:10px 20px 0 20px;
margin:0;
}
#bgt-subscribe-box .bgt-emailfield {
padding:0px 20px 10px;
}
#bgt-subscribe-box .bgt-emailfield input {
background:#fff;
color:#bbb;
padding:10px;
margin-top:10px;
font-size:13px;
font-family:'Open Sans';
width:91%;
border:0;
border:1px solid #ccc;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield input:focus {
outline:none;
border:1px solid #d9d9d9;
color:#888;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton {
background:#0098d3;
color:#fff!important;
text-transform:uppercase;
font-weight:bold;
border:none;
outline:none;
width:100%;
cursor:pointer;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:active {
outline:none;
border:none;
background:#444;
color:#fff;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:hover{
background:#333333;
color:#fff;
}
</style>
<div id='bgt-subscribe-box'>
             <div class='bgt-emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtolearnblogcom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == "") {this.value = "Enter Your Name";}' onfocus='if (this.value == "Enter Your Name") {this.value = "";}' value='Enter Your Name'/>
               <input type='text' name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address";}' onfocus='if (this.value == "Enter Your Email Address") {this.value = "";}' value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='howtolearnblogcom'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='bgt-submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
</div></div>

How to setup subscribe box for Blogger (Blogspot)?

Follow these steps:
  • Replace all the yellow marked name with your blog feed name.
  • Paste this code on sidebar of your blog.
  • Go to Theme section on your blog.
  • Click on Add Gadgets on sidebar. 
  • Select HTML/JAVASCRIPT

  • Modify and copy the above codes.
  • Put the final code on html/javascript box.

I hope everything is clear. If you have any kind of problem regarding to setup subscribe box on Blogger's blog. Then, Please write your problem below on comment box.

2 comments:

  1. Hello , very good article.
    Thanks for sharing with us, keep up the good work.

    ReplyDelete
    Replies
    1. Thanks! Keep visiting on our blog for more new updates. Don't forget to subscribe us.

      Delete

Please note before commenting on this page.
1. Don't comment as for advertisement purpose.
2. Don't hyperlink your website inside comment box.
3. Abuses are strictly prohibited.
4. If necessary, you can post the only URL without any text hyperlink.