Home blogger design subscription form free subscription box for blogger

free subscription box for blogger

kaviyarasu 07:51 1 Comment blogger , design , subscription form Edit

Hi friends,in this post I am sharing free blogger subscription box for blogger in sidebar with beautiful banner header.Using subscription form at the sidebar is one of the best way to get more subscribers for your site.Now we see how to create this blogger subscription box for beautiful banner header.

blogger subscription box

DEMO

<style>
#fafullwidth{
width:300px;
height:250px;
background:url
(http://1.bp.blogspot.com/-5lGqaZG5PHQ/UvOfzb13TCI/
AAAAAAAADS4/
Pab6WFiQKyU/s1600/2mail-subscription-concept+copy.png);
background-repeat:no-repeat;
padding-top:70px;
padding-left:40px;

}

#fafullwidth .fcolor{
font color:black;
font-family:'Arial, bold';
font-size:20px;
padding-left:2px;
}
.abutton {
font-size: 18px;
font-family: 'open-sans-semi', arial, helvetica;
border: 1px solid #365693;
border-bottom-width: 6px;
padding: 12px 15px;
transition: all .1s;
-moz-transition: all .1s;
-webkit-transition: all .1s;
-o-transition: all .1s;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
background: no-repeat 11px -3px #5a78b0;
    padding: 3px 3px 3px 3px;
text-decoration: none;
color: #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position: relative;
display: inline-block;
margin-left:70px;
margin-top: 5px;
}
.abutton:hover {
    background-color: #6686c3;
box-shadow: 0px -2px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0px -2px 10px rgba(0,0,0,.2);
    -webkit-box-shadow: 0px -2px 10px rgba(0, 0, 0, .2);
}
.abutton:active {
    background-color: #4d6a9e;
border-bottom-width: 1px;
box-shadow: inset 0px 0px 5px rgba(0,0,0,.4);
-moz-box-shdaow: inset 0px 0px 5px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.4);
margin-top: 5px;
}
.wbutton {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
    background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#666666;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    padding:5px 8px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
margin-top: -60;
margin-left: 25px;
}
.wbutton:hover {
    background:-webkit-gradient
(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
    background:-moz-linear-gradient
(top, #f6f6f6 5%, #ffffff 100%);
    background:-webkit-linear-gradient
(top, #f6f6f6 5%, #ffffff 100%);
    background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
    background-color:#f6f6f6;
}
.wbutton:active {
    position:relative;
    top:1px;

}
.one{ margin-bottom:-80px;
}

</style>
<div id ="fafullwidth">
            <form class="one" action="http://feedburner.google.com/fb/a/mailverify" method="post"
            target="popupwindow"
            onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=witsub', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

            <div class= 'wbutton' > <input   type="text" name="email" placeholder=" Enter Your Email" /></div>
            <input type="hidden" value="witsub" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <div > <input class= ' abutton' type="submit" value="Subscribe" /></div>
            </form>
            </div>

Replace “witsub” with your blog feed.That’s all !!

Print Friendly and PDF

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

1 comments :

Unknown6 February 2014 at 09:03
nice post...
Finally u made it
ReplyDelete
Replies

Subscribe to: Post Comments ( Atom )