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
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 == "") {this.value = "Enter your
email...";}" onfocus="if (this.value == "Enter your
email...") {this.value = ""}" 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&send=false&layout=button_count&width=230&show_faces=true&action=like&colorscheme=light&font=verdana&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&id=twitter-widget-0&lang=en&screen_name=help2blogging&show_count=true&show_screen_name=true&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.
Comments
Post a Comment