free subscription box for blogger (part4)

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(http://3.bp.blogspot.com/-fuirBpy5JvQ/Uv6_9V60SsI/AAAAAAAADTg/AiNybpd-oOo/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
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