free blogger subscription form for sidebar

free blogger subscription form for sidebar

Add Comment , , Edit

Hi friends,in this post I am sharing free blogger subscription form for blogger in sidebar.And using subscription form at the sidebar is one best way to get more subscribers for your site.Now we see how to create this blogger subscription form.

newsletter

DEMO

  • Goto Blogger >> Layout >> Add a gadget >> Choose Html/Javascript and click plus icon.
  • Now copy and paste the below code in that widget .

<style>
#fullwidth2{
width:300px;
height:250px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkSEd84GwcRIRaWNHw515Ax5Vqp654mvv1LqS2ZTYH5RPFAnD4DSd3HvdVzpR6Dmeuddj016PWB4GOSjMX_QFD2o0pkNERP5CwpHJR8TJWhJ36bLJg1pt3DI2Is_VoZBjAT3miSMF5oK33/s1600/newsletter.png);
background-repeat:no-repeat;
padding-top:130px;
padding-left:40px;


}
.f2button {
    -moz-box-shadow: 3px 4px 0px 0px #000000;
    -webkit-box-shadow: 3px 4px 0px 0px #000000;
    box-shadow: 3px 4px 0px 0px #000000;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #212121));
    background:-moz-linear-gradient(top, #000000 5%, #212121 100%);
    background:-webkit-linear-gradient(top, #000000 5%, #212121 100%);
    background:-o-linear-gradient(top, #000000 5%, #212121 100%);
    background:-ms-linear-gradient(top, #000000 5%, #212121 100%);
    background:linear-gradient(to bottom, #000000 5%, #212121 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#212121',GradientType=0);
    background-color:#000000;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
    border:1px solid #212121;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:7px 9px;
    text-decoration:none;
    text-shadow:0px 1px 0px #212121;
    margin-left:65px;

}
.f2button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #212121), color-stop(1, #000000));
    background:-moz-linear-gradient(top, #212121 5%, #000000 100%);
    background:-webkit-linear-gradient(top, #212121 5%, #000000 100%);
    background:-o-linear-gradient(top, #212121 5%, #000000 100%);
    background:-ms-linear-gradient(top, #212121 5%, #000000 100%);
    background:linear-gradient(to bottom, #212121 5%, #000000 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#000000',GradientType=0);
    background-color:#212121;
        margin-left:65px;
}
.f2button:active {
    position:relative;
    top:1px;
    margin-left:65px;
}
.s2button {
    -moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
    -webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
    box-shadow:inset 0px -3px 7px 0px #29bbff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
    background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
    background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
    background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
    background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
    background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
    background-color:#2dabf9;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #0b0e07;
    display:inline-block;
    cursor:pointer;
     color:#ffffff;
    font-family:arial;
    font-size:15px;
    padding:6px 13px;
    text-decoration:none;
    text-shadow:0px 1px 0px #263666;
    margin-left:13px;
}
.s2button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
    background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
    background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
    background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
    background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
    background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
    background-color:#0688fa;
}
.s2button:active {
    position:relative;
    top:1px;
}

#fullwidth2 .fcolor2{
color:white;
font-family:'Arial, bold';
font-size:20px;
padding-left:85px;

}

 

</style>
<div id ="fullwidth2">
            <form  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 class= 'fcolor2'> Email</div>
            <div> <input class= 's2button ' type="text" name="email"/></div>
            <input type="hidden" value="techinfoweb" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input class= ' f2button' type="submit" value="Subscribe" /></form></div>

  • Click Save and View Blog .Now you have beautiful subscription box at the sidebar.
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

Subscribe to: Post Comments ( Atom )

Pages