Sunday, November 3, 2013

How to add Slide-Hover Pop up Subscription Box for Blogger

Scrolling Slide-Hover Pop up Subscription Box for BloggerSubscription Box provides customers access to the latest product version updates made available during their membership term. These updates include major changes to the product architecture and updates to the feature set of a product.

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">Be the first to get the latest updates</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/
Rumyblog' 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/
Rumishael101' 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/
Changedlifecommunity' 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='Rumi’s Blog' 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=" http://www.triposoft.com/">RumyBlog</a></center>
</div>
Some Tweaks and Instructions
Before saving your Widget please replace " All the names in red" with your RSS Feed ID and all Social Bookmarking link URLs with Your own Profile URLs.

If it was helpful please do leave a comment.

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Favorites More