How to Add Subscription Box With Exclusive Look - In this Tutorial I will share you a New Stylish subscription box widget .
3. Next add the following markup freely between the opening tag <body> and closing </body>
.
For example like this blogger I add in the Footer-wrapper
HTML
4. After that save the template and see the results.
HOW TO Add Stylish SUBSCRIber BOX in Blogger
This tutorial I created at the request of bloggers who want to install the Subscription Box like in this blogger.
Actually, for those who are familiar with coding bloggers may not be difficult to find the code in a blogger page, because all of the desired code would be very easy to copy and paste in passing Inspect Elements or Page Source of the blog page. However I would still share this tutorial so that bloggers can add them easily.
How to Install Email Subscription Box With New Design
Ok Lets Start , here just need to follow the simple steps below.
1. Go to Blogger> Template> Edit HTML
2. Add the following code above the code ]]> </b: skin> or </style>
CSS
/ * Subscribe Box * /
# Subscribe-css {position: relative; padding: 20px 0; background: # 374 760; overflow: hidden; border-top: 4px solid # eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form {clear: both; display: block; overflow: hidden}
form.subscribe-form {clear: both; display: block; margin: 0; width: auto; overflow: hidden}
.subscribe-css-email-field {background: # 415 471; color: #ccc; margin: 10px 0; padding: 15px 20px; width: 35%; border: 0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px; margin-left: 15px; text-transform: none; font-size: 16px; border: 0; border-radius: 3px; transition: all .6s}
.subscribe-css-email-button: hover {background: # 37b185;}
# Subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
# Subscribe-css-note p.subscribe span {position: relative; overflow: hidden; font-weight: 700; transition: all .5s}
# Subscribe-css-note p.subscribe span.itatu {font-weight: 400; font-style: italic; color: RGBA (255,255,255, .6); text-transform: lowercase}
# Subscribe-css-note p.subscribe span.itatu: before, # subscribe-css-note p.subscribe span.itatu: after {display: none}
# Subscribe-css p.subscribe-span note: before {content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 3px; margin: 10px 0 0; background: RGBA (255,255,255 , .1); transition: all .5s}
# Subscribe-css: hover span p.subscribe-note: before {width: 100%;}3. Next add the following markup freely between the opening tag <body> and closing </body>
.
For example like this blogger I add in the Footer-wrapper
HTML
<Div id = "subscribe-css'>
<P class = 'subscribe-note "> <span> SUBSCRIBE </ span> <span class =' itatu '> TO </ span> OUR NEWSLETTER </ p>
<Div class = "subscribe-wrapper '>
<Div class = "subscribe-form '>
<Form action = 'http: //feedburner.google.com/fb/a/mailverify? Uri =Shouterways'Class =' subscribe-form "method =" post "onsubmit = 'window.open (& apos; http: //feedburner.google.com/fb/a/mailverify? Uri =shouterways& Apos ;, & apos; popupwindow & apos ;, & apos; scrollbars = yes, width = 550, height = 520 & apos;); return true 'target =' popupwindow '>
<Input name = 'uri' type = 'hidden' value = 'Shouterways"/> <Input name = 'loc' type = 'hidden' value = 'en_US' /> <input autocomplete = 'off' class = 'subscribe-css-email-field' name = 'email' placeholder = 'Enter your email "/> <input class =" subscribe-css-email-button 'title =' 'type =' submit 'value =' submit '/> </ form>
</ Div>
</ Div>
</ Div>
Replace all the code that is marked Shouterways with id Feedburner blog buddies
4. After that save the template and see the results.