Professional Social Subscriber Widget For Blogger

subscribe-now-widgetAt blogger.com. People always attempt to decorate their blog with superbly produced widgets by different custom designers. and therefore blogger may be easily personalized and stylized. but I would suggest you to maintain your blog as easy as possible but beautiful too.Because design matters a great deal when it comes to site visitors and cash. you have to give some crucial time for you to your site design. As well as make certain to include some professional and necessary icons for example popular publish widget, Facebook like box wordpress plugin and subscribe now widget. So within this tutorial i have a great looking SUBSCRIBE NOW widget for you personally which you’ll easily supplment your blogger blogs. It’s an awesome widget.

Widget Look Like This

subscribe-now-widget

 

This widget is produced by simple using CSS3 qualities and will also be loaded faster on any browser. this subscribe now widget is going to be getting some feature like Facebook follow button, email subscription box, twitter follow link & Google  follow link, however the important factor within this widget may be the design. which means this design is undoubtedly an excellent & attractive design. Now let us add this awesome widget for your blog.

How to add subscribe now widget in Blogger?

Adding this widget for your blog is one thing really quite simple factor, just follow couple of given steps below to be able to rapidly add this widget for your blog:

  1. Go to blogger >> Layout
  2. Add a Gadget >> Add an HTML / JaveScript widget
  3. Now just copy all below code and paste it inside HTML/JaveScript Widget

[row class=”row-fluid”]
[col class=”span12″]<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/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(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/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);}

 

<div id=”sidebar-subscribe-box”>
<div class=”sidebar-subscribe-box-wrapper”>
<br/>
<a class=”social-icons” target=”blank”

href=”https://www.facebook.com/Websteach“><img src=”http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png” /></a>
<a class=”social-icons” target=”blank” href=”https://twitter.com/Lovelyszr“><img src=”http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png” /></a>
<a class=”social-icons” target=”blank” href=”https://plus.google.com/u/0/102082442131993888248/“><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/websteach“><img src=”http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/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=BestBloggersCafe” class=”sidebar-subscribe-box-form” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=websteach‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true” target=”popupwindow”><input name=”uri” type=”hidden” value=”websteach” />
<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>
</style>[/col]
[/row]

 

Now 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 Blue color Websteach to your facebook page name.
  • Change  the Green color Lovelyszr to your twitter user name.
  • Change the Orange color Google + link to your own.
  • Change all the three Red color Websteach to your feedburner name.

That’s all, save your widget and enjoy the great widget on your blog.

 

If you face any problem while adding this Widget to your blog then kindly leave your Comment below the post along with the problem you get. So i can help you further. Take Care.

One Reply to “Professional Social Subscriber Widget For Blogger”

Leave a Reply

Your email address will not be published. Required fields are marked *