About This:-
After begin the tutorial I would like to explain it's features and more things. This is simple Metro style email subscription widget which will help you to get more and more email subscribers from directly to your blog. It's design is great it's designed specially for Windows 8 Blogger Templates it attract more people to become your subscribers. First it has good header with the light green color background and the user friendly message below the header. Second It contain two blank field for name and Email ID. When someone to write his name or email id, it gives a beautiful 3D effect in these fields. At the bottom of this widget, it has 3D Pure CSS Sign Up button.
How This Made?
We've made this widget with the help of HTML and CSS style sheet and it will not affect in your blogger log loading time it widget are best suitable for windows 8 style widgets just after installed this in your blog, the you will no need to update and customized it. This Widget originally developed by Muhammad Yaqoob from the Blogger Yard.
How To Install This In your Blogger Blog?
After something about tell you, now this time grab this and attached in your blogger blog. Just follow the steps given below.
- Go To Blogger Dashboard>>Layout>>Add Gadget
- Choose HTML/JavaScript Gadget
- Paste the following below code in content Box.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='NBT-emailsubsocial'>
<div class='heading'>
Subscribe Via Email
</div>
<p>Sign up with your email address to receive hot updates and latest post to direct in your inbox.</p>
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nextbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="nextbloggertricks" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />
</form>
</div>
<p id='credits'>Developed By : <a href='http://goo.gl/Kv4BdO'>NBT</a></p>
</div>
<style type='text/css'>
#NBT-emailsubsocial {
width: 300px;
height: 320px;
border: 2px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#NBT-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: #B0E7AF;
}
#NBT-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#NBT-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#NBT-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 2px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#NBT-emailsubsocial .emailsub input:focus {
border-color:#EA700C;
outline: none;
box-shadow: 0 0 2px 1px #EA700C;
}
#NBT-emailsubsocial .emailsub .button {
background: #EA700C;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#NBT-emailsubsocial .emailsub .button:hover{
background: #4CDC24;
}
#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
</style>
- Replace nextbloggertricks with your FeedBurner Username.
- Click On "Save" Button.
- CONGRATULATION you're successfully add this Widget in Your Blogger Blog.
Final Words
So fiends, this is the our small blogger widget you can imagine that what's next. I hope you've like this widget and you can install if not? you're facing problem so please leave comments for your solution and don't forget like our Facebook page and also share this tutorial with you friends in social networking sites.
Happy Blogging!
No Comment
Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.