Como Crear Código de Texto Aleatorio con Enlace y Relleno

En ésta guía aprende a crear un código (html | css | js), con función de texto aleatoiro, con enlace, borde, y relleno (cuadro).

Esencial en:
_ Mostrar una amplia lista de sitios webs.
_ Promoción, publicidad, mediante enlace.
_ Programa de afiliados.
_ Descarga de Archivos | JPG | PNG | GIF
_ Documentos | DOC | PDF | EXCEL
Etc.

Tema Relacionado / Como Guaradar un Archivo de Código Web

1° Versión | Crea 3 Archivos | HTML | CSS | JS

En cada paso crear y guardar el archivo de código web, en una nueva carpeta del servidor, y este es el enlace al Texto Aleatorio, en la sub-carpeta |1|, así:

https://dominio.com/CARPETA/texto-aleatorio-enlace/1

Ver Texto Aleatorio Ejemplo

https://recursosdiario.com/CODIGO/FUNCION/texto-aleatorio-enlace/1-A

Si en una modificación (agregar más enlaces), no funciona, se debe eliminar la carpeta, y crear una carpeta nueva con otro nombre (1-1, 1-2, 1-a…).

AVISO: Requiere código Iframe para No Dañar la Web

Solo agrega el enlace anterior como URL en el Iframe

Descarga Carpeta ZIP | Códigos Texto Aleatorio con Enlace | Descromprimir y Subir al Servidor

La Carpeta ZIP se sube al servidor mediante Cliente FTP -tema pendiente- | O de Forma Manual

CÓDIGO | Experto

EXPLICACIÓN | Principiante

AVISO | Los siguientes archivos | css, java script, html, | deben estar contenido en una misma carpeta en Servidor Cpanel

Java Script | Style CSS | HTML

Paso 1 | Archivo HTML

Se incluye entre la etiqueta |body|

_ Desde éste códgio, empieza la lista de textos aleatorio.

<div class="conteneur-flexbox">

<div id="B">
	  <div><b>Inicio</b></div>
	<div><b>Blog</b></div>
  
</div>	
	</div>

Y cada texto requiere el código de enlace, así:

<div><a href='https://recursosdiario.com/' style="text-decoration:none" target=new ><b>Inicio</b></a></div>
<div><a href='https://recursosdiario.com/blog' style="text-decoration:none" target=new ><b>Blog</b></a></div>

Paso 2 | Archivo CSS

Se incluye entre la etiqueta |style|, entre |head|

Aquí se puede modificar | Fondo | Color | Alto | Ancho | Fuente | Tamaño

.conteneur-flexbox {
	background-color: aqua;
  height: 100vh;
  width: 100%;
  display: flex;
}

#B div:not(:first-child) {
  display: none;
}

body {
	font-family: helvetica;
	font-size: 3em;
	margin: 0;
	color: blue;
}

#B {
  margin: auto;
  text-align: center;
}

Paso 3 | Archivo JS | JAVAS CRIPT

Se puede incluir entre la etiqueta |body|

Aquí |*8| es la cantidad de líneas de texto en el código a mostrar. Y |4000| el tiempo en milisegundos de la transición entre un texto y otro.

<script>  
$(function() {
  var n = 0;
  setInterval(function() {
      n = Math.floor((Math.random() * 8));
      $("#B div").hide();
      $("#B").find('div:eq('+n+')').show();
  },4000);
});
</script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script  src="./script.js"></script>

Y éste es la ubicación del código javascript con jquery para la función java.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script  src="./script.js"></script>

Listo !