Stylish Wordpress Style Email Subscribe Widget for Blogger

Posted By: Unknown - 21:04

Share

& Comment

I love this subscribe widget. This is why i am sharing this widget with you.



If you want to add this widget to your blog just follow this simple steps


1. Log in to Blogger
2. Go to Layout > Click on Add a Gadget
3. Choose HTML/Javascript
4. Add the below code inside the box.



<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsV1hsAOyA1MEyUYWLsjoUFTqb6GY2hyphenhyphentdHR58YlL6Td5rPMce_YB5d4uTFVINJOSIEWbnO2JLNa0HKgMeuc5PiyPAG5RfyinIgmQJlWC-jKmPswKUKjWMycamHaCYKB7LkCvmmGswjf5/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2PUpaIZKf4oeR7ASjLlrNrcL7in7o2yCweW39yiKAhs1ZMKpnFFKtyF8paKE5WmcTm5PSWECQwdRbIIeCrGO1ePYGrCWMl4owdX91WwXgAooSt0UqxFC6o2o4855CW-QI-fet4f_tr2Y/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjH2OS_e5eEASBX__FJ8Jl1DnhSXFnFcAsDsDdRY4wvzqw_FZCjSFl6QftjM22vjvx6tDtrqHcNGTT4BxamRpHGsQqn4RPB1upsimzPviRLiIA_rqof9O7Ltx3uTWU9Yz8MRi6n38XbsmR/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXkzN30sFTYsm-FSdewv_8ERs4zkj8Puz9Z-X7KrQWrWHoPFUiQawmAb9Fxy3s65J27GVVt-Cgw7Xn6wEX7hvWspgzZCyy0aYXDZXh2gKhhin0KlXWC2fCmFN9kC-tOsyfNiMlH9vujhE/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=zgamerx" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=zgamerx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="zgamerx" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>


 5. Now Replace zgamerx with your FeedBurner Username.
6.Now Save the Widget.

That's all


Have any problems, please comment.

 

About Unknown

Techism is an online Publication that complies Bizarre, Odd, Strange, Out of box facts about the stuff going around in the world which you may find hard to believe and understand. The Main Purpose of this site is to bring reality with a taste of entertainment

4 comments:

  1. Thanks for your post, this tutorial very usefull.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thank you a bunch for sharing this with all of us you actually realize what you are talking about! Bookmarked. Please also seek advice from my site =). We could have a hyperlink change contract between us! founder email

    ReplyDelete

Copyright © 2013 Cyber Geeko™ is a registered trademark.

Designed by Templateism. Built with Blogger Templates.