Thứ Năm, 6 tháng 2, 2014

Add Stylish Subscribe Via Email Widget In Blogger

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.






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 == &#39;&#39;) {this.value = &#39;Your Name...&#39;;}" onfocus="if (this.value == &#39;Your Name...&#39;) {this.value = &#39;&#39;;}" value="Your Name..." />
<input class="txt2" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Email Address...&#39;;}" onfocus="if (this.value == &#39;Your Email Address...&#39;) {this.value = &#39;&#39;;}" 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 
Well Done!
    Share this post
    • Share to Facebook
    • Share to Twitter
    • Share to Google+
    • Share to Stumble Upon
    • Share to Evernote
    • Share to Blogger
    • Share to Email
    • Share to Yahoo Messenger
    • More...

    0 nhận xét

    :) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

     
    © 2011 All for blogger , Templates, Seo, Widgets, Tricks, Tips
    Released under Creative Commons 3.0 CC BY-NC 3.0
    Posts RSSComments RSS
    Back to top