Colorful responsive e-mail subscription box for Blogger

How to add together colorful responsive electronic mail subscription box on Blogger?

Hello, Bloggers! Here I am going to percentage a elementary responsive Blogger Email subscription box widget/gadget amongst advert in addition to electronic mail shape section. Through which people tin subscribe your weblog to acquire your latest updates of your weblog post through Email notifications. This widget/gadget is quite responsive in addition to is likewise corking inwards appearance. You should purpose this widget/gadget.

Script codes to setup Email subscription box on your blog

  1   2   iii   four   v   half dozen   vii   8   nine  x  xi  12  thirteen  xiv  fifteen  xvi  17  xviii  xix  twenty  21  22  23  24  25  26  27  28  29  thirty  31  32  33  34  35  36  37  38  39  twoscore  41  42  43  44  45  46  47  48  49  l  51  52  53  54  55  56  57  58  59  lx  61  62  63  64  65  66  67  68  69  lxx  71  72  73  74  75  76  77  78  79  lxxx  81  82  83  84  85  86  87  88  89  xc  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 hither - You tin purpose pixels or inwards pct -----*/   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 hither -----*/   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 hither -----*/   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 hither ---*/   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 hither ------*/   margin-left: 10px;   color: #E8E8E8; /*------ Change font color of List hither ----*/   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 push hover color hither -----*/ } #twist-blogger-sbox .rssform .button {   background: #FF7400; /*----- Change Subscribe push background color hither -----*/   color: #FFF!important; /*------ Change Font color hither ------*/   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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpt9azZVohnpkJyF9tWpCTlW4bvYhsj4SpNg_E5gy7W_MEtyoIcC719zUKwainS3jpxChy3uAAA4LQK4gglmEtcuB3oouaa_Vxn7a4Up4FcqawNDQm4xY9W0yfSLaSutRKyQnFMrjbvM/s1600/Lock-twistblogger.png) no-repeat 10px -2px; /*--- ikon URL of Lock appears inwards footer ---*/   color: #818181;   text-align: center;   font-size: 12px; /*--- Font size of footer work ----*/   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 y'all 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 electronic mail 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 yesteryear <a href='https://seo-expert-tutorial.blogspot.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 amongst your weblog feed name.
Paste this code on a sidebar of your blog.
Go to Theme department on your blog.
Click on Add Gadgets on a sidebar.
Select HTML/JAVASCRIPT

Modify in addition to Copy the inwards a higher house codes.
Put the in conclusion code on HTML/Javascript box.

I promise everything is clear. If y'all accept whatever variety of work regarding to setup subscribe box on Blogger's blog. Then, Please write your work below on comment box.