::: Blogging Heaven| Techniques ! Simplified ! :::

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-rmwYN_Unt1s/U4IQt0KhpmI/AAAAAAAADcw/fakDSj5uc14/s1600/morphing-full-screen-overlay-effect-blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="355" src="http://4.bp.blogspot.com/-rmwYN_Unt1s/U4IQt0KhpmI/AAAAAAAADcw/fakDSj5uc14/s1600/morphing-full-screen-overlay-effect-blogger.png" width="400" /></a></div>
Hey there folks! I know it's been a while this blog is not updated in any aspect but somehow I came again in action and want to help all other bloggers out there as I am helping them since last 2 years. I recently developed a small plugin named "Morphing full screen over lay effect" and want to share it with all of you so you can also use this awesome technique on your blog and enhance your blog beauty as well.These days usually bloggers talk about a targeted place on their blog which they want to use for affiliate marketing or direct sales and finding that  targeted area on your blog is not a big deal now, because of lot's of plugins out their which tell you about the heat map of your site and you can use that area effectively.Sometime that area is bit small and you want to put lot's of things so you can get some benefit from your blog.Today I shall teach you about a widget which is as small as a button and will be converted into a full screen overlay upon clicking ,you can put whatever you want in that full screen overlay and one good thing about this widget is, this is totally undetectable by search engine bots so put every kind of stuff you want to. 
 
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #333333; font-family: Verdana, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.1875px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"> 
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #444444; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div style="line-height: 19px;">
<div style="text-align: justify;">
<div class="MsoNoSpacing">
<div class="MsoNoSpacing">
<div class="MsoNoSpacing">
<div align="center">
 <div style="line-height: 20px; text-align: left;">
<div style="line-height: 19px;">
<div style="text-align: justify;">
<div class="MsoNoSpacing">
<div class="MsoNoSpacing">
<div class="MsoNoSpacing">
<div align="center">
 <a href="http://go-greeneee.blogspot.com/" rel="nofollow" target="_blank">DEMO</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 style="text-align: left;">
 </h3>
<h3 style="text-align: left;">
Advantages Of Morphing Full Screen Overlay </h3>
<div>
<ul style="text-align: left;">
<li>Light weight, Attractive, Speedy, Easy Customizable</li>
<li>Html Supported, You can even put Html coding in the overlay</li>
<li>Small button can be placed anywhere on your blog/site</li>
<li>undetectable by search engine bots</li>
<li>Easy to open and close</li>
<li>Plugin user have full customization rights</li>
</ul>
<h3 style="text-align: left;">
 Add Morphing Over Lay Effect </h3>
</div>
<div>
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.</div>
<div>
 </div>
<div>
<blockquote class="tr_bq" style="line-height: 19.1875px;">
<script src="http://yourjavascript.com/12511024545/modernizr-custom.js"></script></blockquote>
<div style="line-height: 19.1875px;">
2: The in the search box search for </body> and place this code just before/above it and hit save template button.</div>
<div style="line-height: 19.1875px;">
 </div>
<div>
<blockquote>
<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></blockquote>
</div>
<div style="line-height: 19.1875px;">
3: Now where you want to add the push button place this code and save the Html Widget In Your Blogger Layout.</div>
<div style="line-height: 19.1875px;">
 </div>
<div>
<blockquote class="tr_bq">
<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"> Close the overlay <h2>About This Blog</h2>                          Place your html coding or text in this area </div> </div> <section class="related"> </section></blockquote>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
 </div>
<h3 style="text-align: left;">
Css Style</h3>
</div>
<div>
4: Go to templates and this time click on Customize >> Advanced >> Add css and paste this whole css code inside the css box.</div>
<div>
<blockquote>
.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; }</blockquote>
 
 
<ol style="text-align: left;">
<li>If you want to change the button colour then change the Pink code with the desired one</li>
<li>If you want to change the width & height of the button then you can change the green code according to your need</li>
<li>If you want to change the background colour of the full screen overlay then change the Blue code with the desired one</li>
<li>If you want to change the text colour in the full screen overlay then change the Red code with the desired one.</li>
</ol>
<div>
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. </div>
<h3 style="text-align: left;">
That's All  Stay Blessed & Happy Blogging</h3>
</div>
</div>
</div>

HOW TO ADD MORPHING FULL SCREEN OVERLAY EFFECT IN BLOGGER ?

Hey there folks! I know it's been a while this blog is not updated in any aspect but somehow I came again in action and want to help ...