0

Stylish Email Subscription Widget For The Blogger Blog

Hey .. Today Let's we see how to add stylish Email subscription widget for your blogger bog ... By this you can improve your traffic and you an inform the readers about your newest blogger posts .. If someone registered their emails to this service , they got your newer blog posts via Email .. That's why i'm told you that this widget is improve your traffic ..

OK .. Let's do it ... 

You have to follow only 4 Simple Steps ..

  1. Go to you blogger Dashboard > Layout ..
  2. Then click on add a gadget and select "Add Html / Java Script " ..
  3. Now copy Down the following Code and Paste it ..


<div class="subscribe_outer">
<div class="subscribe_wrapper">
<p>Subscribe Via Email !</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GadgetSack', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="GadgetSack" 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/AVvXsEgmNqjnLg43Saj16Ig49z5SEEdKub37rZ3L2Q-PZLImmqsHI7whEBoXIHW-scasmzJTiATTSgcPMTnMGKBP_S86BNqIbWKoQZDZQztkg_HnTeaXS501R0Te3sQ0zAvQatdB3FL-VKOd5jg/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/AVvXsEjLELaVis5PsES2NlDSj38N0DY5LzAtwE-s3VoqvIbkW3wLSGZOetc34Y9VgFtCQMTCoIRhA15RBS8yjj-PTYhvyG4QI_qeZ7K6WBJx2crlXZEGiAfAT-lR-lCSnHz1qhg6HBZNlxWwfeU/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/AVvXsEgDHNsx-gBh3-9rwdsRmVQ3twuvfYZhWdrgi6zuKbYgXHkPv5PYPeKOxuWyrzS7feXWXtbjk6bqL3EOpVqM4MD0Kl78DR_MD6IzNPuhxsw3ekdDlizRWMK-G_NrT32zXeKavcDfmzAkI5A/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><center><a href="http://gadgetsack.com/2014/02/mail-subscription-widget.html">Get This</a></center>
  • You Can customize you widget as your wish by replacing highlighted words by your own words ..
        4.  Now Save your widget ... 

That's all .. Hope you Enjoyed .. 

----------------------------------------------- END ----------------------------------------------

Dont' Forget to subscribe to our news letter ..

If you have any questions please ask them by commenting .. Share your success also with us .. Share this if it is Useful .. 


Unknown

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment