• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

Floating Email Subscription Widget for Blogger

 Rohitkumar  04:38  2 comments
Tweet
Floating Email Subscription Widget for Blogger
Having a Floating Email Subscription Widget on your blogger blog makes your blog professional and it also helps to attract blog readers or users due this more users or blog readers will subscribe your blog via feedburner email subscription.
I have posted several Email Subscription Box couple of weeks ago, you can also check them.
I always love CSS Gadgets, that's why I have today I'm going to explain "Floating CSS Email Subscription Widget for Blogger" If you like CSS Blogger Widgets then you are Welcome at BloggerHero.

Well, You can see I've already added this widget at the right sidebar of my blog. you can see that its floating [actually its sticky i.e. fixed at a position]

for your kind information, I've worked for Hours to design this widget so please after adding this widget don't remove attribution link from it. I request you because you don't know how much time such widgets take. [I have added an Encoded BloggerHero Attribution Link to this  widget, If you remove the link, the widget will not work, so don't try, this will not affect your blog]

Whats Special About This Widget ?

1. Floating. [Fixed Position where you want.]
2. CSS Subscribe Now ! Button [With Hover Effect]
3. Doesn't affect blog loading time.
4. Blog Template Friendly.
5. Attracts visitors as it has eye catching features and look.
6. Premium Style.
7. CSS Custom Design.

This widget is created and developed by Me and I hope you all will love this widget. The special thing is that you can also keep this widget floating or situated at one position on  your blog sidebar.


I have divided this tutorial in 2 Parts :

Part 1. Installing this widget on your blog.
Part 2. Making it floating or sticky.

Its really easy to install this widget, it might take just couple of minutes. So you must try this widget for your blogger blog. (Backup Your Blogger Template)

Lets see how to install this widget on your blog, Just follow these simple steps :
1. Go to Blogger > Layout > Add Gadget.
2. Select "HTML/Java Script" widget.
3. Copy and paste the following code in it and hit save
<p style="border:1px solid #ccc;padding:3px;background-color:#f6f6f6; color:#000; font-weight:normal; font-family: 'Bree Serif',serif; font-size: large;" class="title">JOIN OVER 1,000 USERS</p>
<p style="border:1px solid #ccc;padding:3px;background-color:#f6f6f6;">
Receive daily freebies, updates &amp; Special offers straight into your inbox. Get into our Mailing List.
Your email address is safe with Us!</p>
<span style="font-family: Times, Times New Roman, serif; font-size: 0px;"><a href="http://www.bloggerhero.com/" rel="dofollow" target="_blank"></a></span></div>
 <form style="border:1px solid #ccc;padding:3px;background-color:#f6f6f6;" action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' 
method='post' onsubmit='window.open
undefined&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloggerhero1&apos;, 
&apos;popupwindow&apos;, 
&apos;scrollbars=yes,width=550,height=520&apos;);return true' 
target='popupwindow'>
  <input name='uri' type='hidden' value='bloggerhero1'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input id='subbox' name='email' onblur='if undefinedthis.value ==
&quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if 
undefinedthis.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 
type='text' value='Enter your email...'/>
  <input id='subbutton' title='' type='submit' value='Subscribe Now !'/>
 </form>
<div style="text-align: right;">
<span style="font-family: Times, Times New Roman, serif; font-size: 8px;"><a href="http://www.bloggerhero.com/" rel="dofollow" target="_blank">Get</a></span></div>
4. Now after saving the widget, go to your blog, and find the widget ID [How To Find Widget ID ? Get Here]
5. After finding the widget ID, 
    Go to Blogger > Dashboard > Template.Click "Edit HTML"
6. Find the code ]]></b:skin> now after finding it, copy paste the following code just above it.
/***** Email Subscription Widget by bloggerhero.com *****/
/***** Subscribe widget *****/
.sidebar #HTML6 {  background: #fff;  border: 0px #fff;  color: #666666; font-family: Georgia; font-size: 12px;  outline: 2px solid #fff;  padding: 20px 10px 30px;  text-align: center;  display: inline-block; }
.sidebar #HTML6 h5 {  font-size: 20px;  font-weight: normal;  margin-bottom: 15px;  text-align: center; text-transform: none; }

