USEFUL TRICKS- InVaDeR: AWESOME SUBSCRIPTION BOX WIDGETS

After Sharing buttons, I have come with Subscription box widget for your blog or website. You have seen many subscription box in many blog or website, most of them are commonly similar so that it makes your website general. Today i tried and make a awesome and unique subscription box widget for your blog.
In this I put a Email subscription from and three social sharing link RSS, Facebook and Twitter, so that this widget fulfill your both requirement. I used CSS3 to design this widget so it take only few seconds to load. This Subscription Box Widget can be add in Blogger, WordPress or Any other HTML website. To add this widget, follow these simple steps.

DEMO

How to add Subscription Box Widget.

First copy the following CSS code in your Style.css file or just before </b:skin> in blogger.

#pbt_subscribe-box {
    float: right;
    width: 300px;
    margin: 0 0 10px
    }
#bleft {
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    background: none repeat scroll 0 0 #EEE;
    float: left;
    height: 160px;
    width: 300px;
    border: 1px solid #CCC;
    position: relative;
    border-bottom: 1px solid #BBB
    }
#bleft .icon {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkYRZUbB_pL0Y6NlPMA-j64vzrkZ3eKoc8gPxtq8kZJpSAs4e0Gx8WnEgvdq7oDi9Qw5gFx59Bx7q1lnOQzHImnyjEIURy4ztWazVQ83DgkIqJHyUet8yc64RlvE0-D8JohTn2gkRrDMM/s1600/letter.png) no-repeat scroll center center transparent;
    display: block;
    float: left;
    width: 70px;
    height: 64px;
    margin: 16px;
    }
#bleft .sub-email {
    float: right;
    width: 195px;
    margin: 10px 0 0
    }
#bleft .sub-email h4 {
    color: #000;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    text-shadow: 0 1px #FFF
    }
#bleft .sub-email p.getposts {
    color: #777;
    font-family: arial;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
    width: 175px
    }
#bleft form {
    float: left;
    margin: 0 0 0 20px
    }
#bleft .sbox {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    border: 0 none;
    float: left;
    height: 30px;
    padding: 4px;
    width: 165px;
    border-bottom: 1px solid #CCC
    }
#bleft .go {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    background: none repeat scroll 0 0 #82B832;
    border: 1px solid #689328;
    color: #FFF;
    float: left;
    font-weight: bold;
    margin: 0 0 0 10px;
    cursor:pointer;
    padding: 5px
    }
#bright {
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    background:#EEE;
    background: -moz-linear-gradient(center bottom, #FFF 0%, #EEE 100%) repeat scroll 0 0 transparent;
    background:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255,255,255)),
    color-stop(1, rgb(238,238,238))
);
    border: 1px solid #CCC;
    float: left;
    height: 50px;
    margin: -10px 0 10px;
    width: 300px;
    -webkit-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset
    }
#bright ul {
    float: left;
    list-style: none outside none;
    margin: 20px 0 20px 15px !important;
    padding: 0 !important
    }
#bright ul li {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUuhcru4SJ7n6n5hVIi_kkqrul4JrlfdphI4MuwNIjbpYiFd1DoFM8rDLXYgssc4BYYBFFeqj0uFvLpQVSpJuqOt5AMKQzpFSD7YObzFoepfga09lksNR40qVjM7xaErTjZkJL32Low8hQ/s1600/subs-icons.png) no-repeat;
    float: left;
    margin: 3px 0;
    width: 93px;
    position: relative;
    padding:1px;
    }
#bright ul li a {
    color: #555;
    float: left;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: 25px;
    margin-top: -2px;
    background:0 none;
    text-shadow: 1px 1px #FFF
    }

2. Copy the following HTML code where you want to show this Subscription Box.

<div id="pbt_subscribe-box"><div
id="bleft"><div
class='icon'> </div><div
class='sub-email'><h4>Subscribe now!</h4><p
class="getposts">Get Our Latest Posts in Your Inbox For Free.</p></div><form
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?topbloggertrickstk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input
type="email" name="email" class="sbox" placeholder="Your email address here!"> <input
type="hidden" name="uri" value="topbloggertrickstk"> <input
type="hidden" value="en_US" name="loc">  <input
type="submit" value="Subscribe" class='go'></form></div><div
id="bright"><ul><li
style="background-position: 0 -3px;"><a
href='http://feeds.feedburner.com/topbloggertrickstk'>RSS Feed</a></li><li
style="background-position: 0 -24px;"><a
href='http://www.facebook.com/topbloggertricks.tk'>Facebook</a></li><li
style="background-position: 0 -45px;"><a
href='http://twitter.com/Abhidinvader'>Twitter</a></li></ul></div></div>