Saturday, October 29, 2016

Cool Style Email Subscribe Widget for Blogger

wordpress style email subscribe widget for blogger

Below is a step by step tutorial on How to add Cool Style Email Subscribe Widget at the Blogger side-bar.

How to Install this Widget.


Follow the steps given below for Installing this widget on blogger. The procedure is very simple and doesn't require any technical knowledge.


Step 1: Login to your Blogger blog.

Step 2: From Dashboard, Go to Layout.

Step 3: Click on Add a gadget

Step 4: Choose HTML/Javascript widget

Step 5: Paste the following code inside the window.

Code:
[<div class="subscribe_outer"> <div class="subscribe_wrapper"> <p>Subscribe our Newsletter and receive Free Updates and Tutorials right in your Inbox.</p> <div id="btntEmailsub"> <form class="btntEmailform" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input type="hidden" value="The-Area51" name="uri" /> <input type="hidden" value="en_US" name="loc" /> <input class="emailText" type="text" value="Enter your email..." onfocus="if undefinedthis.value == " enter your email...") {this.value="" }" onblur="if undefinedthis.value == " ") {this.value="enter your email..." ;}" name="email" /> <input class="emailButton" type="submit" value="Signup Now!" title="" /> </form> </div> </div> <style> body { color: #000000; font-family: Georgia,"Times New Roman",Times,serif; } body { color: #000000; font-family: Georgia,"Times New Roman",Times,serif; } .sidebar .subscribe_wrapper h5 { color: #888888; } .sidebar h5 { color: #888888; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-size: 20px; font-weight: normal; padding: 0px 0 10px; } h5, h6 { letter-spacing: 2px; text-transform: uppercase; } .sidebar .subscribe_wrapper h5 { color: #000000; } .sidebar h5 { color: #000000; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-size: 20px; font-weight: normal; padding: 4px 0 10px; } h5, h6 { letter-spacing: 2px; text-transform: uppercase; } .subscribe_wrapper { color: #000000; font-size: 20px; line-height: 20px; padding: 38px 50px 18px 38px; } .emailButton { background: -moz-linear-gradientundefinedcenter top , #ffffff 0%, #249334 100%) repeat scroll 0 0 transparent; border: 1 none; border-radius: 4px 4px 4px 4px; color: #333333; cursor: pointer; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4); width: 100%; } .emailText { background: urlundefined"http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF; border: 2 none; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 3px rgbaundefined0, 0, 0, 0.3); color: #444444; margin: 0 0 15px; padding: 10px 40px; text-decoration: none; width: 60%; } input, textarea { font-family: Georgia,"Times New Roman",Times,serif; } .subscribe_wrapper { color: #000000; font-size: 16px; line-height: 20px; } .post-body .emailButton { width: 300px; } .emailButton { background: -moz-linear-gradientundefinedcenter top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4); width: 100%; } </style>]

Step 6: Now change The-Area51 with your FeedBurner Username.

Step 7: Save widget and Drag it wherever you want the widget to appear.
Cool Style Email Subscribe Widget for Blogger
4/ 5
Oleh

Subscribe via email

Get our latest updates straight to your inbox.