New Email Subscribe Widget With Facebook+Google+Twitter Button

 

Subscribe Widget For Blogger With Social Media:

Now released on new RSS Google feedburner email subscribe box with Facebook fan page like button, Google recommended follow button and Twitter follow button. I will share this HTML code. You may like this your blogger blog.

[A] Log in blogger

[B] Select your blog

[C] Select ‘Layout’ at left side bar

[D] Click ‘Add a Gadget’

[E] Select ‘HTML/JavaScript’

[F] Copy the bellow widget code then past here and save

More Useful Tips:

• How to make RSS Google feedburner feed?
• How To Create Popup Stylish Email Subscribe Blogger Widget?

Email Subscription Widget Code For Blogger:

<div class='widget-content'>

<style type='text/css'>

.social a{padding: 6pt 6pt 6pt 5px;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}

.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}

.social a:active{color:#000;border-color: #444;}

.sub-box{

background: #fff;

width: auto;

padding: 2px 5px 7px 7px;

border: 2px solid #000;

border-radius: 15px;

}

.sub-box:hover{

border-style:dashed; 2px solid: #389af2;

}

.emailform{margin:30px 0 0; display:block; clear:both;}

.emailtext{margin:20px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNBKZ3d3hRZsBSpputULF6sII06sp8akup_Nz27XLHt6fd5WB4S7wlQLpRzs-WIqme7hFZiBWq6MJL7cHFLHbNIjHrEq48yHtEonLgUQXsDUGVu2MJg1d190iEVTjvagMCkh_llz3qfI/s1600/email.png) no-repeat scroll 0px center;padding:5px 5px 4px 30px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:250;}

.emailtext:focus{outline:none;}

.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:6px 8px; border:1px solid #666;cursor:pointer;background:#ff748c}

.sub-button:hover{color:#eee;border-color: #999;background:#ffa7b6}

</style>

<div class='sub-box'>

<center></center>

<center>

</center>

<div style="text-align: left; display: inline-block;">

<h8 style="display:block;font-family:'calibri';font-size:17px;font-weight:bold;">Get latest tips via email </h8>

<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=help2blogging', 'popupwindow', 'scrollbars=yes,width=250,height=520');return true">

<input type="hidden" value="help2blogging" name="uri"/><input type="hidden" name="loc" value="en_US" />

<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />

<input type="submit" class="sub-button" value="Submit" title='' alt='' />

</form>

</div>

<div class="googleplus">

<span><font><font>Follow on Google+ </font></font></span>

<!-- GooglePlus -->

<!-- Place this tag where you want the 1 button to render -->

<g:plusone size="medium" href="http://help2blogging.blogspot.com/"></g:plusone>

<!-- Place this render call where appropriate -->

<!-- Place this render call where appropriate -->

<script type="text/javascript">

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

</div>

<div class="facebook">

<span><font><font>Like Us On Facebook </font></font></span>

<!-- facebook -->

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fhelp2blogging&amp;send=false&amp;layout=button_count&amp;width=230&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:21px;" allowtransparency="true">

</iframe>

</div>

<div class="twitter">

<!-- Twitter -->

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=help2blogging&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 230px; height: 20px; " title="Twitter Follow Button">

</iframe>

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

</div>

</div></div>

Customize Blogger Subscribe Button:

[A] Change help2blogging with your RSS feedburner feed URL

[B] Change http://help2blogging.blogspot.com/ with your blog URL

[C] Change help2blogging with your Facebook fan page URL

[D] Change help2blogging with your Twitter URL

That’s all. Thanks.