Email Subscription
Email subscribers are very dear to bloggers and webmaster.The blogs or webs having higher email subscribers has higher rankings.Every blogger should add email subscriber widget in order to earn some subscribers.In that case earning subcriber is not a joke.It is very hard to get a subscriber.Professional bloggers make their subscriptions boxes look attractive and beautifull.
Here is very beautifull blogger e mail subscribe widget.It has social share buttons too and it is very easy to install this template.
Simply follow these simple steps.
Step 1: Go to Blogger Dashboard and select Layout.
Step 2: In the Layout page click on add a gadget and scroll down the pop-up menu to Html/javascript and click it.
Step 3: Copy the below code and paste it in the Html/javascript window.
<style type="text/css">
#___plusone_0 {
position: relative;
left: 10px;
}
.abt-wid {
width: 100%;
text-align: center;
top: 35px;
position: relative;
}
.abt-wid a {text-decoration:none;color:#696969}
#wcsub-box {
box-shadow: 1px 2px 4px #696969;
-moz-box-box-shadow: 1px 1px 4px #dcdcdc;
-web-kit-box-shadow: 1px 1px 4px #dcdcdc;
-goog-ms-box-shadow: 1px 1px 4px #dcdcdc;
margin-bottom: 7px;
height: 270px;
width: 350px;
background:#fff;
}
#wc-socico
{
height:25px;
border-bottom:1px solid #dcdcdc;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
padding:10px;
background:#fff;
}
#wc-socico img
{
height:28px;
width:28px;
}
#wc-socico table
{
border:none;
width: 160px;
}
#wc-rscount
{
margin-top:2px;
margin-right:-25px;
}
#wcsub-box .wcsub-fblike { border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 5px; background:#fff;}
#wcsub-box .twitter-follow { background: #fff; border-left: 1px solid #dcdcdc;border-right: 1px solid #dcdcdc; padding:5px 11px;}
#wcsub-box .wcsub-email {
border: 1px solid #696969;
background: #696969;
padding: 11px;
color: #fff;
}
#wcsub-box .wcsub-email h4{color: #fff;font-family: Trebuchet MS;font-size: 12px; margin: 0 0 10px;}
#wcsub-box .wcsub-email .txt, #wcsub-box .wcsub-email .txt:focus {
background: #fff;
float: left;
color: #777777;
border: 1px solid #dcdcdc;
border-radius: 3px;
padding: 7px 10px 7px;
width: 164px;
}
#wcsub-box .wcsub-email .wcsub-button,#wcsub-box .wcsub-email .wcsub-button:focus{background:#43A2FA; border:1px solid #eaeaea; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding:7px 3px;cursor: pointer; }
#wcsub-box .wcsub-email
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
</style>
<div id="wcsub-box">
<div class="wcsub-email">
<h4>Get FREE updates via <a href="http://feedburner.google.com/fb/a/mailverify?uri=youpage" target="_blank" style="color:#33aaff;">Email</a> | <a href="http://feeds.feedburner.com/yourpage" target="_blank" style="color:orange;">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=youpage', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input name="email" onblur="if (this.value == '') {this.value = 'Enter your email';}" onfocus="if (this.value == 'Enter your email')
{this.value = '';}" value="Enter your email" class="txt" />
<input type="hidden" name="uri" value="yourpage" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value=" Subscribe " class="wcsub-button" />
<div style="clear:both;"></div>
</form>
</div>
<div class="wcsub-fblike">
<iframe src="//www.facebook.com/plugins/like.php? href=https://www.facebook.com/Blog-Bird-122680405111188?fref=ts &send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href=" https://www.facebook.com/yourpage" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;position: relative; top:-3px;"> Like us on Facebook </a><div class="clear"></div>
</div>
<div class="twitter-follow">
<a href="https://twitter.com/awaissikandar1" class="twitter-follow-button">Follow @yourpage</a>
</div>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div>
<div id="wc-socico">
<table border="0" cellspacing="0" cellpadding="0" width="298">
<tbody>
<tr>
<td valign="top" ><a href='http://feeds.feedburner.com/blogger/blogfowl' target='_blank' rel=nofollow' ><img id="wc-socicoimg" src="https://cdn2.iconfinder.com/data/icons/social-media-network-fill-flat-icon/512/FeedBurner-512.png" alt="Subcribe to our RSS feeds" /></a></td>
<td valign="top" ><a https://web.facebook.com/blog-bird-122680405111188/?_rdc=1&_rdr' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="https://cdn4.iconfinder.com/data/icons/miu-gloss-social/60/facebook-512.png" alt="Join Us on Facebook" /></a></td>
<td valign="top" ><a href='https://plus.google.com/111818492561788636734?prsrc=5' target='_blank' rel='nofollow'><img src="https://maxcdn.icons8.com/Share/icon/color/Logos//google_plus1600.png" alt="Follow us on Twitter" /></a></td>
<td valign="top" ><a href='https://twitter.com/awaissikandar1' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="https://cdn1.iconfinder.com/data/icons/iconza-circle-social/64/697029-twitter-512.png" alt="Follow us on Twitter" /></a></td>
<td valign="top" ><a href='#' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyRHqmYE9KHPdj-1B_f6N1Fhyf1iWZ-9DYwyM5qw0_e6GcPrdmWZ4X0TNW6Nml1LSBHM0xAI01JgPSzcpReBS4QtKkQXnfZtcYd-awgbwDBjTkKFKDwYzQLmgEIpXClAcSRHhbselwlJ0/s1600/pinterest-icon-square-red.png" alt="Follow us on Twitter" /></a></td>
</tr></tbody></table>
</div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div class="abt-wid"><a href="http://blogfowl.blogspot.com" rel="nofollow">Powered By Blog Fowl</a></div>
</div>
Step 4: Replace links of social pages with your own pages in the below piece of code
Step 5: Click on save and you are done!
Features
You can also customize width and color of borders by making changes in border:1px solid #dcdcdc. You can also change size and family of text and also statements.
You can also change height and width of the widget
Found This Article Helpful Please Comment Below.
Tagged With
- How to add email suscription in blogger
- Subscription box for blogger
- Blogger Email Subscription Box
- Follow box widget
- E-mail subscription box
- widgets for blogger
- Email widget for blog
- Email subscription widget with Follow buttons for blogger
- How to tutorials, customize widgets
- Blogging, Blogfowl widgets for blogger