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
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!!!
Nice
ReplyDeleteI LIKE YOUR SITE VERY MUCH!!!
ReplyDeleteDear 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?
ReplyDeleteWill you teach me? Waiting for your answer.
thanks
ReplyDelete