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
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/AVvXsEhnq3gnod4_i1t0uWPcrXrRii7dZHP1N7HwhCtiWPaGbfXf8LxNGRxkqYs2iRPe_GBCmYb-osXaBD6b498jzDP3Y6ZOWtOdds8-6xe2gEmNCPxwel1g1nmN3vHyliCJWfppanGsvSNXAgo/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/AVvXsEhutybaBq0LB06nKesnS3wxNDSLwD2j2_gM5uwDkRAf51Uc-eXYyYPlR-tDgPgWWoEMe1nsZUoZopLfPIsd6Ij1qbt2HYSggP10GRstFamOmV-2r6HSUh1hnMeD9KhpyvGPWbWMwM8Yz_Q/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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN-_iG4TJCLfiTvP9r6ICzoB9Ted5P2_EuiM1HRB1Kq2yv_eZRr2g-Gceb4CPlsmzL40-51ssMEbAy9LzRG7wZfH8fOA8LEkt5h-NG9Gn2pnnzhc-uEoO86mXTVcWPFLKy0agAINF7gBAB/s1600/Bloggertrix-facebook.png” /></a>
<a class=”social-icons” target=”blank” href=”https://twitter.com/onlineustaad“><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4NvhdQJSc3CJg8YZohUUPiZNB4fsNJO7ImOldOkNgrguncKSUvoq8DyJH_mDSCZAaXbgRrz0VQcYGZUlRc9UG_TryYBg88Enwbs30-q3RPCp6LFmPngcjWGsv-mx9eLjhgmoAmwPMYex/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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiBc8zLgw0HjzfgPGZadjCKeE_8O9Au_0tbSe5vH0LW-V89IhBo9keGxzj3C9zBYHJTbBTMVptPR2C715do3chnqYjp_rjISE0foWv6aTirnOo-oW5XBv7BXCQfjGYF1LT8qawuNf-friW/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.
Posted at 13:40 | by
Afaq Ahmad
Saturday, January 25, 2014 
Yousaf Ali 
