Tuesday, 8 April 2014

New! Stylish Email Subscription Widget for Blogger blogs

Google Plus Style Email subscription widget for Blogger blogspot blogs:
Associated with Feed burner by Google which deliver every new post that you publish on your blog.
We have already published Feedburner trick to get more visitors to your blog.  A smart way to deliver only post title to your subscribers.
Google Plus Style or Chrome style widget designed  by Bwidgets.com.

How to Add to Blogger?:
Step-1:Go to Blogger Dashboard and then Layout.
Step-2:Add a Gadget and select html/javascript.
Step-3:Copy and Paste the Below code and Save.
<div class="subscribe_outer">
<div class="subscribe_wrapper">
<p>Subscribe Updates, Its FREE!</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TrixKing', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="TrixKing" name="uri">
<input type="hidden" value="en_US" name="loc">
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if (this.value == " ")="" ;}"="" onclick="value=''"name="email">
<input class="emailButton" type="submit" value="Signup Now!" title="">
</form>
</div>
</div>
</div>
<style>
.subscribe_outer {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKi3sJEHgOrrGepIZjTIIFL6Jo4Bu1TN4dAn1J6yeecIBkDNM5JSdajTDGezoyY_RHQGzLPrn4_VGj4zMudVMrcRfNGdFnKNBAFynbZgIRbZP1O3nW0jOoQWOLWYWR05H9Za5Mytcvyg8/s1600/color-chronicl.gif") repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
}
.subscribe_wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz3e9HmQAFFTo_ulOCAwmJnwWd4Z2Ue89uNIn9XhIkAd_ynOkVHQTjcAycW6iwgls7jSgzYQTshWQVu9-doQirjjA1IHZY-fDxdyZp3I2ux0XGEn_aMRvO8K-rZpElCj4oB3xpyx6269k/s1600/pattern-chronicl.png") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 15px;
    font-weight:bold;
    line-height: 20px;
    padding: 10px 50px 18px 38px;
}
.emailButton {
    background:#249334;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbP2YBigCrXo7uHPlHFizkoRZ02NU750z8Wjqct085UGo8QyZGwWQDs-d5Y7UGf0Zuxz6Gxfho2SXyQT8sfE8cDZPpvCVUsJ5yPhxH_47lFtYV2_xEpCfGdMmZ_zfIWh2M7IbOSxdY5M/s1600/email.png") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #444444;
    padding: 10px 40px;
    margin: 0 0 15px;
    outline: none;
    text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family:'Lora',georgia,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.emailButton {
    width: 300px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
</style><a href="http://TrixKing.blogspot.com">Get This</a>
Customization And Usage:
You can customize this widget in the following ways.
Change Text Subscribe to updates! it's free in Line#3 with Your own text if you want.
Change Text Enter your Email address in Line#8 . You might want to change it to Hi Dude! Enter your email address.
To change text SignUp Now!. change that text in Line#14.
Remember! You must to change Red Text in the above code. i.e TrixKing with your own FeedID.

0 comments:

Post a Comment