Today I am going to teach you how to add simple subscribe box in blogger To add this widget to your blogger follow the steps given below
Live Demo
How to add this to blogger
Go to Layout>add a gadget>HTML/javascript
Paste the following code
<style type="text/css"> *{ font-family: proxima-nova, sans-serif;}
body { background:#ffffff;}
.box { margin: 50px auto; width:400px; height:400px;}input[type="email"] { appearance: none; width:380px; height:70px; font-size:3em; background:transparent; border:none; border-bottom:solid 4px #e6e8eb; text-align:center; transition: border-color 0.6s ease;}
::-webkit-input-placeholder { color: #464c4c; transition: color 0.3s ease;}
:focus::-webkit-input-placeholder { color: transparent; transition: color 0.3s ease;}
input[type="email"]:focus { outline:none; border:none; border-bottom:solid 4px #00AEEF; transition: border-color 1s ease;}
input[type="submit"] { appearance: none; width:380px; height:50px; font-size:1.05em; background:transparent; color: #e6e8eb; border:none; text-align:center; letter-spacing:0.15em; text-transform:uppercase; transition: color 0.5s ease; outline:none; border:none;}
input[type="submit"]:hover { color: #464c4c; cursor:pointer; transition: color 0.5s ease;} </style>
<form class="box"> <input type="email" placeholder="email adress"></input> <input type="submit" value="subscribe"></input></form>
- To change the width and height of the text box change width:380px and height:70px
- To change the Width and height of the Subscribe button Change width:380 and height:50px
Save it
You are all done Please Like And comment below
EmoticonEmoticon