HOW TO ADD PROFESSIONAL SUBSCRIPTION BOX WIDGET TO BLOGGER

Ok despite of many tutorials and many aritcle I have made, here, I came forward with the one the most and important gadget required to your blog. Adding a professional look subscripiton box widget to blogger. Yes! it is recommened for very blog. Adding subscription box widget to blog always gets you a benefit that would be surely helpful for the owner of the blog who is going to be a regular visitor to your blog.

 


Live Demo
I want you to check the demo link above to have a look how this is going to be. It seems you are going to have this surely on your blog. Right. Ok getting into the tutorial quite simple and I want you to support me on social media like facebook , and twitter , if this really helped you. I also included an like to facebook page helping is done by just click on in and +1 goolge icon.

 

stylish_subscription_widget_for_blogger

<center>
<div align=”center” id=”truebloggertricks-Subscribe-wrapper”>
<div id=”ig-subscription-optin” style=”border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#55AAEE’, endColorstr=’#003366′,GradientType=0 ); width: 276px;”>
<h3 id=”truebloggertricks-title-text” style=”color: white; font-size: 17px;”>
GET FREE EMAIL UPDATES</h3>
<div id=”truebloggertricks-sub-title-txt” style=”color: white; font-size: 14px;”>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=bloggerbulk‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”>
<input class=”name” id=”truebloggertricks_Subscriber_name” name=”name” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” type=”text” value=”Enter First Name” />

<input class=”email” id=”truebloggertricks_Subscriber_email” name=”from” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” style=”width: 130px;” type=”text” value=”Enter Email Address” />

<input name=”uri” type=”hidden” value=”bloggerbulk” /><input name=”loc” type=”hidden” value=”en_US” /> <input id=”truebloggertricks_Submit_Text” style=”height: auto; padding: 5px 0;” type=”submit” value=”Get Access Today!” /></form>
</div>
</div>
</div></center>
<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, “Times New Roman”, serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, “Times New Roman”, serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, “Times New Roman”, serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type=”text”] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, “Times New Roman”, serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, “Times New Roman”, serif;
border: none;padding: 0px !important;float: none;}input:haover[type=”submit”] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type=”submit”] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: ‘Droid Sans’, sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: ‘Droid Sans’, sans-serif;}#ig-subscription-optin input[type=”submit”] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type=”submit”]:hover {color: #FFA5A5;}</style>

 

EDITING IN THE ABOVE CODE

  1. If want to increase/decrease the width of the box just change red colour highlighted text with bold
  2. Then you need to change blue colour highlighted text with bold to your feedburner link.
  3. Also change the red colour bloggerbulk

HOW TO IMPLEMENT THIS IN BLOGGER

  • Open blogger.com
  • Login with your username and password
  • Select your blog if you have more than on else
  • Goto –> Layout –> Add a Gadget
  • You get a pop up window and paste the code there, edit it and then save.
  • Your are done!

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Comments

Leave a Reply to satish Cancel reply