Stripe style blogger subscription box

Hi friends in this post I am sharing stripe type blogger subscription box for free.And this subscription is different from other subscription boxes due to its colour and border.In this subscription box I have used borders,borders with dashed style and more.And I hope definitely you like this box due to the design.Also check the below links to see other blogger subscription boxes.

stripe blogger subscription box

DEMO

Now let we see the code for stripe style blogger subscription box,

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

    <style>
    #whitestripefullwidth{
    width:300px;
    height:430px;
    background:#4397b1;
    border:3px solid #0e626d;

    }
    #authorimage{
    width:300px;
    height:100px;
    background:url(http://4.bp.blogspot.com/-KyFN7K6k5-w/UxM5UaHcqZI/AAAAAAAADWY/YXZIbxFLaUk/s1600/mailicon+stripe.png);
    background-position: center;
    background-repeat:no-repeat ;
    margin-bottom:15px;
    }
    #whitestripetext{
    width:250px;
    height:100px;
    background:#4397b1;
    border:3px dashed #ffffff;
    margin-left:22px;
    font-family:Salina;
    font-size:20px;
    color:#ffffff;
    text-align:center;
    margin-bottom:20px;
    }
    #whitestripebutton{
    width:250px;
    height:50px;
    background:#4397b1;
    border:3px solid #ffffff;
    margin-left:22px;
    font-family:Salina;
    font-size:20px;
    color:#ffffff;
    text-align:center;
    margin-bottom:20px;
    }
    #whitestripesubbutton{
    width:250px;
    height:50px;
    background:#a7d3de;
    border:3px solid #ffffff;
    margin-left:22px;
    font-family:Salina;
    font-size:20px;
    color:#ffffff;
    text-align:center;
    margin-bottom: 20px;
    }
    #whitestripefooter{
    width:250px;
    height:40px;
    background:#4397b1;

    margin-left:22px;
    font-family:Salina;
    font-size:20px;
    color:#ffffff;
    text-align:center;
    margin-bottom:20px;
    }
    }
    </style>
    <div id='whitestripefullwidth'>
    <div id='authorimage'></div>
    <div id='whitestripetext'>Subscribe to our newsletter to get the latest updates to your inbox. </div>
    <div><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">
                <input  id='whitestripebutton' type="text" name="email" placeholder='Enter Your Email' />
                <input type="hidden" value="witsub" name="uri"/>
                <input type="hidden" name="loc" value="en_US"/>
                <div><input id='whitestripesubbutton' type="submit" value="Submit" /></div>
                </form>
                </div>
            <h3 id='whitestripefooter'>We Promise No Spam...    </h3>
    </div>

 

  • Replace “witsub” with your feedburner  name.
That’s all friends……… 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