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.

Widget Looks Like this

subscribe now widget

 

Click to see it live

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(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);}
</style>

<div id=”sidebar-subscribe-box”>
<div class=”sidebar-subscribe-box-wrapper”>
<br/>
<a class=”social-icons” target=”blank” href=”https://www.facebook.com/BestBloggersCafe“><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/onlineustaad“><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/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/BestBloggerCafe“><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=BestBloggersCafe‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”><input name=”uri” type=”hidden” value=”BestBloggersCafe” />
<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 Blue color BestBloggerCafe to your Facebook Page name
  • Change the Green Color OnlineUstaad to your twitter user name
  • Change The Orange color Google+ link to your own
  • Change all three Red Color BestBloggerCafe 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.

About Abdul Wali

Abdul Wali is a Web Developer, SEO Consultant and Online Instructor working online for last 6 years on the internet and managing several successful websites. You can contact him via Email or follow him on Facebook. Also add him on .

Check Also

blogger blog spamming

My Blogger Blog is marked as spam? what should I do?

There might be people who have faced an embarrassing experience when their blog was suddenly …

  • Can you Please Upload More Coding Like This
    Also Please Upload Auto Facebook Like Coding ..
    Thanks

  • Can you Please Upload More Coding Like This!!!

  • its not working on my blog please check it out.

  • I have put this widget but it’s not showing on my site. please tell me what can i do now??? Thanks!

  • ahsan

    Sorry sir it can’t work

  • I try it but not working fine. Pls check it.
    Thanks

  • Really awesome post sir keep it up !!!

  • Great Post Bro.Thanks For Sharing This Great Widget.

  • Thanks for sharing great Widget. Keep it up bro.

  • Dude whats the point of giving code if copying is disabled?

  • trendyupdates

    how i can copy the content …

  • Rizwan Rizvi

    How to copy this code