Himanshu

Negi

Developer & Internet Marketer


Welcome to my blog.

Sed sed leo sit amet elit sagittis fermentum. Nulla posuere commodo erat. Nam ac nunc ipsum, id espara tincidunt orci. Quisque adipiscing molestie dolor, ut congue sem porta et. Sed sapien urna, auctor et accumsan ut, accumsan sit amet dui. Nunc tristique interdum magna, dictum volutpat sem. Nam ac nunc ipsum, id espara tincidunt orci. Sed sapien urna, auctor et accumsan ut.

Stylish and Customized Feedburner Subscription box for blogger and wordpress

May 9, 2017wp-himu4 Comments

Feedburner is a free newsletter service from Google that works fine for some of bloggers like us but the Subscription box Feedburner provide doesn’t look impressive to blog visitors and they don’t interact with it.

Using a stylish and customized Feedburner subscription box is a smart way to convert visitors into loyal blog readers. The subscription box I am going to share with you will surely encourage visitor’s action and you’ll get more blog subscribes, that will ultimately increase traffic to your blog.

feedburner subscription box

Feedburner Subscription Box Code

Copy the following subscription box code and insert it into your blog or theme. You have to make sure that you should change my Feedburner username (i.e. himanshunegi) to yours so that your visitors could subscribe to your feeds not mine! This subscription box can be used with both blogger (blogspot) and wordpress. Also, you can send this Feedburner subscribe box in Email too!

[codesyntax lang=”css” title=”Feedburner Subscription box”]

<b:if cond='data:blog.url != data:blog.homepageUrl'><div id="subscribe-box-sbm">
 <div class="white-border">
  <div class="subscribe-box-sbm-wrap">
   <h4>Don't Miss Another Article</h4>
   <p>Join over 10,000 people who get FREE and fresh content from this Blog. We Respect Privacy, You're Safe! No Spam!</p>
   <form id="subscribe" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=himanshunegi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
                           <input id="subbox" type="email" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...' } " onfocus=" if ( this.value == 'Enter your email address...') { this.value = '' }" value="Enter your email address...">
                            <input type="hidden" value="himanshunegi" name="uri">
                            <input type="hidden" value="en_US" name="loc">
                            <input id="subbutton" type="submit" value="Subscribe">
<p>HEY, COMPLETE YOUR SUBSCRIPTION! CHECK YOUR INBOX NOW...!</p>
                         </form>
  </div>
 </div>
 </div>
 <style>
 #subscribe-box-sbm {
     background-color: #f5f5f5;
     border: 10px solid #e4e4e4; 
     margin-top: 30px;
 }
 #subscribe-box-sbm .white-border {
     border: 1px solid #fff;
 }
 .subscribe-box-sbm-wrap {
     background: url("https://lh5.googleusercontent.com/-Jk33mfePNXA/URuWhbGkxkI/AAAAAAAABVc/vwzUJ2veG-0/h120/signup-ribbonblue-sbm.png") no-repeat scroll left top transparent;
     margin: -17px -18px;
     overflow: hidden;
     padding: 45px 30px 40px;
     text-align: center;
     text-shadow: 1px 1px #fff;
 }
 .subscribe-box-sbm-wrap h4 {
     text-align: center;
 font-size: 26px;
 }
 .subscribe-box-sbm-wrap p {
     margin: 0 35px 20px;
     text-align: center;
 }
 .subscribe-box-sbm-wrap input[type="email"] {
     background: url("https://lh6.googleusercontent.com/-ZIg5thLqiDY/URuTyxSPNFI/AAAAAAAABVA/lei3Y-3lELE/s50/email%2520icon%2520sbm.png") no-repeat scroll left center #fff;
     box-shadow: 0 0 5px #ccc inset;
     color: #999;
     font-family: 'proxima-nova',sans-serif;
     font-size: 12px;
     margin: 0 5px;
     padding: 15px 0 15px 45px;
     width: 40%;
 }
 .subscribe-box-sbm-wrap input[type="submit"] {
     box-shadow: 0 1px 1px blue;
     font-size: 14px;
     font-weight: bold;
     padding: 10px 15px;
     text-transform: uppercase;
 }
 input[type="submit"] {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 14px;
 height:45px;
 color: white;
 cursor: pointer;
 background-color:#0090ff;
 border-radius: 20px;
 border: 5px none #ECEAE5;
 padding: 11px 20px 9px 20px;
 margin: 10px 10px 10px 0px;
 }
 </style></b:if>

[/codesyntax]

Hopefully, you can see this Feedburner subscribe box in action on this blog. I liked blue and it matches with my blog theme color therefore I am using it. If you want this subscribe box in other colors (Red, Green and Orange) you may consider visiting SBM (Link Broken).

This article has 4 comments
  1. dero
    April 21, 2014

    how to install the code?

    • HIMANSHU NEGI
      June 1, 2014

      Just copy the code and put it where you want this box to render. A similar looking subscription box is available as wordpress plugin (sorry, I don’t remember its exact name).

  2. Heather Solos
    May 12, 2014

    Hi. That is a gorgeous subscription box. I just saw your tweet of this post (Monday morning catch up tweet of an apparently much older post ) and was wondering if you would consider doing one that works with FeedBlitz? I can help you with the code and would be happy to help with the details. (I didn’t want to just build a derivative without speaking to you, credit where credit is due)

    • HIMANSHU NEGI
      June 1, 2014

      Sorry that code is not written by me! A blog who published this wasn’t live last time when I checked it! BTW A wordpress plugin has similar looks and working but I don’t remember it’s URL.


Leave a Reply
www.edatastyle.com www.introducingsomething.com