free blogger subscription form

Hi friends,in this post I am sharing free blogger subscription form for blogger.Default subscription form not look attractive.And I am now  providing subscription form which looks simple and neat.If you want place subscription form at the center of header or footer ,this subscription form will be good choice.
blogger subscription form
A sample subscription form given in above demo link.Kindly see the sample at the footer side.
Note: Make a backup of your template.If anything gone wrong,this backup will be helpful
  • Now goto Blogger >> Dashboard >>Template >>Edit Html.
  • Click “format template” and find  ]]> </b:skin> Just above  ]]> </b:skin> add the following code.
#fullwidth{
margin-left:170px;
width:960px;
height:460px;
background:url(http://4.bp.blogspot.com/-mRUDY8HR-7w/Uu0upHtsVtI/AAAAAAAADRk/VrGcfyEbrSw/s1600/subform.png);
background-repeat:repeat;
}
#fullwidth .rightside{
margin-top:160px;
margin-right:30px;
float:right;
width:300px;
height:150px;
}
.signupbutton {
margin-left:25px;
margin-bottom:10px;
    background-color:#212121;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Georgia;
    font-size:20px;
    padding:16px 76px;
    text-decoration:none;
    text-shadow:0px 1px 0px #000000;
}
.signupbutton:hover {
margin-left:25px;
margin-bottom:10px;
    background-color:#000000;
}
.signupbuttonactive {
margin-left:25px;
margin-bottom:10px;
    position:relative;
    top:1px;
}
.whitebutton {
margin-bottom:10px;
    -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:20px;
    font-weight:bold;
    padding:16px 38px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}
.whitebutton: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;
}
.whitebutton:active {
    position:relative;
    top:1px;
}
  • Now just below body(if  you want to add form above header) or just above </html>(if you want to add subscription form below footer) add the following code,
<div id='fullwidth'>
<form class='rightside' action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Techinfoweb', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
             <div >  <input class="whitebutton" type='text' name='name' placeholder='Your Name' /></div>
              <div> <input class="whitebutton" type='text' name='email' placeholder='Your Email' /></div>
               <input type="hidden" value="Techinfoweb" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                       <div> <input value="Sign Up Now!" class="signupbutton" type="submit" /></div>
              </form>
           
              </div>
And in above code just replace “Techinfoweb” with your feedburner name.If you like this share it and enjoy.
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

0 comments :

Post a Comment