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 & 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'http://feedburner.google.com/fb/a/mailverify?uri=bloggerhero1',
'popupwindow',
'scrollbars=yes,width=550,height=520');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 ==
"") {this.value = "Enter your email...";}' onfocus='if
undefinedthis.value == "Enter your email...") {this.value = ""}'
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.
where is the link for part 2?
ReplyDeleteit's not working
ReplyDelete