Tuesday 12 February 2013
Add Stylish Email Subscription Box with Social Media
Add Social Media & Email Subscription Box For Blogger
Adding Stylish Email Subscription Box with Social Media widget can increase your readers and subscribers and it allows to get latest updates from your blog or websites directly to their inbox.The widget I'm sharing today is for both WordPress and Blogger. It suits for WordPress blogs as well as Blogger blogs.This widget include Social Media such as RSS feed burner, Twitter, Facebook and Google Plus.
Using this widget you will get double benefits if you add your social profiles along with the form.As you know for a new blog, social media counts and email subscribers are the important things in order to get attention from the advertisers and from the search engines.
How to add the widget into blogger?
Step 1: Go To Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Widget
Step 2: Copy below code and paste it inside that widget
<style>
.oubar{width: 100%; float: left;}
.oubar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.oubar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.oubar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.oubar .subicons a{text-decoration: none; color:#333333;}
.oubar .subicons a:hover{text-decoration: underline; color:#333333;}
.oubar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4CkzASDid7wfj5yRG8VQvyvcRpOIrJ1W2cc6LspZtA_M-WoqQLQFTkeGFVy3ew0klZbyXcpFQciYgVsOFFcSETXMgXTcJcfX2gO5dv1Yw4Qp9jijM2aQ_Q03qcE2UBnvPLRZ9CdbEX4/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoX6ATJ98PBl5eBEZHv-lrfzVcsw3CQ9tdTg7DZiM6bLMWNhVjtL6PoG3CSYqwaxoeUAitGtKPoNoiMYOMb5C-cP4RnWSQVCk14E2Q5fjowLgzWLKPIBM_6hfhaAHzO__ehCWCw8N4rw/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .picon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwJCHtRGk8S98Umdf5ytmufvkXJWKgVFzOv2bN_aYWk99wx_mhm_l25MiW44bWWMK-DKI9Yphu-YhDzL7-amohNhNTozo4PM1E_LvwUeZfAWZAzcugmWX-g6FjR7k2Zh3VGJ0qQJnr7ME/s1600/pinterest.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .gicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMNcTiK_RplsG82MF4Yr6-5bZGyKY6vT4R3GFl4qEAjrCUF3YnEWutCKUIPzEew-sYpPDg-3zaGbn42hgU-JlLyylw1zK80dCGtBUsz_x74eE3ZaADq4NGkh4iYNh1-iEVTzBb4AtZdk/s1600/google-plus.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHA5xgz3BjvxHtsH17rGYcevp_i1MfAM434gB2WIazsK_vFx6ZjmBkwF7wmR4IfjNnkt-XmcnXPEw5Eu7mTqszNteyr-8F04b4PjBs1wytm8y8WFcDg7PHOQNz_KoJwHeim13noX9LTwM/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.oubar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7cWMFlZBXH0qAbMmhsN_bydbY_5qZkxL0eHad9W5rRdpDxL66BsQ9RNZCDXJ3HNf-ghZWPUsRy-WNQAcOhJgIYvnCJdlWUSjeD7s34_QhvYgRCIbIc4hvPllOnZKItftirRjGMzb9ds/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.oubar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.oubar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.oubar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.oubar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.oubar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="oubar"><div class="count">Join <span class="bigcount">100+</span> People Following BBC</div>
<div class="subicons"><div class="gicon"><a href="https://plus.google.com/u/0/108628318516871549001" target="_blank">Google+</a></div><div class="picon"><a rel="nofollow" href="http://pinterest.com/abdulwali/" target="_blank">Pinterest</a></div></div>
<div class="subicons"><div class="rssicon"><a href="http://www.bestbloggercafe.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/BestBloggersCafe" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/onlineustaad" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="BestBloggersCafe" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form>
</div></div></div>
.oubar{width: 100%; float: left;}
.oubar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.oubar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.oubar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.oubar .subicons a{text-decoration: none; color:#333333;}
.oubar .subicons a:hover{text-decoration: underline; color:#333333;}
.oubar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4CkzASDid7wfj5yRG8VQvyvcRpOIrJ1W2cc6LspZtA_M-WoqQLQFTkeGFVy3ew0klZbyXcpFQciYgVsOFFcSETXMgXTcJcfX2gO5dv1Yw4Qp9jijM2aQ_Q03qcE2UBnvPLRZ9CdbEX4/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoX6ATJ98PBl5eBEZHv-lrfzVcsw3CQ9tdTg7DZiM6bLMWNhVjtL6PoG3CSYqwaxoeUAitGtKPoNoiMYOMb5C-cP4RnWSQVCk14E2Q5fjowLgzWLKPIBM_6hfhaAHzO__ehCWCw8N4rw/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .picon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwJCHtRGk8S98Umdf5ytmufvkXJWKgVFzOv2bN_aYWk99wx_mhm_l25MiW44bWWMK-DKI9Yphu-YhDzL7-amohNhNTozo4PM1E_LvwUeZfAWZAzcugmWX-g6FjR7k2Zh3VGJ0qQJnr7ME/s1600/pinterest.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .gicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMNcTiK_RplsG82MF4Yr6-5bZGyKY6vT4R3GFl4qEAjrCUF3YnEWutCKUIPzEew-sYpPDg-3zaGbn42hgU-JlLyylw1zK80dCGtBUsz_x74eE3ZaADq4NGkh4iYNh1-iEVTzBb4AtZdk/s1600/google-plus.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHA5xgz3BjvxHtsH17rGYcevp_i1MfAM434gB2WIazsK_vFx6ZjmBkwF7wmR4IfjNnkt-XmcnXPEw5Eu7mTqszNteyr-8F04b4PjBs1wytm8y8WFcDg7PHOQNz_KoJwHeim13noX9LTwM/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.oubar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7cWMFlZBXH0qAbMmhsN_bydbY_5qZkxL0eHad9W5rRdpDxL66BsQ9RNZCDXJ3HNf-ghZWPUsRy-WNQAcOhJgIYvnCJdlWUSjeD7s34_QhvYgRCIbIc4hvPllOnZKItftirRjGMzb9ds/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.oubar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.oubar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.oubar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.oubar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.oubar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="oubar"><div class="count">Join <span class="bigcount">100+</span> People Following BBC</div>
<div class="subicons"><div class="gicon"><a href="https://plus.google.com/u/0/108628318516871549001" target="_blank">Google+</a></div><div class="picon"><a rel="nofollow" href="http://pinterest.com/abdulwali/" target="_blank">Pinterest</a></div></div>
<div class="subicons"><div class="rssicon"><a href="http://www.bestbloggercafe.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/BestBloggersCafe" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/onlineustaad" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="BestBloggersCafe" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form>
</div></div></div>
And Save The Widget
Now here are some important customization you must make. I will point you to the necessary changes:
1.The first orange color text is the text, which you can replace to your own blog's text. I mean how many subscribers and followers you have write them there.
2.http://pinterest.com/yourname this link belongs to my pinterest profile, so just go to your pinterest profile and copy the link from the browser address bar and replace that with this.
3.www.bestbloggercafe.com replace this green color address with your blog.
4.http://www.facebook.com/BestBloggersCafe replace this with your Facebook page URL.
5.http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafethis should be replaced with your feeds URL. Just go to Feedburner.com and get your feeds address. Or in Blogger simply add a widget called "follow by email" that will create the address automatically for you.
6.http://twitter.com/onlineustaad this is the URL of Twitter, replace it with yours.
7.BestBloggersCafe this will be only replaced with your feeds address name which comes at last of your feeds' address.
SHARE THIS POST
Subscribe to:
Post Comments (Atom)
0 comments: