HOW TO MOVE EMAIL NEWSLETTER TO YOUR DESIRED PAGE

Adding an email newsletter is the best way to inform blog or website followers of the new contents added to your website.This are the steps to follow.Provided that you are using blogger,sign in your blogger account navigate to layout then click add gadgets on side bar.Select subscribe form and try subscribing with another email different from the one you are using on blogger.Now if its working fine without errors go back to your HTML-code of your template just before the b:skin add the css code below and click save.

HTML CSS Result Skip Results Iframe @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap'); * { margin: 0; padding: 0; } html { font-size: 20px; font-family: 'Roboto'; } .wrapper { height:100vh; position: realtive; } .fas.fa-envelope { color: #fff; font-size: 2rem; background: #333; padding: 1rem; border-radius: 100%; margin: 0 0 1rem 0; } .card-content { max-width:100%; background-color: #04AA6D; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 1rem; padding: 4rem .5rem; box-shadow: 1px 1px 2rem rgba(0,0,0,.3); text-align: center; } .card-content h1 { text-transform: uppercase; margin: 0 0 1rem 0; } .card-content p { font-size: .8rem; margin: 0 0 2rem 0; } input { padding: .8rem 1rem; width: 40%; border-radius: 5rem; outline: none; border: .1rem solid #d1d1d1; font-size: .7rem; } ::placeholder { color: #d1d1d1; } .subscribe-btn { padding: .8rem 2rem; border-radius: 5rem; background: linear-gradient(90deg, #ff9966, #ff5e62); color: #fff; font-size: .7rem; border: none; outline: none; cursor: pointer; }

Congratulations if you made it to this point.Finally we will just take our html codes below and add it on top of the footer as the way i did it on my website.Last navigate jus before the closing tag of in the head and add the code below.#subscribe1{dispalay:none;} but remember it should be written in style tag.

<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.9.0/css/all.css' integrity='sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E' rel='stylesheet'/> <div class='wrapper'> <form action='#' class='card-content'> <div class='container'> <div class='image'> <i class='fas fa-envelope'></i> </div> <h1 style='background-color:red;color:white;'>Subscribe</h1> <p style='color:green;'>Thank you for being the first one to subscribe to our newsletter and staying updated.</p> </div> <div class='form-input'> <label for='email'></label> <input placeholder='Your Email' type='email'/> <button class='subscribe-btn'>Subscribe</button> </div> </form> </div>