Today i,m goin to tell you how to add Professional Social Subscribe Now
Widget For Blogger.At blogger.com, people always try to decorate their
blogs with beautifully created widgets by different custom designers.
And thus, blogger blogs can easily be customized and stylized. But I
would recommend you to keep your blog as simple as possible, but
beautiful too. Because design matters a lot in terms of visitors &
money. You need to give some crucial time to your blog design. And also
make sure to add some professional & necessary widgets such as
popular posts widget, Facebook like box plugin and subscribe now widget.
So in this tutorial I have a great looking SUBSCRIBE NOW widget for you
which you can easily add to your blogger blogs. It is an awesome
widget.
This widget is created by simply using CSS3 properties and will be loaded faster on any browser. This subscribe now widget will be having some features like Facebook follow button, email subscription box, Twitter follow link & Google+ follow link, but the important thing in this widget is the design. So this design is without doubt a great & attractive design. Now let’s add this widget to blogger.
How to add Subscribe now Widget in Blogger?
Adding this widget to your blog is something really really easy thing, just follow few given steps below in order to quickly add this widget to your blog:
- Go to blogger >> Layout
- Add a Gadget >> Add an HTML/JavaScript Widget
- Now just copy all below code and paste it inside HTML/JavaScript Widget
<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEKRtNvh6dfY6SVxB_3r8jRugSyAIkOYjoXKJiNwqbp8WByEUE2ld6a3OmKVVf4sYTb5oPcDBYqrzylz0Dmqvnn1LBZVDKzx9Sf0ftSm1BxXeeAvg8eUrweBBmXHlMdHlFN_vAbQ0F3g/s1600/background.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/AVvXsEj2pM1k0kb5j4VEL-PMD6Mt2M7Y8H1Pu_eb13Bx8XBtjcQnM1d18pluONran_-Yw7w7xMEth2JD01oTx3zJQfQcWe4BIOWQ42awMoGy2tNQpSVVOyNRPGHxVe5_sfQbQmbHNl_0oy3u8w/s1600/icons.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{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%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id=”sidebar-subscribe-box”>
<div class=”sidebar-subscribe-box-wrapper”>
<br/>
<a class=”social-icons” target=”blank” href=”https://www.facebook.com/widgetspy“><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpu0g52rG396kwHisSXwOyNQ1hxtDR6lGB9wp5Kw_sdFpq2Lf70Joi-hwmXYU-nyWpSzi8WIqvTwW0yhJye3p0AI0EgF6UtnXk3pfWOPqmqqDxnUttGU92r8tnMK9TmxKq0sx_X3asoyw/s1600/Bloggertrix-facebook.png” /></a>
<a class=”social-icons” target=”blank” href=”https://twitter.com/widgetspy“><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiypEJB6jzT9AqYZ9P-IbKKTGB0Wc0B5_iQ0vNko5uacqTdTHEA3BKd9_SjolIf-Ks1poDCngKA75kpbUoGKkIYUd1HbDamHZ4x3Fc0VGW3g4HbYUPrUD7tAHAUwcapQKnMbPe_LDbFLI/s1600/bloggertrix-twitter.png” /></a>
<a class=”social-icons” target=”blank” href=”https://plus.google.com/u/0/108628318516871549001“><img src=”http://3.bp.blogspot.com/–KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png” /></a>
<a target=”blank” class=”social-icons” href=”http://www.feedburner.com/widgetspy“><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGrQ-noL8oPFUOlTfSNJQ3dfntpD2dnsfpvBwssE-Dmyi_qkaB5U_iLJnEaVJ_ZgXW88YzAvaXtdExdLO6bGaWDhTeXBcwopOHVT_R5-Kbyq9lfxDhogKvcGLGqer3VId51Gw89-kUk8/s1600/Bloggertrix-Rss.png” /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class=”sidebar-subscribe-box-form”><form action=”http://feedburner.google.com/fb/a/mailverify?uri=widgetspy” class=”sidebar-subscribe-box-form” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=widgetspy‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”><input name=”uri” type=”hidden” value=”widgetspy” />
<input name=”loc” type=”hidden” value=”en_US” /><input class=”sidebar-subscribe-box-email-field” name=”email” autocomplete=”off” placeholder=”Enter your email address here”/>
<input class=”sidebar-subscribe-box-email-button” title=”” type=”submit” value=”Subscribe Now !” /></form>
</div></div></div>
Just save your widget and view your blog, keep the widget in the sidebar, because this widget is used in sidebar. View your blog to see the new widget.
Customization
Some general customization are required for making this widget work perfectly for you. Just change the links with yours for example:
- Change the orange color Widgetspy to your Facebook Page name
- Change the Green Color widgetspy to your twitter user name
- Change The Orange color Google+ link to your own
- Change all three orange Color widgetspy to your Feedburner name
OR 