Blog Email Subscription Widget .
Blog Email Subscription Widget is bing a big concern for every blogger over the internet .using the simple subscription widget by feed-burner shall not gain as much subscribers as a customized subscription box will attract .Take a look at the image attracted with this tutorial/post .This Blog Email Subscription Widget consist Css sprites. In this Email Subscriber .The social buttons have a little bit nudge effects.
Follow Below Step To Add Blog Subscription Widget
- First of all open your blogger Dash board
- Go>Layout >Click on "+ Add a widget"
- A new page will open Now Select "HTML JavaScript " Click
- Now again a new page will open here is two text-able space in this page
- One is Title another is Content
- Past your Blog Email Subscription Widget code in Content place and save it and open your blogger/website to watch it.
HTML JavaScript Tag for Blog Email Subscription Widget
Copy the code from here.
<style>
.sBlack {
background: none repeat scroll 0 0 #282828;
height: 95px;
padding-bottom: 10px;
}
.sBlack .subscribeTop .mcLeft {
background: url("http://tinyurl.com/bloggerhintspng
") no-repeat scroll 0 -173px transparent;
display: block;
float: left;
height: 83px;
margin: 8px;
width: 101px;
}
.sBlack .subscribeTop .mcRight {
display: block;
float: left;
margin: 0;
width: 165px;
}
.sBlack .subscribeTop .mcRight h4 {
background: url("http://tinyurl.com/bloggerhintspng") no-repeat scroll 0 -305px transparent;
display: block;
height: 15px;
margin: 10px 0 0 -2px;
text-indent: -9999px;
width: 164px;
z-index: -1;
}
.sBlack .subscribeTop .mcRight div.getposts {
color: #767676;
font-size: 11px;
line-height: 13px;
margin: 3px 0 -5px;
text-shadow: none;
}
.sBlack #mc_embed_signup fieldset {
border: medium none;
margin: 0;
padding: 0;
}
.sBlack .subscribeTop .mcRight form.getfrom {
margin-top: -5px;
padding: 0;
}
.socialsharebuttons {
background: none repeat scroll 0 0 #F2F2F2;
border-bottom: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
display: block;
margin: 10px auto 10px 0;
overflow: hidden;
padding-top: 6px;
}
.social { float: center; }
.social li { float: left; margin: 0 0 0 5px; }
.social li a { background: url(http://tinyurl.com/bloggerhintspng) no-repeat; display: block; height: 35px; text-indent: -999em; width: 32px; }
.social li a.rss { background-position: 0 -263px; }
.social li a.google+ { background-position: 0 0; }
.social li a.facebook { background-position: 0 -99px; }
.social li a.twitter { background-position: 0 -363px; }
.social li a.technorathi { background-position: 0 -326px; }
.social li a.google { background-position:0 -136px; }
.social li a.yahoo { background-position: 0 -400px; }
.social li a.subscribe { background-position: 0 -300px; }
.social li a.mailbox { background-position: 0 -173px; }
.social li a.subscribe { background-position: 0 -300px; }
.social li a.mailbox { background-position: 0 -173px; }
.social li a:hover { position: relative; top: -2px; }
</style>
<div style="margin-left:0px; margin-top:-5px;" class="sbBlock sBlack">
<div id="mc_embed_signup" class="subscribeTop clearfix">
<div class="mcLeft"></div>
<div class="mcRight">
<h4>Subscribe now</h4>
<div style="margin-bottom:2px;" class="getposts"><strong>Subscribe By Email To Receive Free Updates</strong></div>
<div style="clear:both;"></div><form target="popupwindow" style="border:none;text-align:left;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CINHv target='_blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="getform" action="http://feedburner.google.com/fb/a/mailverify"><input type="text" style="width:128px; height:16px;" name="email" onblur="if (this.value == "") {this.value = "enter your email";}" onfocus="if (this.value == "enter your email") {this.value = ""}" value="Enter your email" /><span class="float:left;"><input type="hidden" value="ekWMe" name="uri" /><input type="hidden" value="en_US" name="loc" /><input type="submit" style="padding-top:3px; padding-left:1px; margin-bottom:-2px; margin-left:2px; padding-right:1px; border: 1px solid #333333;cursor: pointer; background-color: #828282;text-decoration:bold; color: #000; padding-bottom:4px; height:25px;" value="Go" /></span></form>
</div>
</div>
</div>
<center>
<div style="background-color: rgb(40, 40, 40); margin-top: -5px; width: 305px; height:75px">
<table border="0" style="border-top:1px #888 solid;"><tbody><tr></tr><tr><td>
<widget class="social">
<div id="footer-list-none">
<li><a class="rss" href="http://feeds.feedburner.com/bloggerhints/" rel="nofollow" title="Subscribe Via RSS">RSS</a></li>
<li><a href="https://plus.google.com/Username rel=author" class="googleplus" title="Add Me On Google+">Google+</a></li>
<li><a class="facebook" href="https://web.facebook.com/bloggertipssandtricks/" rel="nofollow" title="Find Us On Facebook">Facebook</a></li>
<li><a class="twitter" href="https://twitter.com/Username" rel="nofollow" title="Follow Us On Twitter">Twitter</a></li>
<li><a class="google" href="http://fusion.google.com/add?source=atgs&feedurl=http%3A//feeds.feedburner.com/Username" rel="nofollow" title="Add To Google">Google</a></li>
<li><a class="yahoo" href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Username target='_blank" rel="nofollow" title="Add To Yahoo!">Yahoo</a></li>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:right;"><astyle="color:#D3D3D3;" href="http://www.bloggerhints.com/">Bloggerhints Widgets</a></p>
</div>
</widget>
</td></tr></tbody></table></div></center>
Customization of Blog Email Subscription Widget :
Replace All the red bold lines with the required services.If you want to remove any one social icon from the email subscription. you don't want to use just remove from the
<li> and end with this tag </li>.
Replace these words with your ID'S
Username = Feed Burner
Username=Twitter
bloggertipssandtricks/=Facebook
Username=Google + ID
Last words..!
Thank you for adding
Blog Email Subscription Widget if you face any problem in this post or another problem related with blogger .Then
Contact us or comment us .We will solve your problem as soon as soon is possible. this is satisfied Website .From here you can get all hints tips and tricks for your blogger.
- Is this is tutorial is helpful ?
- Need to know your opinion
- For Advertising Contact Us
0 comments: