Hi Friends,In this post i m going to share a stylish and cool email subscribe widget for your Blogger Blog.
It will help to increse your blog subscriptions.
This Widget is fully seo optimized and Does not effect on your blog load speed.Place this Widget in below the Post Widget or Above the Post Widget.
It will help to increse your blog subscriptions.
This Widget is fully seo optimized and Does not effect on your blog load speed.Place this Widget in below the Post Widget or Above the Post Widget.
How To Add Stylish Subscribe Via Email Widget In Blogger?
- First for All Go To Blogger.com > Design > Edit Html
- Find ]]></b:skin> Using
- CTRL+F
- Copy the code below and paste it just Above ]]></b:skin> tag
/*Custom Header Styling*/
#headline{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifNXNbE7SP0Noo79UO25keGv8Zj4OG_LfIjCMDR6f6iN_x2pA1ohSo7qVoKbYcMDQ2wFpEJq7EaJavi_QXQDvdPs1XXyG6-ikM7YRy2snmBKCp7ORAqhev5JWE6V-V0G5xY5wNUTPXqZpx/s1600/headline-bg.png') repeat; color:#fff; margin:0 auto; border-top: 1px solid #000; height:30px; font-size:12px; position:fixed; bottom:0; z-index:1000; width:100%;border-top-left-radius:20px;border-top-right-radius:20px; display:block;}
#headline:hover{background:#333;}
#headline p{line-height:30px; font-size:12px; text-align:center; width:95%; float:left;}
#headline p a{ text-decoration:blink; color:#ffcc00; border-bottom:1px dashed;}
#headline li.widget, #headline li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}
.kill-btn{display:block; position:relative; right:15px; float:right;}
.kill-btn a{font-size:18px; font-weight:bold; font-family:"Comic Sans MS"; color:#fc0; line-height:30px;}
/* Subscription Box */
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {color:#222; font-size:16px; line-height:50px; float:left; font-weight:bold;}
.newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
.newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dCCuHUz7x7EWMI00ra6IrArLC7klqApA4W5AHHme1aFLJAI91_LmSL4VMSY9BPRM9_QGLDtDCw1AqA3RKJCg5jAJ4-V1CDPRPppAH4G5hr5LcH-V-d8O4i7Fi94odz6b7CT2C1YSB1k/s1600/dwd.PNG') no-repeat;padding:0 0 10px 100px; float:right; }
.txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#000000; border:1px solid #FF9332; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
.btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #FF0000; color:#fff; font-size:15px; border-radius:10px;}
.btn2:hover{background:#6689b0; }
- Then Go To Page Elements > Add a Gadget
- Choose HTML/JavaScript from the list of the gadgets
- Copy and paste the code below in the content box.
<div id="sleek-subscribe">
<div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> daily Updates.</div>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=HashmiWorld4U" class="signform" method="post" target="_new">
<input class="txt2" name="name" onblur="if (this.value == '') {this.value = 'Your Name...';}" onfocus="if (this.value == 'Your Name...') {this.value = '';}" value="Your Name..." />
<input class="txt2" name="email" onblur="if (this.value == '') {this.value = 'Your Email Address...';}" onfocus="if (this.value == 'Your Email Address...') {this.value = '';}" value="Your Email Address..." />
<input class="btn2" type="submit" value="Subscribe Us!" />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><a href="http://hashmiworld4u.blogspot.com/" target="_blank" title="Blogger Widgets">Get This Widget</a></span></div>
></div>
</form>
<div class="clear"></div>
</div>
- Replace HashmiWorld4U with your feedburner Feed ID












0 nhận xét