HackingUniversity like Responsive Email Subcription widget for blogger

Hello friends! Today I will tell you how to add a responsive email subscription widget to your blogger blog which is used by HackingUniversity.Subscription widget is one of the most and important widget for all blogs.They makes the readers to stay with your blog post without visiting your site through mails.This Social subscription widget is made with the aim of promoting and increasing traffic of your blog in various manners. As this widget is responsive in nature,It has the potential to boost your subscribers. Your readers will also get an opportunity to connect with you blog with feedburner.Get ready to see the amazing beauty in action which will nurture your blog . Lets see the Demo

hackinguniversity like responsive subscription widget

How to Add this Widget to Blogger ?

Adding this widget to blogger is very simple just follow these steps:
  • Go to your Blogger Dashboard
  • Then Go To Layouts----> Add A Widget-----> Html Javascript
  • Just paste these Codes in your respective gadget box.
<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIBgPaht6YVxXEPg2ZiKBTahVUbIurByuvN5AMQsVQYc4Z_vhDxA4m3NYXIOUu2Aoygb4c7ZxW6H7VHZaZCArDhzlx_8v0t396PopxSxwVvOehJP54GDaCA8WQB4ROS9aovfPdC7Aquvpw/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/AVvXsEjs9-ZKgfQOfQlnsy6ptF5juQfDv0uUluw9thhAm937VVJaxcc0Lcqq5K1Qlhf9kHCOZBtijRlTmA8tR78do_vLvYq4teWeobbvt9tAwKI8RQfZgsH229W90lguNElK_dL9FNWqZ2JFhYZb/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/AVvXsEgguZS5psTyrlZ1rx_s_JYzaojrzY1yTRAtHATubz2FkV5Zoh3aU_dIyAJ12qbttMkn_tJxxVyweFUC48TxGT6rkhg8Wq_PjG3df-R1AGfs5iGZmb-6gY3hPpXa7JxMrIHJ_ZKWOosZ8-DG/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/AVvXsEgQCXC_XUuwYhr0fG5jJ1b-sg4hPjF_AGzZ8ab2rBgxquBR87P-Gl0DcTlIybeDIGD_L6W3AN9eTfy6x3sJHwuYCp2xsQ6wm_pYV7U284Dqq3U8QxIOFKa05HUmkrudoReBM0pKuTHvO3Ro/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=truebloggertricks" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="truebloggertricks" /><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>

  • In above Codes,Replace truebloggertricks with your feedburner username.
  • It all folks! Enjoy this beautiful widget in your blog.Happy Blogging!!!

4 comments:

  1. I LIKE YOUR SITE VERY MUCH!!!

    ReplyDelete
  2. Dear sanker, i really like your blog and tutorials. They are very helpful and easy to implement. And i like the way you show Codes on your blog. How can i do it?
    Will you teach me? Waiting for your answer.

    ReplyDelete

Please don't spam. We hate spammers