Advantages Of Morphing Full Screen Overlay
- Light weight, Attractive, Speedy, Easy Customizable
- Html Supported, You can even put Html coding in the overlay
- Small button can be placed anywhere on your blog/site
- undetectable by search engine bots
- Easy to open and close
- Plugin user have full customization rights
Add Morphing Over Lay Effect
1: First of all you need to add java script file in the head section of your blog.Go to Template >> Edit Html >> Press Ctrl+F and find <Head> and just after it place this code.
<script src="http://yourjavascript.com/12511024545/modernizr-custom.js"></script>
2: The in the search box search for </body> and place this code just before/above it and hit save template button.
<script src="http://yourjavascript.com/52144251121/classie.js"></script> <script src="http://yourjavascript.com/15114144525/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(); var el = document.querySelector( '.morph-button' ); new UIMorphingButton( el, { closeEl : '.icon-close', onBeforeOpen : function() { // don't allow to scroll noScroll(); }, onAfterOpen : function() { // can scroll again canScroll(); // add class "noscroll" to body classie.addClass( document.body, 'noscroll' ); // add scroll class to main el classie.addClass( el, 'scroll' ); }, onBeforeClose : function() { // remove class "noscroll" to body classie.removeClass( document.body, 'noscroll' ); // remove scroll class from main el classie.removeClass( el, 'scroll' ); // don't allow to scroll noScroll(); }, onAfterClose : function() { // can scroll again canScroll(); } } ); })(); </script>
3: Now where you want to add the push button place this code and save the Html Widget In Your Blogger Layout.
<div class="morph-button morph-button-overlay morph-button-fixed"> <button type="button">More Info</button> <div class="morph-content"> <div> <div class="content-style-overlay"> <span class="icon icon-close">Close the overlay</span> <h2>About This Blog</h2> Place your html coding or text in this area
</div> </div><!-- morph-button --> <section class="related"> </section>
Css Style
4: Go to templates and this time click on Customize >> Advanced >> Add css and paste this whole css code inside the css box.
.morph-button > button {
position: relative;
height: 90px; width:260px; padding: 0 1em;
border: none;
background-color: #e85657;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
line-height: 80px;
overflow: hidden;
}
.morph-button-overlay .morph-content {
overflow: hidden;
background: #e85657;
}
.icon-close {
z-index: 100;
width: 3em;
height: 3em;
text-align: center;
line-height: 3;
cursor: pointer;
}
.sidebar {
color: #FFFFFF;
line-height: 1.5em;
}
- If you want to change the button colour then change the Pink code with the desired one
- If you want to change the width & height of the button then you can change the green code according to your need
- If you want to change the background colour of the full screen overlay then change the Blue code with the desired one
- If you want to change the text colour in the full screen overlay then change the Red code with the desired one.
If you feel any type of problem while installing this widget then you can surely comment down here as I am always available to help you in any kind because comments are more then welcome on this blog. Stay Tuned because there are more awesome plugins on the edge. Drop Your precious comments on how you like this widget and with some more creative ideas on how we can use this widget more effectively.
ITS A GOOD SITE TO LEARN
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks for appreciation brother. Everything looks good to me in coding please try it again carefully I hope It will work :)
DeleteI have tried to debug, those "noScroll" "canScroll" functions are called successfully. Looks like there are some bugs in the scripts link to yourjavascript.com.
DeleteI am using the same script on the demo blog it's working fine . If you want me to help you give me the login I will install this for you. Send the login details to my email or through contact us box :)
DeleteNever mind, I managed to get the scripts from another site and it's working fine now. Thanks for your help :D
DeleteMy Pleasure Always :)
Delete