Friday, July 3, 2015

Subscribe Box For Blogger And WordPress

The subscribe box uses pure HTML5 and CSS3 effects to enhance its look. 
Compatibility:
The widget is supported (with effects) in all popular browsers:
Subscribe Box For Blogger And WordPress  in all popular browsers

Blogger:

The installation of this subscribe box is quite easy. Just follow these steps for Blogger
  • Go to Blogger > Layout 
  • Click on Add A New Widget > HTML/Javascript 
  • Paste the following code in the box:

Replace ekWMe with your feedburner feed ID.


WordPress:
  • Go to WordPress Admin > Appearance.
  • Drag a text widget.
  • Paste the following content in it:

- Replace MPT-Network with your feedburner feed ID
- Done! Check your site and you won't be disappointed with the results!

Tuesday, May 26, 2015

Email Subscribe Widget for Blogger
Subscribe Widget for Blogger

You can use this widget below of every post. This subscribe box widget is created with simple css with colorful background. In this email subscription widget visitors are able write their name. The name box make this widget more professional. In this widget you can change subscribe box heading. Default heading is: "Subscribe for our all latest news and updates".
Now lets start this:

First you need to add CSS code of this widget. So, copy past below css before </style>
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px

- Save Template

Now add a new HTML/Javascript gadget from Layout and past below code.
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>
</div>
</div>
<div class="creadit">
<a href="http://blogger-templatees.blogspot.com/2015/05/email-subscribe-widget-for-blogger.html" rel="dofollow" target="_blank"> Get This Widget</a></div>

Customization:
Change all USER-NAME with your feedburner user name.

And finally don't forget to share our posts with your friends. Thanks.