Bienvenidos a este Post hoy enseñare como y donde poner HTL en tu pagina .es .tl
(Parte 2)
Primer 1º
Efecto flotante para tu chat de Xat
Este codigo permite tener el chat de tu pagina al instante con un solo click, al centro de la web.
Puedes editar el color de fondo o agregarle una imagen de fondo para personalizarlo.
ademas de agregar el atributo abrirchat con la identidad de tu Xat ,
a cualquier elemento que quieras que abra el chat al hacerle click.
Para poder abrirlo (El Botón abajo)
<!-- --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script><script>$(function(){ $('[abrirchat]').click(function(e){if(this.tagName=='A')e.preventDefault(); var id=$(this).attr('abrirchat'); var chat='<embed wmode="transparent" src="http://www.***/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" FlashVars="id='+id+'" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" />'; $('#chathtml').html(chat);centrarSiem();abrirchat1(); }); $('#cerrarchat1').click(cerrarchat1); function abrirchat1(){$('#chatCt1').css('display','block');$('#fondochat1').css('display','block').animate({'opacity':1},300);} function cerrarchat1(){$('#chatCt1').css('display','none');$('#chathtml').html('');$('#fondochat1').animate({'opacity':0},300,function(){$(this).css('display','none');});} function centrarchat1(mP,mH){return (mP/2-mH/2)*100/mP +'%';} function centrarSiem(){/* http://adan-2994.es.tl/Xat_flotante_Efecto.htm */ if(window.innerHeight>$('#chatCt1').outerHeight()&&window.innerWidth>$('#chatCt1').outerWidth()){ $('#chatCt1').css({'top':centrarchat1(window.innerHeight,$('#chatCt1').outerHeight()),'left':centrarchat1( window.innerWidth, $('#chatCt1').outerWidth()),'position':'fixed'}); }else{$('#chatCt1').css({'position':'absolute','top':'0px','left':'0px'});}} $(document).resize(centrarSiem); });</script> <style> .imgCerrar23{width:36px;height:36px;padding:0;border:none;cursor:pointer; background:url(http://img.webme.com/pic/a/adan-2994/sprites.png) no-repeat; background-position:-502px 0px;} .imgCerrar23:hover{background-position: -537px -1px;} #chatCt1{padding:0px 4px 4px 4px; background-image:url(TUIMAGENDEFONDO); background-color: rgba(23, 31, 62, 0.590); border-top-left-radius: 21px;-moz-border-top-left-radius: 21px;-webkit-border-top-left-radius: 21px; border-top-right-radius: 21px;-moz-border-top-right-radius: 21px;-webkit-border-top-right-radius: 21px; } </style> <div id="fondochat1" style="z-index:99;position:fixed;top:0px;left:0px;width:300%;height:300%;background:rgba(0,0,0,.8);opacity:0;display:none;"></div> <div id="chatCt1" style="position:fixed;z-index:100;display:none;"> <div id="cerrarchat1" class="imgCerrar23" title="Click para cerrar el chat"></div> <div id="chathtml" style="width:540px;height:405px;"></div></div> <!-- -->
dijo:<input type="button" value="Abrir Chat" abrirchat="150486423">
Segundo 2º
Las animaciones estan vacias, para que ustedes puedan poner lo que quieran en ellas, ya sea imagenes GIF o algun texto cualquiera.
Todo el codigo en verde sera donde colocaras lo que quieres que aparezca Recuerda que puedes editar a tu gusto los estilos.
<!-- --> <style> #barraCargaTop{ z-index:99; position:fixed; top:0px; left:0px; width:100%; /*height:34px;*/ background-color: rgba(48, 96, 117, 0.804); border-bottom-left-radius:17px; border-bottom-right-radius:17px; -moz-border-bottom-left-radius:17px; -moz-border-bottom-right-radius:17px; -webkit-border-bottom-left-radius:17px; -webkit-border-bottom-right-radius:17px; text-align:center; padding:12px 0px; } #barraCargaTop:hover{ background-color: rgba(48, 96, 117, 1); } </style> <div id="barraCargaTop">Cargando contenido de la web</div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script><script>$(function(){ var barraCargaTop=$('#barraCargaTop'); barraCargaTop.animate({'opacity':0},900,function(){$(this).css('display','none'); }); });</script>
Tercero 3º
En esta ocasion bloquearemos la combinacion de teclas Control+C, para evitar la copia de nuestras paginas.
Solo se bloquearan si el visitante presiona esas dos teclas, lo cual no molestara mas.
<!-- --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script>$(document).ready(function(){ var jun=0; $(document).keydown(function(e){ if(e.keyCode==17 ){ jun++; if(jun==2){ return false; jun=0; }} if(e.keyCode==67 ){ jun++; if(jun==2){ return false; jun=0; }}}).keyup(function(e){ if(jun>0){ jun=jun-1; }}); });</script> <!-- -->
si no lo tenias, copialo de aqui abajo completo (bloquea click derecho y Ctrl+C):
<!-- codigo por http://adan-2994.es.tl/Bloquear_Control_C.htm --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script>$(document).ready(function(){ var jun=0; $(document).keydown(function(e){ if(e.keyCode==17 ){ jun++; if(jun==2){ return false;jun=0; }} if(e.keyCode==67 ){ jun++; if(jun==2){ return false;jun=0; }}}).keyup(function(e){ if(jun>0){ jun=jun-1; }}); }); document.oncontextmenu=new Function("return false"; </script> <!-- codigo por http://adan-2994.es.tl/Bloquear_Control_C.htm -->
Grasias por visitar mi post Espero que comenten y recomienden