7 widgets para insertar en tu página web

Suscribete al canal
7 widgets para insertar en tu página web

Cuando estamos construyendo un proyecto web –ya sea que se trate de una página o un blog por nuestra cuenta– queremos incorporar recursos que puedan adaptarse a la dinámica de la página por lo que conviene tener a la mano algunos códigos pre formateados que puedan adecuarse a estos requerimientos y es por esta razón que hemos recopilado 7 sencillos widgets para insertar en tu página web que podrían ayudarte a mejorar los elementos de tu proyecto.



7 widgets para insertar en tu página web

1. Agrega un mensaje emergente a tu página

Este complemento es ideal para añadir en la página de inicio de tu web o en cualquier otra sección cada vez que necesites colocar un mensaje de aviso o dar la bienvenida a tus visitantes.

Básicamente esta pequeña línea despliega una ventana automática que aparecerá cada vez que alguien ingrese al sitio. Puedes anclarlo a la página de inicio o algún otro módulo de la web y configurar el mensaje a tu gusto.


<body>
<Body onLoad="alert('Bienvenido');" onUnLoad="confirm('Texto Al Salir');" >
</body>

2. Impedir la selección del texto de tu web

¿No quieres que ningún visitante manipule el contenido o texto de tu web? Este sencillo script evita la selección del texto haciendo de el uno de los más sencillos y mejores widgets para páginas web gratis.



<body>
<script language="Javascript">
<!-- Begin  
function disableselect(e){  
return false  
}  
function reEnable(){  
return true  
}  
document.onselectstart=new Function ("return false")  
if (window.sidebar){  
document.onmousedown=disableselect  
document.onclick=reEnable  
}  
// End -->  
</script>
<p>Este texto no puede seleccionarse</p>
</body>


3. Integra texto en movimiento

Si eres de los que les gusta animar un poco las cosas esta etiqueta podría agradarte,Y aunque marear a tus visitantes no es lo ideal, este comando quizás resulte bastante interesante para hacer que centren su atención en el contenido que deseas resaltar. De ser, asi incorpora esta etiqueta dentro de la estructura de body de tu proyecto.


<marquee id="ejemplo" direction="up"> AQUI VA EL TEXTO QUE DESEES </marquee>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';" >
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';" > 
</a>
O haz que el texto vaya de derecha a izquierda o viceversa modificando el atributo dirección de esta forma:
<marquee id="ejemplo" direction="right">TEXTO EN MOVIMIENTO A LA DERECHA</marquee> 
<marquee id="ejemplo" direction="left">TEXTO EN MOVIMIENTO A LA IZQUIERDA</marquee>
TEXTO EN MOVIMIENTO A LA DERECHA TEXTO EN MOVIMIENTO A LA IZQUIERDA



4. Textos que cambian cada vez que el visitante ingresa a la web

Este widget también puede servirte para agregar textos aleatorios que varíen cada vez que se ingrese a la web o para alguna otra función en específico.




<script language="JavaScript" type="text/javascript">
//<![CDATA[
hoje = new Date()
numero_de_textos = 4
segundos = hoje.getSeconds()
numero = segundos % numero_de_textos
if (numero == 0){
texto = "Texto número 1"
}
if (numero == 01){
texto = "Texto número 2"
}
if (numero == 02){
texto = "Texto número 3"
}
if (numero == 03){
texto = "Texto número 4"
}
document.write('' + texto +'')
//]]>
</script>


5. Evita que los visitantes puedan hacer clic derecho

¿Ya viste el script para impedir la selección del texto? Pues esta opción va un poco más lejos permitiéndote inhabilitar el clic derecho en tu web y mostrando un mensaje emergente cada vez que un visitante intente esta acción.


<script language="JavaScript" type="text/javascript">
//<![CDATA[

<!--

function inhabilitar(){
alert ("Lo siento, no puede usar el clic derecho")
return false
}
document.oncontextmenu=inhabilitar
//]]>
</script>


6. Incorpora las opciones de ir adelante y hacia atrás en tu web

Aunque el navegador ya tiene estas opciones un botón de adelante y atrás no está demás para ubicar entre los módulos de tu sitio.


<a href="javascript:history.go(1)"<Adelante</a>
<a href="javascript:history.go(-1)"<Atrás</a>




7. Inserta botones que muestren y oculten elementos

A través de esta serie de comandos podrás incorporar botones para esconder y hacer aparecer los recursos que decidas incorporar dentro de ellos.


<div class="pre-spoiler">
<span style=color:#00ffff;>AQUI COLOCAN EL TEXTO QUE SE VERA AL DAR CLIC</span>
<input type="button" value="Mostrar" style=width:80px;font-size:10px;margin:0px;padding:0px; onclick=
 
    "if
(this.parentNode.parentNode.getElementsByTagName('div')[1]
.getElementsByTagName('div')[0].style.display != '') {
 this.parentNode.parentNode.getElementsByTagName('div')[1]
.getElementsByTagName('div')[0].style.display = '';this.innerText = ''; 
this.value = 'Ocultar'; } else {
 this.parentNode.parentNode.getElementsByTagName('div')[1]
.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}"
/> 

    </div>

<div> 

    <div class="spoiler" style=display:none;> 
       AQUÍ SE INCOPORA EL CONTENIDO QUE SE OCULTARÁ YA SEA 
               UN CHAT, REPRODUCTOR U OTRO ELEMENTO 
    </div> 

</div>

¿Te han parecido de utilidad estos sencillos códigos para páginas web? ¿Incorporarías algún otro a la lista? No olvides dejar tu comentario.

Tampoco olvides seguirnos en Facebook para que continúes informándote sobre el más variado contenido de nuestra web.