Add Pop Up social media RSS subscribe widget with scroll Effect

Hi guys after releasing my Popup scrolling Facebook widget I have tried to create something like that. As a result I have decided to work on RSS email Subscribe widget with social media. And Successfully created a unique widget on the basis of old concept. This widget is really cools and added all major social network Facebook, Twitter, RSS Feed and Stumbleupon with subscription option. Here Pinterest plays major roles so I have placed it on focused position which can increase your Pinterest follower. Obviously this widget will come on popup style and it will scroll down whenever you go at the bottom or top side of your template. This widget based on CSS and ease-in-out has added on main area. That means when you mouse over the widget then it will show a glow effect inside the widget. This widget is combination of Red and Black which can be use on dark or light color widget. In addition it doesn't occupy any space on your template as well as it load very fast.  

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

<style type='text/css'>
#BloggerSpiceUD {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:360px;
height:auto;
padding:10px;
background:#111111;font:normal Dosis, Georgia, Serif;
color:#EC1A22;
border:2px solid #EC1A22;;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#BloggerSpiceUD a.BSclose {
position:absolute;
top:-10px;
right:-10px;
background:#EC1A22;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #EC1A22;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#BloggerSpiceUD').animate({top:"80px"}, 1000);
// Widget by www.bloggerspice.com
$('a.BSclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='BloggerSpiceUD'>
<!-- Widget by www.bloggerspice.com Start -->
<center><b><a class="BS">Please Stay Connected With Us</a></b></center>
<center>
<style>
.BloggerSpicesubscribe {
border: 1px solid #EC1A22;
padding: 1px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:10px;
}
.BloggerSpicesubscribe:hover {
-moz-box-shadow: inset 3px 3px 10px 3px rgb(255, 26, 35);
-webkit-box-shadow: inset 3px 3px 10px 3px rgba(202, 71, 71, 1);
box-shadow: inset 3px 3px 10px 3px rgb(255, 26, 35);
}
.BloggerSpicemailbox {
border: 1px solid #EC1A22;
-webkit-border-radius: 4px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 3px 3px rgba(255, 26, 35, 0.4) inset;
-webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.4) inset;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.4) inset;
color: #EC1A22;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.BloggerSpicemailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.BloggerSpicesubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #FEFEFE;
background: #EC1A22;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.BloggerSpicesubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.BloggerSpicesubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='BloggerSpicesubscribe'>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BloggerSpice&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='triposoft' />
<input name='loc' type='hidden' value='en_US' />
<input class='BloggerSpicemailbox' name='email' 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;}'
type='text' value='Enter your email...' />
<input alt='' class='BloggerSpicesubmit' title='' type='submit' value='Subscribe'/>
</form>
<table border='0'><tbody>
<tr>
<td>
<a href='http://pinterest.com/BloggerSpice' rel='nofollow' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5kcEHOn3s706-dJRt1CEHswalrTSB6TiQV8SqC7FIz8Wf9jv901PXmf1Sk4UsZWd-kmZAqxREHYT1d9oCCY9Ww3k-jeEWjRZciR0yfFooPgC49gSFEiYsPJf065QZAWtetzlNwqN0mAey/s320/BS+Pop+Pinterest.png' title='Be Our Fan'/></a></td>
<td>
<a href='http://facebook.com/BloggerSpice' rel='nofollow' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7QZxakjvq8hcilAcYHirJroCyW_rUy7bV3LR5FxQh41i9mUYgeDWjPTjwXRrkXKMk3WP7uirjP3tosSsgzxUYPtmUbNxLOfd_bHQ2RLxMbY5tH0xr0BvMpNdlDNCH_w89IDbS8zrvTV6/s320/BS+Pop+facebook.png'' title='Be Our Fan'/></a></td>
<td>
<a href='http://twitter.com/BloggerSpice' rel='nofollow' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLB8Z7JNasxGs9Xu5H20WlzTiG8SgBQ7cUTQ9muWcnGzsF3kyP2qzABPMFcelkIvJG9pAQc8FL0_CpDSpSl21BecxQu6tLFkNRHUOr8Bo7Z6kmthAQ0ENOhp5lLpEh8Q1toNDdUqRcN7x_/s320/BS+Pop+twitter.png'' title='Be Our Fan'/></a></td>
<td>
<a href='http://feeds.feedburner.com/BloggerSpice' rel='nofollow' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjecAwR9GwZGWm4YZicW_y2jBAQbe4px8ZKTPG1SkADMkIhODi-HIoRbYrQc1K72bdb8Y1XzDaZr-UprOL6-Gs30svSqrtR4RsKl5cvlY6BnpYG5evDV6kmgskJlbT7PuEMQgaJwLlAvISk/s320/BS+Pop+rss.png' title='Be Our Fan'/></a></td>
<td>
<a href='http://www.stumbleupon.com/stumbler/BloggerSpice/likes' rel='nofollow' target='_blank'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEithT7rShPfNC0JCyHOH7Ub2mpCzQTFMwa43BjQkJNflpIk6GcUrvyoNRl8dbJHSKtQ30WE641IeYDJt47XEAGyuecGAktjP-LQGp7l96Y676cqCRSzyI5GneIpilda1WnqpqLy8ft1Xy_l/s320/BS+Pop+stumbleupon.png' title='Be Our Fan'/></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</center>
<!-- Widget by www.bloggerspice.com End -->
<a class='BSclose' href='#'>&times;</a>
<center style="float:right; margin-right:30px;"> <a target='_blank' style="font-size:xx-small; color:#EC1A22; text-decoration:none;" href="http://www.bloggerspice.com/2013/06/add-pop-up-social-media-rss-subscribe.html">+Get This</a></center>
</div>

Customization

• Replace all BloggerSpice with your social media ID and user name.