Colorful responsive email subscription box for Blogger


How to add colorful responsive email subscription box on Blogger?

How to add colorful responsive email subscription box on Blogger? Colorful responsive 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
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<style>
#twist-blogger-sbox {
  padding: 0;
  margin: 0;
  width: 100%; /*---- Change width here - You can use pixels or in percentage -----*/
  height: 355px;
  border-radius: 1px;
  border: 0;
  background: #3A3939; /*------ Change background color of widget here--------*/
}
#twist-blogger-sbox .tagline {
  padding: 5px 0px 0px 0px;
  line-height: 35px;
  height: 45px;
  font-size: 25px; /*----- Change the Font Size of Main Tagline here -----*/
  font-weight: normal;
  font-family: "Oswald",sans-serif;
  text-shadow: 0px -1px 0px #999;
  color: #FFF;
  text-align: center;
  background: #FF7400; /*---- Change background color of Tagline here -----*/
  border: 5px solid #FD6A00;
  border-bottom: 7px solid transparent;
  border-bottom-left-radius: 50px;
}
#twist-blogger-sbox .sub-tagline {
  font-family: "Oswald", sans-serif;
  font-size: 19px;      /*--Sub Tagline Font Size - Change here ---*/
  color: #FFF;
  text-shadow: 0px -1px 0px #000;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  text-align: center;
  margin: 0;
}
#twist-blogger-sbox .item-list {
  margin: 10px 0px 0px 0px !important;
}
#twist-blogger-sbox .item-list > ul {
  padding: 0px 0px 0px 50px !Important;
  margin: 0 !important;
}
#twist-blogger-sbox .item-list > ul > li {
  font-family: "Oswald", sans-serif;
  font-size: 15px; /*----- Change Font Size of List here ------*/
  margin-left: 10px;
  color: #E8E8E8; /*------ Change font color of List here ----*/
  line-height: 24px;
  text-align: left;
  text-shadow: 0px -1px 0px #000;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0 !important;
}
#twist-blogger-sbox .rssform {
  padding: 0px 20px;
  margin: 16px 0px 16px 0px;
}
#twist-blogger-sbox .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  width: 100%;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
  -moz-box-sizing:border-box;
}
#twist-blogger-sbox .rssform .button:hover {
  background: #ED6D00; /*----- Change Subscribe button hover color here -----*/
}
#twist-blogger-sbox .rssform .button {
  background: #FF7400; /*----- Change Subscribe button background color here -----*/
  color: #FFF!important; /*------ Change Font color here ------*/
  border: 0;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  width: 100%;
  padding: 6px !important;
  float: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox .lock-policy a {
  color:#818181;
  text-decoration:none !Important;
}
#twist-blogger-sbox .lock-policy {
  font-family: "Oswald",sans-serif;
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 10px -2px; /*--- image URL of Lock appears in footer ---*/
  color: #818181;
  text-align: center;
  font-size: 12px; /*--- Font size of footer line ----*/
  margin-left: 10px;
  padding: 0px;
  line-height: 30px;
  margin-top: -5px;
}
</style>
<div id='twist-blogger-sbox'>
            <div class='tagline'>
            Wait! Did You Know?
            </div>
                <div class='sub-tagline'>Why should you subscribe?</div>
    <div class="item-list">
    <ul>
    <li><div style='color: #FF5700; display: inline-block; font-size:17px; letter-spacing: 4px;'>&#10004;</div> Free Photoshop .PSD Templates</li>
    <li><div style='color: #FFE800; display: inline-block; font-size:18px; letter-spacing: 4px;'>&#10004;</div> Adobe Illustrator Tutorials</li>
    <li><div style='color: #FF5700; display: inline-block; font-size:19px; letter-spacing: 4px;'>&#10004;</div> 3D Animation Tutorials</li>
    <li><div style='color: #FFE800; display: inline-block; font-size:20px; letter-spacing: 4px; letter-spacing: 4px;'>&#10004;</div> Straight into your &#8594; INBOX</li>
    </ul>
    </div>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtolearnblogcom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' name='email' placeholder='Enter your email address...' />
            <input type="hidden" value="howtolearnblogcom" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Subscribe Now" class="button" type="submit" />
            </form>
            </div>
   <div class="lock-policy">
     Powered by <a href='http://www.howtolearnblog.com' rel='dofollow' target='_blank'>How To Learn Blogging</a>
   </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 a sidebar of your blog.
  • Go to Theme section on your blog.
  • Click on Add Gadgets on a 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

avatar

great article. Nice to give codes for email box.
Thank you

avatar

Thanks! Ashutosh. Keep visiting on this blog to get latest updates about Blogger widgets and templates.

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