How To Add Awesome Subscribe Now Widget In Blogger With Fade Effect

Hello friends welcome back to MBC.Today i came with an Awesome subscribe now widget i think you all love this cool subscribe now widget with social icons and also a cool fade effect is added on the images.I too using this widget in my blog and now i'am providing this code to all MBC readers.It's a cool, unique, simple and stylish widget with many features.The features of this amazing subscribe now widget is given below.Then why are you waiting go get this awesome widget.

Live Demo

Features.

• Fade effect added.

• shadow appear in subscribe now box when you hover your mouse.

• cool simple white subscribe now box.

• light waight coding.

• Does not effect page load speed.

• All in one subscribe now widget added.

• Built with pure CSS.

How To Add This Cool Widget In Your Blogger Blog.

• Goto Blogger.com --> Layout --> Add A Gadget --> Select HTML/Javascript widget.

• Now Paste the below code in the HTML/Javascript box and click save.

• Now Rearrange your widget where you want to place it.

 

<div class="widget-content">
<style>
#social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}
#social img {
margin-left: 3px;
margin-right: 3px;
opacity: 0.6;

}
#social img:hover {
opacity: 1;
}
</style>
<div id="social">
<a href="https://twitter.com/MyBloggerClub"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvwoutt4bHGYSPNcjcpwgZtKCAlvb-NiCtIeSJI8AsdedrwNPU00gd25Jf8VyCQv2PIL5E6KEXHrQNu8khLq4cvy1ZZW9vl5xVtZXqRE5KU89dBF-jrW55mmWK03TH5-qO3nKpqTxYIE/s1600/twitter.png" title="Follow Us On Twitter" /></a>
<a href="http://feeds.feedburner.com/MyBloggerClub"><img alt="Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5NtdltPFKeCBqbhhzQ_-5veybEH69w5j6lkg5Ci8DAXZORThvZyb-d9l5_7JqNO5S67IzQHSLIs6IxnA3e5817WNcdSpAc0HzkzDaHKCdmIIlHYW3cTOQRvleIMYe7BKAY0VThUznMA/s1600/rss.png" title="Grab Our RSS Feed" /></a>
<a href="https://www.facebook.com/MyBloggerClub"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUf5fda4kDVbrDFp87gUzCsbXRSzsM_IA4qjIV6TUHiSx9mYaGmssJp_zx_aqFHNg8vjgm5dVNl0JODeb_P8RLvDZLf2pcEyBttALUxal6xm7JN-Ca1mrRs60PNhU04DSsDyLV1LGQW7g/s1600/facebook.png" title="Follow Us On Facebook" /></a>
<a href="https://plus.google.com/103890545785605740400"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbl9bh8_dq0I1M9gjtb7hQz6yn6b306KCnajbXaZAQvooXXoKn2ZMPhSAa6wswS4PKsCWTNyFfbKn0Wkd_eXo-ACoIA2-UjjYhOqNpxYJMJUMEsseC6amhuDwHmIYtIJRNtcbhQbO6Wg/s1600/google.png" title="Add To Circle On Google Plus" /></a>
</div>
</div>
<div class="widget-content">
<div class="subscriptionboc">
<center><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerClub', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">Get All Latest Updates From Us Direct In Your Inbox !!</div><p><center><p><a href="http://feeds.feedburner.com/MyBloggerClub"><img src="http://feeds.feedburner.com/~fc/MyBloggerClub?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p></center>
</p><div class="forspace">
<center>
<input class="enteremail" type="text" style="width:140px" name="email" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" /></center></div>

<p></p>

<input type="hidden" value="MyBloggerClub" name="uri" />

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

<input class="button45" type="submit" value="Sign Up" /></center></form></center>

</div>
<style>

.subscriptionboc
{
border-style:solid;
border-width:2px;
border-color:#000;
padding:20px;
width:235px;
background:#fff;
transition: box-shadow .777s;
-webkit-transition: box-shadow .777s;
-moz-transition: box-shadow .777s;
-o-transition: box-shadow .777s;
-ms-transition: box-shadow .777s;
}
.subscriptionboc:hover
{
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}

.paratraf
{
font-size:20px;
font-family:'georgia';
text-align:center;
color:#000;
}
.feed-links{display:none;}

.enteremail
{
background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
color: #8B8B8B;
padding: 10px 40px;
border-style:solid;
border-width:2px;
border-color:#CACACA;
}
.forspace
{
padding:15px;
}
.button45
{
background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
background:#249334;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
</style></div>

Editing.

• Search for twitter.com/MyBloggerClub and replace with your twitter username.

• Now search for facebook.com/MyBloggerClub and replace with your facebook username.

• Now search for http://feeds.feedburner.com/MyBloggerClub and replace with your RSS feed url.

• Now search for https://plus.google.com/103890545785605740400 and replace with your Google + profile.

• Now Search for http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerClub and replace with your RSS feed url.

• If anything is remains then simply search for MyBloggerClub and replace the name according to your url.

That's It.

Hope you all like this cool widget friends first i think to share this this widget code on my site but after that i changed my mind and sharing this widget here.So if you have any problem with this widget comment below.Wait for my next post till then enjoy our 5 Blue Host Account Giveaway.