Add Pop Up social media RSS subscribe widget with scroll Effect

Add Pop Up social media RSS subscribe widget with scroll Effect

7
data:blog.title
Popup widget

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

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.


<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='http://3.bp.blogspot.com/-0JqbVyAZBZI/UbQY0xQHepI/AAAAAAAADaE/ECFTlwXdamI/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='http://1.bp.blogspot.com/-Wx3VxeL19PE/UbQUq0x3xaI/AAAAAAAADZM/6Qd0cnEjIl4/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='http://3.bp.blogspot.com/--JBD_XEATi8/UbQUrrn6weI/AAAAAAAADZw/SjbgHhb4bfI/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='http://1.bp.blogspot.com/-jKXI4UW2oP4/UbQUq_vT1bI/AAAAAAAADZQ/G0nD1k9r0vY/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='http://2.bp.blogspot.com/-C4uNQQz901A/UbQUrS9k5NI/AAAAAAAADZk/IkMUcnwdbMM/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. 
Add Pop Up social media RSS subscribe widget with scroll Effect
4 Stars stars - "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 li...

thanks for commenting on this site

awesome... wanna try this... Financial Tips

glad to hear that..thanks Alex

thanks, you are bless.

So bookmark this site and visit whenever you need a laugh. Delivering the best since 2007! how to deactivate Facebook profile

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *