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.

This post have 2 comments

avatar
Mytechnological gig delete Friday, June 09, 2017

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

Reply
avatar
Vishal Jaiswal delete Friday, June 09, 2017

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

Reply

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.
EmoticonEmoticon

Next article Next Post
Previous article Previous Post