Wednesday 8 June 2016

Simple Subscribe for Blogger




CSS 

Add this part before the </b:skin> closing tag

.subscribe-box {
border-top: 4px solid #1ebab2;
}

.subscribe-box p {
padding: 15px 0;
margin: 0;
}

.subscribe-box input {
padding: 10px 12px;
border-radius: 3px;
border: 1px solid #ddd;
background-color: #f8f8f8;
width: 100%;
box-sizing: border-box;
font-size: 15px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}

.subscribe-box input:focus {
padding: 10px 12px;
border-radius: 0;
border: 1px solid #fff;
background-color: #fff;
width: 100%;
font-size: 15px;
outline: none;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}

.subscribe-box #submit {
margin: 25px 0 0;
font-size: 16px;
text-transform: uppercase;
background-color: #1cbbb4;
color: #fff;
cursor: pointer;
border: 0;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}

.subscribe-box #submit:hover {
background-color: #189f99;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}

HTML

Go to the layout option  and add a HTML/Javascript gadget.Copy and paste the below code and replace the Feedburner username (The one highlighted with blue).

<div class="subscribe-box">
 <h2 style="padding: 20px 0 10px;display: inline-block;font-size:18px;">Subscribe to our newsletter</h2>
    <p style="color: #818181;padding:0 0 15px 0;font-size:15px;margin:0;border-bottom:1px solid #ddd">Awesomeness delivered to your Inbox</p>
      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=barrelUI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
      <b><p>Your Name</p></b>
      <input type="text" name="name" placeholder="John Smith" />
     <b><p>Your Email</p></b>
     <input type="text" name="email" placeholder="johnsmith@site.com" />
    <input type="submit" value="Take me in" id="submit" />
<input name="uri" type="hidden" value="barrelUI" />
  </form>
 </div>

(or)

One Click Install




Hope you like the gadget.Please comment your opinions and share it among other bloggers.Thanks

No comments:

Post a Comment

author
Jinson Johny
A professional graphic designer,new user to freelancer[dot]com platform Specialised in UI/Web design,Brochure design,Poster design,Vfx and CG work