WELCOME TO EHOST.COM.NP

Sunday, September 21, 2014

Add CSS3 & HTML5 Email Subscription Widget To Blogger Blog

ads space

Email Feed After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do.  It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.

What our subscription widget is going to look like. See image below.

widget preview

Live Preview

Little brief about HTML5

We will use HTML5's new required tag. Right now, different browsers will do different things when a form using HTML5 elements is submitted. When the form is submitted, most browsers will prevent the form from being submitted and will display a "hint" to the user, marking the first field that is required and has no value.

HTML5 validation works according to the type attribute that is set within the form fields. For years HTML only supported a handful of type attributes, such as type="text"  but with HTML5 there are a over a dozen new input types including email and url which we are going to use in our form.

add it to blogger blog

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template.

]]>

4. Paste the following code immediately above (before) it:

#subs_wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwfagBRXEoY2fUNUtWTs9do-uiQWLy-0-mOgm6cwqJc6pHENdnsYczdHxUdyXREwD1b5TQhczM46lBxeqeoIRfab2ADSVH_h-DeSzfOsApKsXBfz4T3ayPtpK9noHHIZa80dvsuVabX8I/s1600/Subcription_bg.png) no-repeat;
    width: 300px;
    height: 250px;
    padding: 10px 10px;
    margin: 5px;
}

#subs_wrapper p {
    font-family: Tahoma, Geneva, sans-serif;
    margin-top: 60px;
    color: yellow;
    text-align: center;
    margin-right: 20px;
}

.subs_form input {
    height: 27px;
    font-size: 15px
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #26beaf;
    width: 238px;
    margin: inherit;
    padding: 6px;
    float:;
}

.subs_form input {
    margin: 2px;
}

.subs_form input {
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 3px;
    padding-right: 30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

.subs_form input:focus {
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 3px #aaa;
}

*:focus {
    outline: none;
}

:-moz-placeholder {
    color: blue;
}

.emailinput {
    color: #666;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
}

::-webkit-input-placeholder {
    color: blue;
}

::-webkit-validation-bubble-message {
    padding: 1em;
    margin-left: -40px;
}

button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 10px 96px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    list-style-type: none;
}

button.submit:hover {
    opacity: .85;
    cursor: pointer;
}

button.submit:active {
    border: 1px solid #20911e;
}

Now lets go and do one more step…

5. Now again look for the following data tag in your Template.

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this. Locate the post-footer (from top) one. 

6. Paste the following code immediately below (after) it:



Get Latest Updates To Your Inbox..!


 
   
   

We Always Respect Your Privacy.




Widget alignment

  • Change the value of float property:
    Align right: set it to right;
    Align left: set it to left;

Note:- Must change mybloggertricks highlighted in yellow with your feedburner username..

Now click on save button and View your blog. The widget should appear on post pages.

I hope this tutorial helped. If you have any questions, please feel free to share them with us. Take care :)

ads space
ADS SPACE

0 comments:

Post a Comment

Categories

Article How-to All Posts WordPress Android Web design Blogger Plugins CSS Google JQuery Plugins Programming Reviews Web Hosting Blogger Blogging Blogging Tips Tricks Web Development Facebook Git Internet Make Money Online Social Plugins Tips Tips and Tricks Tools Tutorials Windows WordPress Plugins Blogging Tips and Tricks Freebies GSM Google Analytics HTML How To's JavaScript Plugin Development S.E.O SEO SMS SmartPhone Social Media Tips amp; Tricks Top-Most Updates Webmaster Tools Whatsapp Applications Apps Blogger Basics Documentary Downloads Entertainment Gadgets Games Gmail Google AdSense Guest Post IPhone Make Money Blogging SVN Security Softwares Web Hosting Tips and Tricks Wordpress Tips Wordpress Tips and Tricks hostgator iOS Advertising Networks Advertising Technology Affiliates Antivirus Audience amp; Traffic Biography Blog post Blog post Blogger Blogger Errors Blogger Tips Blogger Tools Blogger Widget Blogosphere Bogger Widgets CSS selectors CSS symbols CSS3 Computer amp; Internet Content Writing Coupon Codes Data amp; Analytics Deleted blog Design DoubleClick for Publishers Email and newsletter marketting Email marketing Excel Tips Excel Tips and Tricks Facebook Tricks Feed Feedburner Feedburner subscribers Font Fun GitHub Giveaways Gmail primary inbox Gmail tabs Google sign-in Guides HTML amp; CSS HTML5 Infographics Inspirational Instagram Internet Marketing Internet Tips amp; Tricks Job Listings Knowledge Life Hacks Lists Make-Money Monetization amp; Conversion Monetize Navigation Online Marketing Other PHP Tutorials Passport Publishing amp; Content Quotes RSS Sidebar Smartphones Social Networking Status Tech Tech Blog Technology Telegram Themes UI / UX User Psychology amp; Research VB.Net Web Tools Web browser Widget Windows Tips Windows-10 ad viewability admin notice blogging tools bluehost cherry-pick clone cors custom scrollbar customizer dismissible notices duplicate post feed title git branch git clone gpg gpg2 hybridauth iPad icon font notice responsive wordpress theme same origin policy scrollbar signed git commit smartsvn theme customizer vcs wordpress theme wordpress themes

Blog Archive