Home blogger design subscription form free subscription box for blogger (part4)

free subscription box for blogger (part4)

kaviyarasu 17:46 Add Comment blogger , design , subscription form Edit

Hi friends,in this post I am sharing free blogger subscription box for blogger.This is our fourth subscription box from techinfoweb.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.We will release more subscription boxes in further posts.

subscription box

DEMO

<style>
#g4fullwidth{
width:300px;
height:250px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuyyZvxv76TGuf4ksg3fn2LXMjufCknPLJr6CAP3XVDiOjzwwPFLYC1sSCLO5BkOwOKbTrWPbCP9BNQaPYbAYXZlvuOjWW8m_H3M3PAw-ElRXT5ETElNJcd9i1BI29pBCwhyBjmpK5CyI/s1600/g4subscribebox.png);
background-repeat:no-repeat;
padding-top: 120px;
padding-left: 70px;
}
.heading{
margin-bottom: -78px;
margin-left: 20px;
}
.g4button {
    background-color:#0987c6;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #0987c6;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:14px;
    padding:7px 27px;
    text-decoration:none;
    text-shadow:0px 1px 0px #0987c6;
    margin-top:80px;
    margin-left:-25px;
}
.g4button:hover {
    background-color:#0987c6;
    margin-top:80px;
}
.g4button:active {
    position:relative;
    top:1px;
    margin-top:80px;
}
.g4sub {
    -moz-box-shadow:inset 0px 1px 0px 0px #212121;
    -webkit-box-shadow:inset 0px 1px 0px 0px #212121;
    box-shadow:inset 0px 1px 0px 0px #212121;
    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;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #212121;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #000000;
    margin-left: 19px;
}
.g4sub:hover {
    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;
    margin-left: 19px;
}
.g4sub:active {
    position:relative;
    top:1px;
    margin-left: 19px;
}
</style>
<div id='g4fullwidth'>
<form   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><h4 class='heading'>Enter Your Mail </h4><input class='g4button' type="text" name="email" /></div>
            <input type="hidden" value="witsub" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <div ><input class='g4sub' 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.

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )