Knigulper Knigulper

4 Killer Horizontal Email Subscribe Widget For BlogSpot

11:31:00 6 Comments In:
min
() Words
Share
Share
Tweet
Share
Share
Share
Pin it

Do you know why Email Subscription Widget is so important for your blog? Well, it is because you can get good numbers of traffic for your blog through Feedburner. It is undoubtedly true that Email Subscription Widget can give you the best possible traffic to your site. That is the reason why I always argue that every blogger should install Email Subscription Widget .

Check out: Add Stunning Email Subscription Widget to Blogger

As you already know that we have published many email subscription widgets for BlogSpot blogs, but today, we are going to share an effective Email Subscription Widget for you that lets you target your visitors as they can see your subscription email box below every post. This widget is specially designed for those who want to grow their subscribers. A few days ago I decided to visit some useful sites and suddenly I came to know about Aweber referral program where I got an idea of creating horizontal email subscription widget for Blogger. This Horizontal Email Subscription Widget is developed with Css3 and HTML5 which makes it easy to load even on slow Internet connection.

Pay Attention: CSS3 OnClick Email Subscription Widget for Blogger

Why You Should Install Email Subscription Widget?

Wouldn't it be nice if you keep a good relationship with every one of your reader? Sending your subscribers newsletters generates the massive traffic for your blogs which results in huge ads revenue from your site. It is clear that when someone signs up for your email newsletter, they start receiving emails from you every time when you publish the new contents from your blog. To maintain these associations going strong, plan to offer readers with constant and participating publication content. We all know that not only are e-mail newsletters on the simpler side, but they're also cheaper than direct mail as they have many benefits. This may seem like a bad thing if you don't send your readers newsletters. Email newsletters keep your readers up-to-date about your blog contents.

Adding Email Subscription Form Below Every Post in Blogger

  1. Go to your Blogger Dashboard > Theme > Edit HTML
  2. Click inside the Theme Editor > Press Ctrl + F to open the Search box
  3. Type </article> or <data:post.body/> in the Search box and press Enter Key
  4. Choose your favorite widget code and paste it just below the </article> or <data:post.body/>
  5. After adding your favorite code, replace the blue text with your own FeedBurner username/text and press Save Theme.

Horizontal Email Subscription Style No. 1

