Clean Minimal Blogger GadgetsThe best part is all gadgets 100% free




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
Hello friends thank you for visiting Barel.The main purpose of this website is to provide free gadgets for Bloggers that could be implemented directly into the template.We customise the regular gadgets that blogger provide into more user friendly and attractive ones.The advantage of implementing a gadget directly into a template is
  • The settings of a gadget can  tweaked anytime using the Layout setting
  • More SEO friendly that regular HTML gadget method
Now here is a simple tutorial on how to use the gadgets that we provide here on our website.This tutorial is to show users can manually add the gadgets directly into your blog template.
  • First of all go to the Layout menu and add the gadget that you like to add.For example in this tutorial we would be customizing the regular Email subscription gadget that blogger provide to the Simple Subscribe gadget.
  • Add Follow by Email gadget using the Add a gadget option in the Layout menu to the sidebar where you would like to add.
  • Type in the gadget title and the feedburner url to subscribe
  • After adding the gadget go to Template menu and click on Edit HTML
  • Click Jump to widget and select FollowByEmail1
  • Replace the content that begins with <b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail' visible='true'>...............</b:widget> to the HTML code that we find here.The widget ID differs according to the widget that we use.Since in this tutorial we use Follow by Email gadget,the  widget ID would be 'FollowByEmail1'
  • Make sure you have added the css part before the </b:skin> closing tag which can found here
That's it.Now reload your website and view your new customized gadget.Settings can be changed anytime using the Layout menu and there is no need to trouble the code.

Any issues please mention the issue below.Share and comment your reviews.Thanks
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