Join the list of our 279,000+ subscribers

After a great hard work I created an new widgets for my lovable Bloggers. Recently, I shared Hover-Cool Related Post Widget for Blogger. We got many Subscription Popup widget which just popup with no effects.Generally we use these types of pop up widgets to get more likes, tweet, subscribers. So I just designed this Popup Subscription box with scrolling effect for blogger. Are you asking me what is their in this widget? Here the answer, when you add this widget then it’ll appear with popup style. When you start moving your mouse from top to bottom then it will also scroll top to bottom. And you can see an hover when you bring the mouse over it. So I named this as ” Slide-Hover Subscription Pop up Box for Blogger “

Before creating this widget I was inspired by TopBloggingIdeas Subscription Box and BloggerSpice Facebook Pop up like box. By using their coding I have created an new widget with new style. So this is really bit unique concept and I hope so that you will like this widget and you will add it to your blog. You can add Slide-Hover by following my simple instructions. Let show you how to add Slide-Hover Pop up Subscription Box for blogger.

• Go to Blogger Dashboard >> Layout
• Click on Add a Gadget
• Just Copy & paste the below code in it (Just leave title column blank)

<style type=’text/css’>
#tsupdown {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:360px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#3977D4;
border:2px solid #3977D4;;
-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;
}
#tsupdown a.tsclose {
position:absolute;
top:-10px;
right:-10px;
background:#3977D4;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-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
$(‘#tsupdown’).animate({top:”80px”}, 1000);
// Widget by www.triposoft.com
$(‘a.tsclose’).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id=’tsupdown’>
<!– Widget by www.triposoft.com Start –>
<center><b><a class=”TS”>Time to Share Your Love</a></b></center>
<center>
<style>
.tbisubscribe {
border: 1px solid #3977D4;
padding: 10px;
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;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgb(202, 76, 202);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgb(202, 76, 202);
}
.tbimailbox {
border: 1px solid #3977D4;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
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;
}
.tbimailbox: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;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #3977D4;
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;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-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=’tbisubscribe’>
<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=triposoft&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=’tbimailbox’ 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=’tbisubmit’ title=” type=’submit’ value=’Subscribe’/>
</form>
<table border=’0′><tbody>
<tr><td><img src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TM9g9IUnPEI/AAAAAAAAB_4/vL57WmouxO8/s1600/stay+connected.png’/></td><td>
<a href=’http://feeds.feedburner.com/triposoft’ imageanchor=’1′ style=’margin-left: 1em; margin-right: 1em;’ target=’_blank’><img border=’0′ src=’http://1.bp.blogspot.com/_rKG-ziTSNUQ/TUioxHuEqUI/AAAAAAAACzw/sDjXq2r-LEo/s1600/connect-rss-feed.png’/></a></td><td>
<a href=’https://twitter.com/triposoft’ rel=’nofollow’ target=’_blank’><img alt=’Follow Us on Twitter!’ src=’http://2.bp.blogspot.com/_rKG-ziTSNUQ/TUiowIW-2bI/AAAAAAAACzo/PgDZVQrh7c8/s1600/connect-twitter-follow.png’ title=’Follow Us on Twitter!’/></a></td><td>
<a href=’http://facebook.com/Triposoft’ rel=’nofollow’ target=’_blank’><img alt=’Be Our Fan!’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TUiowob8qHI/AAAAAAAACzs/Fsw_CkgSTSQ/s1600/connect-facebook-follow.png’ title=’Be Our Fan’/></a></td></tr>
</tbody></table>
<a href=’http://www.wwsurfers.blogspot.com/’><img alt=’Best Blogger Tips’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a>
</div>
</div>
</center>
<!– Widget by www.Triposoft.com End –>
<a class=’tsclose’ href=’#’>&times;</a>
<center style=”float:right; margin-right:10px;”><span style=”font-size:xx-small; color:#000; text-decoration:none;”>+Get this Widget</span> <a target=’_blank’ style=”font-size:xx-small; color:#3B78CD; text-decoration:none;” href=” https://triposoft.com/”>Triposoft</a></center>
</div>

• Before saving your Widget please replace ” Triposoft ” with with your RSS Feed ID and all Social Bookmarking link URLs with Your own Profile URLs.

Hope you like this article. Don’t forgot to share this widget with your friends. If you have any problem while you installing it, just feel free to ask via comment. Happy blogging 🙂