Learn How To Become a blogger ,Free Templates,Blogger Widgets, Blogger Gadgets,Blogger Tricks And Tips ,Download browsers,software,Net

Sunday, August 12, 2012

New Stylish email subscription box blogger

This tutorial, will show you how to add A Stylish Email Subscription Box in blogger wordpress and websites.it help user to stay connected with blog
This widget contains links of RSS and an attractive subscription form that will increase the number of your Email subscribers.

 How To Install
  1. Next, click on the 'Layout' tab
  2.  click on the "Add a Gadget".
  3. click on the " HTML/JavaScript".
  4. Paste in the code.
<style type="text/css">
/**** subscription popup box start ****/
.textfield{text-transform:capitalize;}
#subscription-pop {padding:10px; background-color:#edefbc;  background-color: rgba(248, 248, 128, 0.4); border: 1px solid #dcdcdc;}
#subscription-pop .title {font-size: 130%; color:#111;}
#subscription-pop .sbutton {background:#FF8E00; border:1px solid #333; cursor:pointer;padding:0 5px;}
.popup{display:none;position:fixed;width:350px;height:263px;z-index:4;font-size:125%;text-align:center;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuQhkCmr0V2YLwvoSx_idFQGEPYu2BQLIqoQ4cdQxflHU1MM-ULMoH4GxTOD9VKkLZnvOAWIF7PueAkdr0EqOftPL6vuD_3puahyphenhyphenaIIGbdeDacAoROFlc9w3DV2Oeu5kGcpNJ8oy2lDzr/s1600/airmail3501.png") no-repeat center !important;margin:0;padding:20px !important;}
.popup h3, .popup .rss-button {display:none;}
.popup #startpoint{padding:0 20px;}
.popup #subscription-pop {background:none !important; border:0px !important;}
.popup #subscription-pop .title {font-size:20px;font-weight:bold;padding:25px 20px 10px;}
.popup .sbutton{margin:10px 10px 20px;margin-bottom:15px\9;}
.popup .textfield{width:250px !important;}
#popupClose{right:5px;top:5px;position:absolute;display:block;cursor:pointer;}
/**** subscription popup box end ****/
</style>



<div id='subscription-pop'>
<h2 class='title'>Subscribe via email for free</h2>
<form target="popupwindow" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=bloggertofree&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input style='width:50%;margin:8px 0;' type="text" placeholder="Email address..." name="email" class="textfield" value="enter email address!" onfocus="if(this.value=='enter email address!'){this.value=''};" onblur="if(this.value==''){this.value='enter email address!';}"/>
<input type="submit" value="Subscribe Now" class="sbutton" />
<input type="hidden" value="bloggertofree" name="uri" />

<input type="hidden" value="en_US" name="loc" />
</form>
<p style='font-size: 85%; line-height: 1.4;color:#333'>Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.</p>
<div class="rss-button" style="padding: 10px 0 0;">
<a href="http://feeds.feedburner.com/bloggertofree" title="Receive free updates via RSS feed" rel='nofollow'><img width="26" height="26" border="" alt="rss button" style="border-width: 0px; display: inline; margin: -3px 6px 0 0;float:left;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3z4F5xlYd-hRiTp3xktESgnxkWa8VnJTNBJCbFjWHUKn9Dvgsp-FpFYkZTrQoyYzP8I90raMWtgpqnSGRXr88Ee0oqB889tJBHiKXR3_SM1ViAhFaUUYaksQp_ShgY5e0uG6dS1NsPrw/s1600/rss.png" /><span style="vertical-align:top;">Subscribe via RSS feed</span></a>
<img width="88" style="border:0; margin: -3px 0 0 10px;" alt="suscribe via RSS" src="http://feeds.feedburner.com/~fc/bloggertofree?bg=99cc66&amp;fg=330000&amp;anim=0" height="26" />
</div>
</div>

 Now make these changes,

Now replace http://feedburner.google.com/fb/a/mailverify?uri=bloggertofree
with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.

Replace bloggertofree with your feed title.

 Save your widget and view your blog to see it

2 comments:

  1. Hello Admin,

    This widget is first posted on AllBloggingTips.com : allbloggingtips.com/2012/03/21/stylish-and-cute-subscription-form-widget-for-blogs/

    and you re shared it. Please remove this post else give proper credit to its original author!

    I hope you'll understand

    Regards,
    Ammar
    Admin of AllBloggingTips.com

    ReplyDelete
    Replies
    1. welcome mr Ammar

      I apologize for this error; so I changed this widget;
      I hope you to be satisfied

      Regards,
      JeHad Hussein

      Delete

Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
JeHad Hussein

Note: Only a member of this blog may post a comment.

Subscribe via email for free

Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.

Most Popular

 

random topics

Followers

Bloggers - Meet Millions of Bloggers

Are you looking for?

Become a Fan On Facebook!

Follow @Bloggertofree