New Box Subscription with morphing button effect widget for blogger

I have created a very useful and adds a new feature in the subscription box which is morphing button effect.

How it works

Now with this widget you can only adds the Sign up button at the sidebar or at any other place where you want. And when any user click on the button then a box subscription appears coming from the button to the centre of the screen.

Add it on Blogger

1. Go to Blogger Dashboard
2. click on template tab
3. Backup your template
4. then click on the Edit HTML
5. Now search for the </head> tag and just above it paste the following code:

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ButtonComponentMorph/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ButtonComponentMorph/css/component.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ButtonComponentMorph/css/content.css" />
<script src="http://tympanus.net/Development/ButtonComponentMorph/js/modernizr.custom.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

•  Now Again search for the </body> tag and just above it paste the following coding:

<script src="http://tympanus.net/Development/ButtonComponentMorph/js/classie.js"></script>
<script src="http://tympanus.net/Development/ButtonComponentMorph/js/uiMorphingButton_fixed.js"></script>
<script>
(function() {
var docElem = window.document.documentElement, didScroll, scrollPosition;
// trick to prevent scrolling when opening/closing button
function noScrollFn() {
window.scrollTo( scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0 );
}
function noScroll() {
window.removeEventListener( 'scroll', scrollHandler );
window.addEventListener( 'scroll', noScrollFn );
}
function scrollFn() {
window.addEventListener( 'scroll', scrollHandler );
}
function canScroll() {
window.removeEventListener( 'scroll', noScrollFn );
scrollFn();
}
function scrollHandler() {
if( !didScroll ) {
didScroll = true;
setTimeout( function() { scrollPage(); }, 60 );
}
};
function scrollPage() {
scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
didScroll = false;
};
scrollFn();
[].slice.call( document.querySelectorAll( '.morph-button' ) ).forEach( function( bttn ) {
new UIMorphingButton( bttn, {
closeEl : '.icon-close',
onBeforeOpen : function() {
// don't allow to scroll
noScroll();
},
onAfterOpen : function() {
// can scroll again
canScroll();
},
onBeforeClose : function() {
// don't allow to scroll
noScroll();
},
onAfterClose : function() {
// can scroll again
canScroll();
}
} );
} );
// for demo purposes only
[].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) {
bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
} );
})();
</script>

• Well guys, now come to the final and important step. For this go to the Layout Taband Click on the Add Gadget and select HTML/Javascript where you want the button to be appeared.
• Now in the Gadget add the following piece of coding:

<style>
#boxheading
{
text-align: center;
font-size:30px;
}
.subscribe{width:100%;height:100px;}
.subscribe h3{color:#fff;margin-bottom:2px;font-weight:600;text-align: right;font-size:25px;color:black;}
.subscribe form{float:center;margin:28px}
.subscribe form .inptfld{font-family:Open Sans;outline:none;border:2px solid;border-color:grey;font-size:15px;padding:10px;border-radius:3px;width:250px}
.subscribe form {font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-left:10px}
.subscribebtn{font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-right:10px; position:relative; left:60px; bottom:-50px;font-weight:bold;float:center;width:150px;height:50px;}
.subscribe form .subscribebtn:hover{background:#2c3e50;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}#credits
{
font-size="8px;
text-align: right;
position:relative;
bottom:-50px;
left:190px;
}
</style>
<div class="mockup-content">
<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
<button type="button">Login</button>
<div class="morph-content">
<div>
<div class="content-style-form content-style-form-1">
<span class="icon icon-close">Close the dialog</span>
<div id="boxheading">
<h3>Sign up to get Free Updates</h3> </div> <div class="subscribe">  <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wanemclub', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inptfld" name="name" placeholder=" Your Name..." style="font-family:Open Sans" type="text"/>
<br />
<br />
<br />
<input class="inptfld" name="email" placeholder=" Your Email" style="font-family:Open Sans" type="text"/>
<input name="uri" type="hidden" value="wanemclub"/>
<input name="loc" type="hidden" value="en_US"/>
<input class="subscribebtn" type="submit" value="Sign Up Now!"/>
</form><div id="credits">
Widget By<a href="http://www.pakmax.net/">PakMax</a>
</div>
</div> </div>
</div>
</div></div></div>

Further Customization 

• Now replace http://feedburner.google.com/fb/a/mailverify?uri=Wanemclub with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscription.
• Replace wanemclub with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=wanemclub