How to add feed-burner email subscription widget in your blogger blog? Today I am going to share responsive and stylish subscription widget for blogger. FeedBurner email is a service that allows publishers to deliver their feed content to subscribers via email. It highly effective to stick visitors with your updates and in fact it improves bloggers traffic.Through this widgets visitors would come to know after the subscription about each post shared in your blog.
DEMO:
Adding this is so simple, Please follow the following steps:
Step 1: Go to Blogger Dashboard > Template > Edit HTML and past the given code just before <Head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
Step 2: To install CSS code for Responsive feed-burner subscription widget. Open blogger> Templates> Edit HTML and apply the code below right before the </ style> or]]> </ b: skin>
body {
background: #333;
margin: 0 auto 0;
color: #444;
font-family: 'PT Sans', arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-align: center;
}
#subscribebox {background:#314d5b; padding:20px;font-family: 'PT Sans', sans-serif;
width:300px;}
.widget_follow_subscribe .widget-detail {
padding: 36px 30px 40px 30px;}
#subscribebox p {
color: white;
font-size: 15px;
text-align: center;
font-weight: 700;
}
.follow-subscribe-social {
margin: 0 0 15px;
padding: 0 0 14px;
border-bottom: #858585 solid 1px;
}
.follow-subscribe-social ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.follow-subscribe-social ul li {
display: inline;
margin: 0 15px 0 0; border-bottom: none;
}
.follow-subscribe-social ul li:last-child {
margin: 0;
}
.follow-subscribe-social ul li a {
font-size: 17px;
color: #cacaca;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.follow-subscribe-social ul li a:hover {
color: #fff;
}
form.subscribe {
margin-top: -7px;
}
form.subscribe input {
display: block;
width: 100%;
}
.subscribe-email {
height: 45px;
border: none;
margin: 0 0 10px;
font-size: 0.928571em;
background-color: #ffffff;
text-align: center;
color:efefef;
}
.subscribe-email:focus {
outline: 0;
}
/* ===== Placeholder color ===== */
form.subscribe .placeholder { /* Internet Explorer 9 */
color: #cacaca;
}
form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #cacaca;
}
form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
color: #cacaca;
}
form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fafafa;
}
form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fafafa;
}
.subscribe-button {
height: 45px;
font-weight: 700;
font-size:16px;
color: #fff;
text-transform: uppercase;
border: none;
background-color:#ea5217;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.subscribe-button:hover {
background-color: #f4b458;
}
.subscribe-button:focus {
outline: 0;
}
.creadit a {background:#F35D5C;color:white;margin-top:30px;padding:20px;font-size:15px;}save tamplate
just copy all the code below to Layout> Add Gadget> HTML / JavaScript.
<center> <div id="subscribebox"> <div class="follow-subscribe-social"> <ul> <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <img border="0" alt="Subcribe" src="http://dateinacrate.com/wp-content/uploads/2015/06/icon-subscribe.png" width="100" height="100"> <p>Subscribe to my Newsletter</p> <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='YOUR-USER-NAME'/> <input name='loc' type='hidden' value='en_US'/> <input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/> <input class="subscribe-button" type="submit" value="Subscribe" /> </form> <p style="font-size:60%;">We will not share your information with anyone</p> </div> </center> <br/><br/><br/> <div class="creadit"> <a href="http://wikiblogism.blogspot.com" target="_blank"> Get This Widget</a></div>
Discription:
- Change USER-NAME with your feedburner username.
0 comments