/***** Form CSS *****/
input, textarea, select {  padding: 14px 20px;  }
textarea {  min-height: 10px;  padding: 10px;  resize: both;  width: 100%;  }
select, option {  cursor: pointer;  padding: 5px 7px;  }
form {  max-width: 100%;  }
form input, form textarea {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  margin-top: 10px;  }
form input[type="text"] {   width: auto;  border: 1px solid #ccc;  -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FBFBFB;  -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FBFBFB;  box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FBFBFB;  }
form input[type="text"]:focus {  outline: 0;  border-color: #aaa;  -moz-box-shadow: 0 1px 1px #bbb inset;  -webkit-box-shadow: 0 1px 1px #bbb inset;  box-shadow: 0 1px 1px #bbb inset;  }
form input[type="text"]::-webkit-input-placeholder, form input[type="text"]:-moz-placeholder, form input[type="text"]:-ms-input-placeholder {  color: #999; font-family: Georgia; font-weight: normal;  }
form input[type="submit"] {  width: auto;  }

/***** Button CSS *****/
input[type="submit"], button, .button,  .comments .continue a, .comments .comment .comment-actions a, .comments .comments-content .loadmore a {   border: 1px solid rgbaundefined0, 0, 0, .2); color: #fff; display: inline-block;  text-decoration: none; text-shadow: 1px 1px 1px rgbaundefined0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgbaundefined255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgbaundefined255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgbaundefined255, 255, 255, .3);  background: #D56540; background: linear-gradientundefinedtop, #D56540 0%, #cc6633 100%); background: -moz-linear-gradientundefinedtop, #D56540 0%, #cc6633 100%); background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#D56540), color-stopundefined100%,#cc6633)); background: -webkit-linear-gradientundefinedtop, #D56540 0%,#cc6633 100%);  cursor: pointer;  }
input[type="submit"]:hover, button:hover, .button:hover,  .comments .continue a:hover, .comments .comment .comment-actions a:hover, .comments .comments-content .loadmore a:hover {  background: #E1704B;  color: #fff;  text-decoration: none;  }
input.small[type="submit"], button.small, .button.small,  .comments .continue a, .comments .comment .comment-actions a { font-family: Georgia; font-size: 12px; line-height: normal;  padding: 5px 10px;  }
input.medium[type="submit"], button.medium, .button.medium, .comments .comments-content .loadmore a { font-family: Georgia;  font-size: 15px;  line-height: normal;  padding: 10px 20px;  }
input.large[type="submit"], button.large, .button.large { font-family: Georgia;  font-size: 20px;  line-height: normal;  padding: 12px 24px;  }
7.  Remeber my blog's Widget ID is "HTML6" your blog's will be different you can easily find widget Id key by Template HTML Editior.
8. Replace "HTML6" with "HTMLx" where x = your blog's ID . 
That's It ! Hit save Template, go to your blog and check it, it will not be floating but it will be looking awesome :-) 
And If you removed the attribution link which does not appear in this widget, then your widget will not work.

Don't Forget to Share This Post with Your Friends and Also you can Subscribe Us via Email to receive latest Blogger Tricks, Want to Link with Us? Add Our badge.
If you have any problem regarding this post, you can ask it via comment or feel free to contact with me, also a little "Thanks'' is appreciable.

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, css, responsive, subscription box, widget
Subscribe Now

Get Latest Posts Directly Into You Inbox

 2 comments :

  1. Unknown3 November 2013 at 05:28

    where is the link for part 2?

    ReplyDelete
    Replies
      Reply
  2. Unknown3 May 2015 at 04:59

    it's not working

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!

Popular Posts

  • MaterialMix : A Free Material Design Blogger Template
  • How to add Custom Fonts in Blogger or Any Website
  • How to use full ISP bandwidth to speed up downloading
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!