Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!



Awesome Feedburner Subscription Box With Effects!

Nitishk Gupta 10/13/2015 2 Comments
Options
Post Font

Arial
Oswald
Roboto (Default)
No Disturb Mode
subscription-box

As you know that i have started a series called Basic Widgets Series therefore this is the second widget which you must have in your blog and the first one was Social Icons Plugin .
We all know that blogger also provides a simple Feedburner subscription box but it is not so good in look therefore this widget will be best for you as it is beautiful as well as responsive also.
So let's talk about this widget-



                            BASIC WIDGETS SERIES -

So Lets Discuss Some Features Of This Widget-

  • Awesome Looking
  • Responsive
  • Beautiful Effects
  • Beautiful Input Box
  • And More...
After discussing all these features of this widget you must be anticipated to add this widget so let's start adding this widget-

Adding Subscription Box In Blogger-

1- Go To Blogger
2- Go To Layout
3- Select An Appropriate Place For Widget
4- Click Add A Gadget
5- Select HTML/JAVA SCRIPT
6-Paste This Magical Code With Customization's -

<!--MBA Subscribe Box-->
<style>
.mbabox {background:#E4DEDE;padding:20px;box-shadow:1px 1px 4px 1px black;text-align:center;color:black;}
.mbaboxinput {border:2px solid black;padding:6px;width:98%;text-align:center;height:35px;font-weight:bold;}
.mbaboxinput:hover {border:2px solid #007abe;}
.mbaboxinput:focus {border:2px solid #007aebe;background:#007abe;color:white; }
.mbaboxsubmit {display:block;width:100%;text-align:center;padding:8px;background:#007abe;color:white;font-family:sans-serif;border:none;font-size:18px;}
.mbaboxsubmit:hover {background:#008abe;}
.mbaboxtext {font-size:25px;font-family:jokerman;}
.mbaboxsmalltext {font-size:20px;font-family:sans-serif;}
</style>
<div class='mbabox'>
<font class='mbaboxtext'>Subscribe US!</font><br><br>
<font class='mbaboxsmalltext'>Subscribe Us To Receive Regular Updates! To Subscribe Just Enter Your Email Address And Hit Subscribe!</font><br><br>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggingArena&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow"><input class="mbaboxinput" name="email" placeholder="Your Email Address" type="text" />
<br><br><input class="mbaboxsubmit" type="submit" value="Subscribe!" /><input name="uri" type="hidden" value="MyBloggingArena" /> <input name="loc" type="hidden" value="en_US" /></form>
</div>
<!--Ends-->

Customization's -

Replace Red Text with your attractive introduction and MyBloggingArena with your feedburner name which  you can find in your feedburner account.

7- Save The Widget And See This Awesome Widget In Your Blog!

Share Your Thoughts-

Hope you liked this widget and if not then let me know through comments and kindly share this post if you liked it and do subscribe us to receive regular updates. Happy Blogging :)





Skyrocket Your Blog Traffic!

Join our newletter to get guides which will help you boost your blog traffic for free!

Nitishk Gupta
Hi, I Am Nitishk Gupta, a blogger and web developer. I am an addicted blogger who wants to share each and everything I have learned so far in my 4 years journey. Feel free to send me friend request or follow me. Thanks!

2 comments:

  1. Good post and very effective. But I see there is no demo on your any post. Why? Please provide demo for your viewers.

    ReplyDelete
    Replies
    1. Thank You Very Much :)
      I'll Sure Add Demo Links Soon..

      Delete

Powered by Blogger.