Widget Email Subscription for Blogger

07.38
Today we are going to learn “How To Add Subscription Widget / Box for Blogger”. The Widget itself is unique creation, actually it is adapted from Wordpress widgets, but you can install it on blogger now.

Features & Whats New ?
1. The Widget is made up of Pure CSS Scripts
2. Easy to Install without any Internel HTML Coding
3. Doesn’t Slow Down your Blog’s Loading Time.
4. Its really Soft and Beautiful.
5. Added Social Subscription Buttons.

How to Add this Widget to Your Blog ?
It is really easy to install on your blog, just follow the steps :
1. Go to Blogger
2. Click Layout.
3. Click Add Gadget.
4. Select HTML /Java Script.
5. Copy the Following  Code and Paste in it.

<div align="center" id="bloggingpasuruan"> <div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradientundefined startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;"> <h4 id="bloggingpasuruan-title-text" style="color: 000; font-size: 20px;"> Subscribe Our Newsletter</h4> <div id="bloggingpasuruan-sub-title-txt" style="color: 000; font-size: 14px;"> Join us for free and get valuable content delivered right through your inbox.</div> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=BlogRiskySyahfira', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="bloggingpasuruan_Subscriber_name" name="name" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br /> <input class="email" id="bloggingpasuruan_Subscriber_email" name="from" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="BlogRiskySyahfira" /><input name="loc" type="hidden" value="en_US" /> <input id="bloggingpasuruan_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form> </div> </div> <style> #ig-subscription-optin {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 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 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvL1Jc6vD3mFr6KQVKYd6GnMgeZ1nB-nXpKL3j50iKJVqvix3zuYwQJt4PRKBd77CUfyL9gBhkDGmeKwm4fnIOOzCUV9laymgkFPm54JCTuNkXagGUQMJfvC9iyD0SJhw0_9SujD4dlZkk/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 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapJVW_MXxo2J3TVI8FwKB4xWYzwobEuAw6uHdHZl0OM6deUUcNk44cqYyXQQjMkeSv3ODdZEDvx3r1qXv_uFyao9UFS8UJ3uV6kvWfBKE2ihqekuYm5ZX9U0efPcMJAleszuZCgjB9Wa-/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 h4 {margin-bottom: 8px !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:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: red;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: #f6640e; 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: #FFFC00;}</style> <div style="text-align: right;"> <span style="font-size: xx-small;"><a href="http://bloggingpasuruan.blogspot.co.id/" target="_blank">get this widget</a></span></div>


6. Now before saving  the widget you have to make some changes.

7. Change BlogRiskySyahfira with your blog’s feed name. [How to Find Your Blog’s Feed Name?]

8.         After changes, Hit Save. Move your widget to any desired postion where you want to place it. [ Want to add this widget just below your post body? At left or right side? Click here for tutorial ]

Thats it, go to your blog and check any post, you will see our widget on your blog.
Important Note : Please don’t remove our attribution link from this widget.

Why You should not remove our attribution link? I think these little attribution links are worthy of my hardwork, and of course  it doesn't affect on your blog as its size it extra small, so kindly help Us by do not removing our attribution links from the widget you are going to install on your blog.
Thanks a lot for helping Us, a little help will make it to 100% happiness, kindly share this post with you friends and Don’t forget to drop your comment here.

Artikel Terkait

Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Disqus
Silahkan Berkomentar Dengan