A great way to keep up to date with a blog that you love to follow is to subscribe to an email subscription of their posts. That way, when a new post is made, it lands right in your email inbox. If you want to offer this to people who visit your blog, Then follow this post.
Today we have a nice looking and simple feedburner email subscribe form using some latest web tech, which would surely increase your email subscriptions ratio. Follow the steps below to get this email subscription form installed.
Install This Widget In Blogger
Installation is simple. Add HTML/Javascript gadget into your blog, and paste the following code and save-<style type="text/css">
*{margin:0;padding:0}
.subscribe {
margin: 0 auto;
padding: 20px;
width: 300px;
background: #fcfcfc;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-family: Verdana;
font-size: 14px;
}
.subscribe-pitch {
padding-left: 100px;
background: url(data:image/png;base64,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) 0 center no-repeat;
}
.subscribe-pitch > h3 {
margin: 0 0 5px;
font-size: 22px;
font-weight: bold;
color: green;
text-transform: uppercase;
}
.subscribe-pitch > p {
line-height: 20px;
color: #111;
}
.subscribe-form {
position: relative;
margin: 20px -20px -20px;
padding: 15px;
background: #fafafa;
border-top: 1px solid #ccc;
border-radius: 0 0 6px 6px;
background-image: -webkit-linear-gradient(top, #fafafa 0%, #eaeaea 50%, #e1e1e1 51%, #f2f2f2 100%);
background-image: -moz-linear-gradient(top, #fafafa 0%, #eaeaea 50%, #e1e1e1 51%, #f2f2f2 100%);
background-image: -o-linear-gradient(top, #fafafa 0%, #eaeaea 50%, #e1e1e1 51%, #f2f2f2 100%);
background-image: linear-gradient(to bottom, #fafafa 0%, #eaeaea 50%, #e1e1e1 51%, #f2f2f2 100%);
-webkit-box-shadow: inset 0 1px white;
box-shadow: inset 0 1px white;
}
.subscribe-input {
font-family: Verdana;
font-size: 15px;
color: #444;
padding: 0 16px;
width: 67%;
height: 35px;
background: #fefefe;
background-clip: padding-box;
border: 1px solid;
border-color: #999 #aaa #aaa;
border-radius: 20px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
}
.subscribe-input:focus {
outline: 0;
}
.subscribe-submit {
display: block;
position: absolute;
top: 15px;
right: 15px;
padding-left: 15px;
height: 35px;
width: 60px;
background: #60e160;
border: 1px solid;
border-color: #4c9d50 #4c9d50 #4c9d50 #55af5a;
border-radius: 20px;
cursor: pointer;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-image: -webkit-linear-gradient(top, #84f087, #4cd94a);
background-image: -moz-linear-gradient(top, #84f087, #4cd94a);
background-image: -o-linear-gradient(top, #84f087, #4cd94a);
background-image: linear-gradient(to bottom, #84f087, #4cd94a);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
}
.subscribe-submit:active {
background: #4cdf4d;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.subscribe-submit:before {
content: '';
display: block;
margin-top: 1px;
width: 25px;
height: 19px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAATCAMAAABSrFY3AAAA1VBMVEX///+x/7Wz+7MVbhcYbRWL7YoZbhUYbRS0+rSx/7QnnSWu/7KR7pCO7o6R75AYbRS1+rUWbRaw/7AXbRYXbhYXbBcXbhYZaxaF6YUXbRcWbRWS75KV8JSz+7OC6ICW8ZeI64eW8ZcYbRiZ85qb85qw+bCW8Jef9J+x+LGy/LOK7Iqz/LOy97IsxCgjmx8vxSshmB8inSAyxy6z/rMxxi0joCEhmR8osCQ2yjU3yTM6yzYrwCdK00hS1VEfkB4joSElrSQruyYhkh40yDAglR4glB8zyDIjXVruAAAALXRSTlMASDyEk/t7fjNO9EL2+Ph1MIpU8+RmmXLwvcP28znx8PvubO3rKvXnJ8P5tCGHDR5zAAAAsklEQVR4Xm3N5bKDQAyA0QDFa9Td/d7F6u59/0fqNKnCfv8yJ5kAr2wmD9xau+NV4UHixBhzVQ5c2CMjBAqBUwuC5BI0UkGwCWQd79PvbxbBRBbofj2TCCIeQQxBfazZFsIUwY+buGfg5EUAck+IioAVHKRpsbRHOJefALo8QTrMEW6VKrwSRkjUsq4REMWQEJpJ+M6M+wSLNsEnMYq06nQhmNjbMLbtDyCcNhyP//5/4A7jLiAtlbXGKAAAAABJRU5ErkJggg==);
}
.lt-ie9 .subscribe-input {
line-height: 33px;
}
</style>
<section class="subscribe">
<div class="subscribe-pitch">
<h3>Subscribe</h3>
<p>Subscribe to our newsletter to get the latest from us.<p>
</p></p></div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=abushalehfeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="subscribe-form">
<input type="hidden" value="abushalehfeed" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == "") {this.value = "Your email address";}" onfocus="if (this.value == "Your email address") {this.value = ""}" value="Your email address" name="email" class="subscribe-input" />
<button type="submit" class="subscribe-submit" value="SignUp" title='' />
</button></form>
</section>
Change Red Texts with your feedburner feed name and as always, you can also modify the CSS as your taste. This widget created by me and you can reshare this widget with a link back to us. And Let me know your Feedback :)
A cool one :D
ReplyDeleteNice design.
ReplyDeleteThanks Bro :)
Delete