Monday, June 18, 2012

Simple Subscription Box Widget for your website

subscription box widget
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. 



How to add Subscription Box Widget.

  1. 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(http://3.bp.blogspot.com/-c2n0mX2Emm8/T96kjqg0qHI/AAAAAAAABWw/7MF8P4bHEcM/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(http://3.bp.blogspot.com/-DubrD-iJuQs/T96kkoBby3I/AAAAAAAABW4/INhMaDeckC4/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'>&nbsp;</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?probloggingtools', '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="probloggingtools"> <input
type="hidden" value="en_US" name="loc">&nbsp;&nbsp;<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/probloggingtools'>RSS Feed</a></li><li
style="background-position: 0 -24px;"><a
href='http://www.facebook.com/probloggingtools'>Facebook</a></li><li
style="background-position: 0 -45px;"><a
href='http://twitter.com/probloggingtool'>Twitter</a></li></ul></div></div>

   3. Edit the Email Subscription link with your blog, probloggingtools. Also edit the RSS, Facebook and Twitter links with your blog or website.

Credits

This Subscription box widget is developed by Bloggermint and Further customized by PBT. If you want to share it with your readers, you have to give a back link to PBT.

Need Help??

Facing any problem to add this subscription box widget in your blog or website. Feel free to share your problem here. I will try to give resolve your problem.

3 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...