free subscription box for blogger

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

<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
SHARE

About me

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

    Blogger Comment
    Facebook Comment

1 comments :