Horizontal Email Subscribe Widget

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*====== CSS Horizontal Email Subscription Widget BY www.knigulper.com starts ======*/
.knigulper_form-wrapper {background-color:#29343B; background-image: url('https://2.bp.blogspot.com/-YXkCX1C2n4k/WRroOpf_sPI/AAAAAAAACU4/cVYnZyscty4mSjf4FD9kdE4YBRHZG44KgCLcB/s1600/knigulper-sub-box.png'); background-repeat: no-repeat; border-top:1px solid #e4e4e4; border:1px solid #e4e4e4; font-family:"Oswald", sans-serif; height:219px; width:660px; margin:20px auto;}
.knigulper_form-wrapper {margin-top:5px;margin-bottom:5px;}
form {padding-right: 25px; padding-top:74px; }
.knigulper_form-wrapper .knigulper_form {font-size:12px; }
.knigulper_form-wrapper .knigulper_lbl {display:block; }
.knigulper_element {margin-bottom:5px; }
.knigulper_form-wrapper .knigulper_form input[type="text"] {background-color:#4f5e67; color: white;font-family:"Oswald", sans-serif; font-size: 13px; letter-spacing: .75px; height: 26px; vertical-align:middle; width:212px; border: none; padding-left: 36px; margin-bottom:10px; float: right; }
#email {margin-left: 150px; }
.knigulper_form-wrapper .knigulper_form input[type="text"]:focus {background-color:#28333a; border: 1px solid #8496a3; color: white; letter-spacing: .75px; }
.knigulper_form-wrapper .knigulper_form #name {background-image: url('https://4.bp.blogspot.com/-3gwwP62A0n8/WRsBdsigDXI/AAAAAAAACVM/f2W6kZTLvCU_jEK3OqIxM7bWwBtdtgNsACLcB/s1600/knigulper-sub.png'); background-repeat: no-repeat;border-top:1px;border-bottom:1px;border-left:1px;border-right:1px;border-color:#28333a;border-style:solid; }
.knigulper_form-wrapper .knigulper_form #email {background-image: url('https://1.bp.blogspot.com/-X1xkAgcsyzo/WRsB1PgUaSI/AAAAAAAACVQ/s9G4pqFmLKgHP8Pt31G0DuwRiKeeN3xGACLcB/s1600/hosted-at-knigulper.png'); background-repeat: no-repeat;border-top:1px;border-bottom:1px;border-left:1px;border-right:1px;border-color:#28333a;border-style:solid; }
.knigulper_submit {padding-top:75px; vertical-align:middle; padding-left: 410px; }
.knigulpersub_button {-moz-box-shadow:inset 0px 34px 0px -10px #cfc929; -webkit-box-shadow:inset 0px 34px 0px -10px #cfc929; background-color:#928f34; border:1px solid #28333a;
box-shadow:inset 0px 25px 0px -3px #cfc929; color:#28333a; cursor:pointer; display:inline-block; float: left; font-size:15px; letter-spacing: .5px; text-align: center; text-decoration:none; width: 225px; height: 31px; font-weight:normal;}
.knigulpersub_button:hover {-webkit-stroke-width: 5.3px; -webkit-fill-color: #FFFFFF; -webkit-stroke-color: #FFFFFF; text-shadow: 1px 0px 20px white; }
.knigulpersub_button:active {position:relative; top:1px; }
.powered_by_knigulper p {color: #8496a3; font-size: 11px; padding-top:27px; padding-left: 370px; }
.powered_by_knigulper a:link {color: #8496a3; font-weight: bold; text-decoration: none; }
.powered_by_knigulper a:visited {color: #8496a3; font-weight: bold; text-decoration: none; }
.powered_by_knigulper a:hover {color: #cfc929; font-weight: bold; text-decoration: none; }
.powered_by_knigulper a:active {color: #8496a3; font-weight: bold; text-decoration: none; }
/*====== CSS Horizontal Email Subscription Widget BY www.knigulper.com ends ======*/
</style>
<!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Begin -->
<div class='knigulper_form-wrapper'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='knigulper_form' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=knigulper&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
<input name='knigulper_tracking' type='hidden' value='en_US'/>
<div class='knigulper_element'>
<input class='knigulper_textinput' id='name' name='name' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Name&apos;}' onfocus='javascript:if(this.value==&apos;Name&apos;) {this.value=&apos;&apos;;}' type='text' value='Name'/>
</div>
<div class='knigulper_element'>
<input class='knigulper_textinput' id='email' name='from' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Email Address&apos;}' onfocus='javascript:if(this.value==&apos;Email Address&apos;) {this.value=&apos;&apos;;}' type='text' value='Email Address'/>
</div>
<div class='knigulper_submit'>
<input class='knigulpersub_button' name='Submit' type='submit' value='Yes! Subscribe Now'/>
</div>
<div class='powered_by_knigulper'>
<p>Powered by <a href='/' target='_blank'>Knigulper</a>
</p></div>
</form>
</div>
<!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Ends --></b:if>

Horizontal Email Subscription Style No. 2

Horizontal Email Subscribe Widget

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*====== CSS Horizontal Email Subscription Widget BY www.knigulper.com starts ======*/
.knigulper1_form-wrapper {background-color:#29343B; background-image: url('https://4.bp.blogspot.com/-m0dwSS8mSiE/WRs8zopfiMI/AAAAAAAACVk/RUBcWv44gf0tfD-b362UTjt1U_DeqVhUgCLcB/s1600/hosted-at-knigulper.png'); background-repeat: no-repeat; border-top:1px solid #e4e4e4; border:1px solid #e4e4e4; font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; height:229px; width:660px; margin:15px auto; margin-top:5px;margin-bottom:5px;}
form {padding-right: 25px; padding-top:64px; }
.knigulper1_form-wrapper .knigulper1_form {font-size:12px; }
.knigulper1_form-wrapper .knigulper1_lbl {display:block; }
.knigulper1_element {text-align: center; border-radius: 100px; padding-left: 378px; padding-top:10px;}
.knigulper1_form-wrapper .knigulper1_form input[type="text"] {background-color:#4f5e67; color: #b43a25; font-size: 15px; letter-spacing: .25px; height: 35px; vertical-align:middle; width:203px; height: 30px; border: none; padding-left: 10px; margin-bottom:7px; border-radius: 100px; border: 1px solid #b43a25; }
.knigulper1_form-wrapper .aweber_form input[type="text"]:focus {background-color:white; border: 1px solid #8496a3; color: #b43a25; letter-spacing: .75px; border-radius: 100px; }
.knigulper1_form-wrapper .knigulper1_form #name {background-color: white; }
.knigulper1_form-wrapper .knigulper1_form #email {background-color: white; }
.knigulper1_submit {padding-left: 402px; padding-top: 6px; }
.knigulpersub1_button {background-color:#b43a25; border:.5px solid white; box-shadow:inset 0px 28px 0px -1px #be584a; color:white; cursor:pointer; font-size:15px; letter-spacing: .5px; text-decoration:none; width: 210px; border-radius: 100px; height: 31px; }
.knigulper1_button:hover {-webkit-stroke-width: 5.3px; -webkit-fill-color: #89a9cd; -webkit-stroke-color: #89a9cd; text-shadow: 1px 0px 50px white; }
.knigulpersub1_button:active {position:relative; top:1px; }
.powered_by_knigulper1 p {color: #8496a3; font-size: 11px; padding-left: 500px; padding-top: -3px; }
.powered_by_knigulper1 a:link {color: #8496a3; font-weight: bold; text-decoration: none; }
.powered_by_knigulper1 a:visited {color: #8496a3; font-weight: bold; text-decoration: none; }
.powered_by_knigulper1 a:hover {color: #be584a; font-weight: bold; text-decoration: none; }
.powered_by_knigulper1 a:active {color: #8496a3; font-weight: bold; text-decoration: none; }
/*====== CSS Horizontal Email Subscription Widget BY www.knigulper.com Ends ======*/
</style>
<!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Stats -->
<div class='knigulper1_form-wrapper'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='knigulper1_form' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=knigulper&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
<input name='knigulper1_tracking' type='hidden' value='en_US'/>
<div class='knigulper1_element'>
<input class='knigulper1_textinput' id='name' name='name' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Name&apos;}' onfocus='javascript:if(this.value==&apos;Name&apos;) {this.value=&apos;&apos;;}' type='text' value='Name'/>
</div>
<div class='knigulper1_element'>
<input class='knigulper1_textinput' id='email' name='from' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Email Address&apos;}' onfocus='javascript:if(this.value==&apos;Email Address&apos;) {this.value=&apos;&apos;;}' type='text' value='Email Address'/>
</div>
<div class='knigulper1_submit'>
<input class='knigulpersub1_button' name='Submit' type='submit' value='Yes! Subscribe Now'/>
</div>
<div class='powered_by_knigulper1'>
<p>Powered by <a href='/' target='_blank'>Knigulper</a>
</p></div>
</form>
</div>
<!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Ends -->
</b:if>

Horizontal Email Subscription Style No. 3

Horizontal Email Subscribe Widget for Blogger

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*====== CSS Horizontal Email Subscription Widget BY www.knigulper.com Starts ======*/
.knigulper2_form-wrapper {background-color:#008000; background-image: url('https://3.bp.blogspot.com/-pxBjk-xyfJI/WRxdW7MupVI/AAAAAAAACV0/XSgZMEOsU0cZprfCXb25P8KLWDhu-R2KwCLcB/s1600/Hosted-at-knigulper.png'); background-repeat: no-repeat; border-top:1px solid #e4e4e4; border:1px solid #e4e4e4; font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; height:304px; width:567px; margin:15px auto;margin-top:5px;margin-bottom:5px; }
form {padding-right: 25px; padding-top:72px; }
.knigulper2_form-wrapper .knigulper2_form {font-size:12px; }
.knigulper2_form-wrapper .knigulper2_lbl {display:block; }
.knigulper2_header {color: #008000; padding-left: 98px; }
.knigulper2_header h1{font-family: 'Oswald', sans-serif;font-weight: lighter; font-size: 2.3em; letter-spacing: .95px;padding-top: 12px;}
.knigulper2_header p{font-size: 1.4em; line-height: 23px; margin-top: -1px;color:#111111}
.input_boxes {text-align: center; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"] {background-color:#4f5e67; color: white; font-size: 15px; letter-spacing: .75px; height: 30px; vertical-align:middle; width:175px; border: none; padding-left: 10px; margin-bottom:16px; border-radius: 100px; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"]:focus {background-color:#28333a; border: 1px solid #8496a3; color: white; letter-spacing: .75px; border-radius: 100px; }
.knigulper2_element {text-align: center; border-radius: 100px; display: inline; padding-left: 5px; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"] {background-color:#4f5e67; color: white; font-size: 15px; letter-spacing: .75px; height: 30px; vertical-align:middle; width:175px; border: none; padding-left: 10px; margin-bottom:13px; border-radius: 100px; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"]:focus {background-color:#28333a; border: 1px solid #8496a3; color: white; letter-spacing: .75px; border-radius: 100px; }
.knigulper2_form-wrapper .knigulper2_form #name {background-color: #89a9cd; }
.knigulper2_form-wrapper .knigulper2_form #email {background-color: #89a9cd; }
.knigulper2_submit {text-align: center; padding-top: 8px;}
.knigulpersub2_button {background-color:#10509d; border:.5px solid white; box-shadow:inset 0px 28px 0px -1px #3f71ad; color:white; cursor:pointer; display:inline-block; font-size:15px; letter-spacing: .5px; text-decoration:none; width: 166px; border-radius: 100px; height: 31px; }
.knigulpersub2_button:hover {-webkit-stroke-width: 5.3px; -webkit-fill-color: #89a9cd; -webkit-stroke-color: #89a9cd; text-shadow: 1px 0px 50px white; }
.knigulper2_button:active {position:relative; top:1px; }
.powered_by_knigulper2 p {color: #5a86b9; font-size: 11px; text-align: center; padding-top: 1px; }
.powered_by_knigulper2 a:link {color: #5a86b9; font-weight: bold; text-decoration: none; }
.powered_by_knigulper2 a:visited {color: #5a86b9; font-weight: bold; text-decoration: none; }
.powered_by_knigulper2 a:hover {color: #fcb414; font-weight: bold; text-decoration: none; }
.powered_by_knigulper2 a:active {color: #5a86b9; font-weight: bold; text-decoration: none; }
/*====== CSS Horizontal Email Subscription Widget BY www.knigulper.com Ends ======*/
</style>
<!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Starts -->
<div class='knigulper2_form-wrapper'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='knigulper2_form' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=knigulper&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
<div class='knigulper2_header'>
<h1>Subscribe To Our Newsletter</h1>
<p>Get Our Latest Updates Straight To Your Inbox For <br/>Free! Unsubscribe Any Time Whenever You Want.</p>
</div>
<div class='input_boxes'>
<div class='knigulper2_element'>
<input class='knigulper2_textinput' id='name' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Name&apos;}' onfocus='javascript:if(this.value==&apos;Name&apos;) {this.value=&apos;&apos;;}' type='text' value='Name'/>
</div>
<div class='knigulper2_element'>
<input class='knigulper2_textinput' id='email' name='from' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Email Address&apos;}' onfocus='javascript:if(this.value==&apos;Email Address&apos;) {this.value=&apos;&apos;;}' type='text' value='Email Address'/>
</div>
<div class='knigulper2_submit'>
<input class='knigulpersub2_button' name='Submit' type='submit' value='Yes! Subscribe Now'/>
</div>
<div class='powered_by_knigulper2'>
<p>Powered by <a href='/' target='_blank'>Knigulper</a>
</p></div></div>
</form>
</div> <!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Ends -->
</b:if>

Horizontal Email Subscription-Style No. 4

below every post email subscribe widget for blogger blogspot

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*======= Horizantal Subscription Widget by www.knigulper.com =======*/
.f2{background-color:#f7f7f7;margin-top:8px;padding:2px;overflow:hidden;box-shadow: 0 0 10px 5px rgb(226, 215, 215);-moz-box-shadow: 0 0 10px 5px rgb(226, 215, 215); -webkit-box-shadow: 0 0 10px 5px rgb(226, 215, 215); -o-box-shadow: 0 0 10px 5px rgb(226, 215, 215);margin-bottom:8px;margin-left:8px;width:auto;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{height: 38px!important; border: none; padding: 5px; margin-bottom: 5px;margin-left:41px!important; background: #fff; text-align: left;font-family: Georgia, Helvetica, sans-serif;font-size:14px;font-weight:400;width:90%;border:1px solid #dbcece;}
.follow-by-email-address{padding-left:39px!important;}
#icon{background-image: url(https://4.bp.blogspot.com/-dTUJlqMjKQU/WSh3JXtzExI/AAAAAAAACaI/9Ob9PLUnUe04qnL-4Y0o_GOnGDJCEOiaACLcB/s1600/icon.png);
background-position: 6px;
background-repeat: no-repeat;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{font-family: rubik; height: 50px!important; width: 87%; margin-left: 0px; background: #BDB76B; font-weight: 700; text-transform: uppercase; padding: 17px 40px;color:#fff;border:1px solid #dbcece;}
.follow-by-email-inner p {font-family: 'Oswald', sans-serif;font-size:13px;font-weight:500;text-align:center; margin-bottom: 10px;color:#bcc4ca;}
.FollowByEmail h2 {color:#827459;font-family: 'Metamorphous', cursive;font-size:16px;font-weight:800;margin-top:4px!important;text-align:center;text-transform:uppercase;}
.FollowByEmail h3 {color:#000;font-family: 'Open Sans', sans-serif;font-size:13px;font-weight:normal;margin-top:8px;text-align:center;text-transform:none;}
.followbytext{font-size:15px;color:white;text-align:center;font-family: 'Oswald', sans-serif;font-weight:700}
</style>
<!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com Begin -->
<div class='f2'>
<div class='subscribe-box section' id='footer-subscribe'><div class='widget FollowByEmail' data-version='1' id='FollowByEmail1'>
<h2 class='title'>subscribe to our newsletter</h2>
<ul style='-moz-background-inline-policy: continuous; background: none repeat scroll right top; padding: 1px;background-color:#f7f7f7;color:#212121;font-size:13px;'>
<marquee direction='left' scrollamount='3' width='90%'>Get Top Insights About Blogging, SEO, Social Media Marketing &amp; Leading Template Designing Trends For Free</marquee></ul>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=knigulper&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' id='icon' name='email' placeholder='Your Email Address...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Subscribe Now'/>
</td>
</tr>
</table>
<input name='uri' type='hidden' value='knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
</div>
</div></div>
<!-- HTML5 Horizontal Email Subscription Widget BY www.knigulper.com end -->
</b:if>
Having trouble installing this widget? Post your valuable comments and let us know.

Discover How to Gain Your Blog Traffic By 209%

Get Free Access

Recommended For You

6 comments:

  1. brother i am used 1 wedget but where add in my blogger feed

    ReplyDelete
    Replies

    1. Replace blue text with your blogger feed.

      Delete

  2. brother its not mobile friendly how to make mobile firendly

    ReplyDelete

  3. Download new source code from HERE ... If you need further help, pls don't hasitate.

    ReplyDelete

  4. Brother not working in mobile not mobile firendly
    You can check my blog
    www.blognetbook.com

    ReplyDelete
    Replies

    1. Replace <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> with <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

      Delete