En esta oportunidad les enseñare como realizar este efecto como lo dije en el titulo del post, es muy sencillo y rápido, iniciemos
Demostración
1ro. Iniciamos con su cuenta en blogger
2do. Abrimos la plantilla, vamos a ubicarnos en lo ultimo de ella y buscamos </body> y arriba de el mismo pegamos el código que le dejaré a continuación:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
$(function(){$('.open-contc').click(function(){$('#contc-box').show();$('#contc-overlay').fadeTo('normal',0.9);return false});$('#contc-box .close').click(function(){$('#contc-overlay, #contc-box').hide();return false})});$(function(){$('.open-fpage').click(function(){$('#fpage-box').show();$('#fpage-overlay').fadeTo('normal',0.9);return false});$('#fpage-box .close').click(function(){$('#fpage-overlay, #fpage-box').hide();return false})});$(function(){$('.open-gplus').click(function(){$('#gplus-box').show();$('#gplus-overlay').fadeTo('normal',0.9);return false});$('#gplus-box .close').click(function(){$('#gplus-overlay, #gplus-box').hide();return false})});
$(function(){var panel=$('#panel');menu=$('nav ul');menuHeight=menu.height();$(panel).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
$(document).ready(function(){$('body').hide().fadeIn(5000).delay(500)});
</script>
Importante: Si ya tene instalado el script que visualiza a continuación, omita la nuestra:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
Eso es todo, espero sea de gran ayuda para tu blog.
Demostración
Tu mensaje sera visible tras la aprobación del administrador