REDES SOCIALES
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
------------------------DEMO------------------------
------------------------PAGINA WEB DE EJEMPLO------------------------
------------------------HTML------------------------
<style>
/* Estilo para el contenedor de los iconos */
.social-icons {
display: flex;
justify-content: center;
gap: 5px; /* Espacio entre los iconos */
padding: 0px;
}
/* Estilo para cada ícono */
.social-icons a {
display: inline-block;
transition: transform 0.3s ease; /* Transición suave */
}
/* Efecto al pasar el cursor: el ícono baja */
.social-icons a:hover {
transform: translateY(10px); /* Baja 10 píxeles */
}
/* Estilo para las imágenes de los iconos */
.social-icons img {
width: 20px; /* Tamaño de los iconos */
height: 20px;
object-fit: contain;
}
</style>
</head>
<body>
<div class="social-icons" id="social-icons-container"></div>
<script>
// Función para cargar el JSON y generar los iconos
async function loadSocialIcons() {
try {
// Cambia la URL si el archivo JSON está en otro lugar
const response = await fetch('https://raw.githubusercontent.com/BRAYANROCKER/social-icons.json/refs/heads/main/social-icons.json');
const data = await response.json();
const container = document.getElementById('social-icons-container');
// Genera los iconos dinámicamente
data.socialIcons.forEach(icon => {
const a = document.createElement('a');
a.href = icon.href;
a.target = '_blank'; // Abre el enlace en una nueva pestaña
const img = document.createElement('img');
img.src = icon.imgSrc;
img.alt = icon.alt;
a.appendChild(img);
container.appendChild(a);
});
} catch (error) {
console.error('Error al cargar el JSON:', error);
}
}
// Carga los iconos al iniciar la página
window.onload = loadSocialIcons;
</script>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CONTENEDOR PARA ESCRIBIR SOLO TEXTO
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Lista desde JSON
------------------------DEMO------------------------
Actualizaciones:
- ☑ MegaPack Cristiano: ahora sin Acortadores
- ☑ Juegos: ahora sin Acortadores
- ☑ APKs: ahora sin Acortadores
- ☑ Programas: 1 Acortador
- ☑ Series Completas: 3 Acortadores
- 【MegaPack】 Descarger Mega Pack de +5000 Libros de MedicinA IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
- 【Musica】 Descargar Discografia de Aventura en MP3 125/25 Discos 11 Link Mega GratisIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
- 【MegaPack】 Descarger Mega Pack de +5000 Libros de MedicineIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
- 【Musica】 Descargar Discografia de Aventura en MP3 125/25 Discos 11 Link Mega Gratis
------------------------PAGINA WEB DE EJEMPLO------------------------
++++++++++++++HTML++++++++++++++++
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista desde JSON</title>
<style>
#widget-title {
background-color: #2a2a2a; /* Fondo oscuro para el título */
color: #f9f9f9; /* Texto claro */
padding: 2px; /* Espacio vertical reducido */
text-align: center;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
border-bottom: 2px solid #ff0000; /* Línea inferior roja */
width: 180px; /* Ancho ajustado para coincidir con el contenedor */
border-top-left-radius: 0px; /* Borde redondeado izquierdo (ajustable) */
border-top-right-radius: 30px; /* Borde redondeado derecho (ajustable) */
}
#widget-container {
border: 2px solid #333; /* Borde alrededor del contenedor */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
background-color: #f9f9f9; /* Fondo claro */
border-radius: 0 0 5px 5px; /* Solo bordes redondeados en la parte inferior */
width: 180px; /* Ancho del cuadro */
max-height: 450px; /* Altura máxima del widget */
overflow-y: auto; /* Scroll si el contenido es largo */
}
#text-container {
padding: 3px; /* Espaciado dentro del contenedor de texto */
}
#text-container ul {
list-style-type: none;
padding: 0;
}
#text-container li {
margin: 5px 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="widget-title">Actualizaciones:</div>
<div id="widget-container">
<div id="text-container"></div>
</div>
<script>
fetch('https://BRAYANROCKER.github.io/json-hosting/data.json')
.then(response => response.json())
.then(data => {
const container = document.getElementById('text-container');
const ul = document.createElement('ul');
ul.style.listStyleType = 'none';
ul.style.padding = '0';
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
container.appendChild(ul);
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CONTENEDOR PARA AGREGAR IMAGENES QUE REDIRECCIONAN
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Widget Personalizado
------------------------DEMO------------------------
Publicidad:
------------------------PAGINA WEB DE EJEMPLO------------------------
------------------------HTML------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Personalizado</title>
<style>
#widget-title {
background-color: #2a2a2a;
color: #f9f9f9;
padding: 2px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
border-bottom: 2px solid #ff0000;
width: 180px;
border-top-left-radius: 0px;
border-top-right-radius: 100px;
}
#widget-container {
border: 2px solid #333;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
border-radius: 0 0 5px 5px;
width: 180px;
/* max-height: 600px; */ /* Eliminado para permitir crecimiento dinámico */
overflow-y: auto;
}
#text-container {
padding: 0;
}
.ad-image {
width: 180px;
height: 150px;
object-fit: cover;
margin: 2px 0;
display: block;
}
#text-container .image-container img {
max-width: 100%;
height: auto;
}
#error-message {
color: red;
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
padding: 5px;
}
</style>
</head>
<body>
<div id="widget-title">Publicidad:</div>
<div id="widget-container">
<div id="text-container"></div>
<div id="error-message"></div>
</div>
<script>
const jsonUrl = 'https://raw.githubusercontent.com/BRAYANROCKER/images.jso/refs/heads/main/images.json';
fetch(jsonUrl)
.then(response => {
if (!response.ok) {
throw new Error('No se pudo cargar el JSON');
}
return response.json();
})
.then(data => {
const textContainer = document.getElementById('text-container');
console.log('Número de imágenes cargadas:', data.images.length);
data.images.forEach(image => {
console.log('Procesando imagen:', image.imgSrc);
const imageContainer = document.createElement('div');
imageContainer.classList.add('image-container');
const link = document.createElement('a');
link.href = image.url;
link.target = '_blank';
link.rel = 'noreferrer noopener';
const img = document.createElement('img');
img.src = image.imgSrc;
img.alt = image.alt;
img.classList.add('ad-image');
link.appendChild(img);
imageContainer.appendChild(link);
textContainer.appendChild(imageContainer);
});
})
.catch(error => {
console.error('Error al cargar las imágenes:', error);
document.getElementById('error-message').textContent = 'Error al cargar las imágenes. Revisa la URL del JSON.';
});
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
REDES SOJHKJHKHJKCIALES
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Lista de Enlaces desde JSON
------------------------DEMO------------------------
APORTES NUEVOS:
------------------------PAGINA WEB DE EJEMPLO------------------------
------------------------HTML------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Enlaces desde JSON</title>
<style>
#widget-title {
background-color: #2a2a2a; /* Fondo oscuro para el título */
color: #f9f9f9; /* Texto claro */
padding: 2px; /* Espacio vertical reducido */
text-align: center;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
border-bottom: 2px solid #ff0000; /* Línea inferior roja */
width: 180px; /* Ancho ajustado para coincidir con el contenedor */
border-top-left-radius: 0px; /* Borde redondeado izquierdo (ajustable) */
border-top-right-radius: 30px; /* Borde redondeado derecho (ajustable) */
}
#widget-container {
border: 2px solid #333; /* Borde alrededor del contenedor */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
background-color: #f9f9f9; /* Fondo claro */
border-radius: 0 0 5px 5px; /* Solo bordes redondeados en la parte inferior */
width: 180px; /* Ancho del cuadro */
max-height: 450px; /* Altura máxima del widget */
overflow-y: auto; /* Scroll si el contenido es largo */
}
#text-container {
padding: 3px; /* Espaciado dentro del contenedor de texto */
}
#text-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#text-container li {
margin: 5px 0;
font-family: Arial, sans-serif;
font-size: 12px; /* Tamaño de letra ajustado para parecerse a la imagen */
line-height: 1.2; /* Espaciado entre líneas */
overflow-wrap: break-word; /* Permite que las palabras largas se dividan */
word-break: break-all; /* Forzar el quiebre de palabras si es necesario */
}
#text-container a {
color: #0000EE; /* Color azul estándar para enlaces */
text-decoration: none; /* Sin subrayado por defecto */
}
#text-container a:hover {
text-decoration: underline; /* Subrayado al pasar el mouse */
}
.link-brackets {
color: #000; /* Texto negro para las descripciones */
}
</style>
</head>
<body>
<div id="widget-title">APORTES NUEVOS:</div>
<div id="widget-container">
<div id="text-container"></div>
</div>
<script>
fetch('https://raw.githubusercontent.com/BRAYANROCKER/links/refs/heads/main/links.json')
.then(response => response.json())
.then(data => {
const container = document.getElementById('text-container');
const ul = document.createElement('ul');
ul.style.listStyleType = 'none';
ul.style.padding = '0';
data.forEach(item => {
const li = document.createElement('li');
// Crear el enlace con el formato [Descripción]
const link = document.createElement('a');
link.href = item.url;
link.target = '_blank'; // Abrir en una nueva ventana
link.textContent = `${item.description}`; // Mostrar el texto completo
link.className = 'link-brackets';
li.appendChild(link);
ul.appendChild(li);
});
container.appendChild(ul);
})
.catch(error => console.error('Error al cargar el JSON:', error));
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
REDES SOFGHFGHFGHCIALES
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
------------------------DEMO------------------------
------------------------PAGINA WEB DE EJEMPLO------------------------
------------------------HTML------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enlaces</title>
<style>
body {
background-color: transparent; /* Fondo transparente */
color: #fff; /* Color del texto (blanco) */
font-family: Arial, sans-serif;
margin: 0; /* Eliminar márgenes del body */
padding: 0; /* Eliminar padding del body para quitar espacio superior */
}
.container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0; /* Asegurarse de que el contenedor no tenga márgenes */
padding: 0; /* Asegurarse de que el contenedor no tenga padding */
}
.column {
flex: 1;
margin: 0 00px; /* Espacio entre columnas */
}
.column ul {
list-style: none;
padding: 0;
margin: 0; /* Eliminar márgenes de la lista para evitar espacio adicional */
}
.column li {
margin: 1px 0; /* Espacio entre líneas de texto */
}
.column a {
color: #fff; /* Color de los enlaces */
text-decoration: none;
font-size: 12px; /* Tamaño del texto de los enlaces */
}
.column a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="column" id="columna1">
<ul id="lista1"></ul>
</div>
<div class="column" id="columna2">
<ul id="lista2"></ul>
</div>
</div>
<script>
// URL del JSON en GitHub
const jsonUrl = 'https://raw.githubusercontent.com/BRAYANROCKER/columna.json/refs/heads/main/columna.json';
// Función para cargar el JSON y mostrar los datos
fetch(jsonUrl)
.then(response => response.json())
.then(data => {
// Primera columna (fila 0)
const lista1 = document.getElementById('lista1');
data.filas[0].columna.forEach(item => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = item.link;
a.textContent = item.nombre;
li.appendChild(a);
lista1.appendChild(li);
});
// Segunda columna (fila 1)
const lista2 = document.getElementById('lista2');
data.filas[1].columna.forEach(item => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = item.link;
a.textContent = item.nombre;
li.appendChild(a);
lista2.appendChild(li);
});
})
.catch(error => console.error('Error al cargar el JSON:', error));
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
REDES SGFHFGHGFOCIALES
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
------------------------DEMO------------------------
------------------------PAGINA WEB DE EJEMPLO------------------------
------------------------HTML------------------------
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barra de Navegación</title>
<style>
body {
background-color: transparent; /* Fondo transparente para que se adapte a tu web */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.nav-container {
display: flex;
justify-content: center; /* Centrar los enlaces */
flex-wrap: wrap; /* Permitir que los enlaces se ajusten en pantallas pequeñas */
padding: 5px 0;
}
.nav-container a {
color: #fff; /* Color del texto (blanco) */
text-decoration: none;
font-size: 10px; /* Tamaño del texto */
margin: 0 0px; /* Espacio entre los enlaces */
}
.nav-container a:hover {
text-decoration: underline; /* Subrayado al pasar el mouse */
}
.nav-container a:not(:last-child)::after {
content: "| "; /* Separador entre enlaces */
color: #fff;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="nav-container" id="nav-links"></div>
<script>
// URL del JSON en GitHub
const jsonUrl = 'https://raw.githubusercontent.com/BRAYANROCKER/menuhorizontal.json/refs/heads/main/menuhorizontal.json';
// Función para cargar el JSON y mostrar los enlaces
fetch(jsonUrl)
.then(response => response.json())
.then(data => {
const navContainer = document.getElementById('nav-links');
data.enlaces.forEach(item => {
const a = document.createElement('a');
a.href = item.link;
a.textContent = item.nombre;
a.target = '_blank'; // Abrir enlace en una nueva pestaña
navContainer.appendChild(a);
});
})
.catch(error => console.error('Error al cargar el JSON:', error));
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
GRACIAS POR VER
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
------------------------DEMO------------------------
------------------------PAGINA WEB DE EJEMPLO------------------------
------------------------HTML------------------------
