<!DOCTYPE html>

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎨 [Nombre del Sitio] - Descargas Gratuitas de Imágenes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        header {
            background-color: #007bff;
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        header h1 {
            margin: 0;
            font-size: 2.5em;
        }
        nav {
            background-color: #333;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .image-item {
            border: 1px solid #ccc;
            padding: 15px;
            text-align: center;
            background-color: #fff;
            border-radius: 5px;
        }
        .image-item img {
            max-width: 100%;
            height: auto;
            border-radius: 3px;
            margin-bottom: 10px;
        }
        .image-item a {
            display: block;
            background-color: #28a745;
            color: white;
            padding: 8px;
            text-decoration: none;
            border-radius: 4px;
            margin-top: 10px;
        }
        .contribution-section {
            background-color: #ffc107;
            padding: 20px;
            margin-top: 30px;
            text-align: center;
            border-radius: 5px;
        }
        .contribution-section h3 {
            margin-top: 0;
            color: #333;
        }
        footer {
            text-align: center;
            padding: 15px 0;
            background-color: #333;
            color: white;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <header>
        <h1>🖼️ **[Nombre del Sitio]**</h1>
        <p>Arte Digital y Dibujos Gratuitos para Descargar</p>
    </header>

    <nav>
        <a href="#inicio">Inicio</a>
        <a href="#galeria">Galería</a>
        <a href="#aportes">Aportes</a>
        </nav>

    <div class="container" id="inicio">
        <h2>Bienvenido a **[Nombre del Sitio]**</h2>
        <p>Descarga libremente nuestra colección de dibujos e imágenes de alta calidad para uso personal. Creemos en el arte libre y accesible para todos.</p>

        <div class="contribution-section" id="aportes">
            <h3>¿Te gusta nuestro trabajo? ¡Déjanos un pequeño aporte! ☕</h3>
            <p>Todo el arte es gratuito, pero si deseas apoyar nuestro esfuerzo y ayudarnos a seguir creando, cualquier contribución es bienvenida.</p>
            
            <p>
                [**INSÉRTAR AQUÍ CÓDIGO DEL BOTÓN DE APORTE MONETARIO**]
                <button style="background-color: #17a2b8; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Donar ahora</button> 
            </p>
            <p>¡Gracias por tu apoyo!</p>
        </div>
    </div>

    <div class="container" id="galeria">
        <h2>✨ Galería de Descargas Gratuitas</h2>
        <p>Haz clic en el botón de "Descargar" para obtener la imagen en alta resolución.</p>
        
        <div class="image-gallery">
            
            <div class="image-item">
                <img src="[URL_DE_TU_IMAGEN_1]" alt="Descripción del Dibujo 1">
                <h4>Título del Dibujo 1</h4>
                <p>Categoría: Ilustración</p>
                <a href="[URL_DEL_ARCHIVO_A_DESCARGAR_1]" download>⬇️ Descargar Gratis</a>
            </div>

            <div class="image-item">
                <img src="[URL_DE_TU_IMAGEN_2]" alt="Descripción del Dibujo 2">
                <h4>Título del Dibujo 2</h4>
                <p>Categoría: Vector</p>
                <a href="[URL_DEL_ARCHIVO_A_DESCARGAR_2]" download>⬇️ Descargar Gratis</a>
            </div>

             <div class="image-item">
                <img src="[URL_DE_TU_IMAGEN_3]" alt="Descripción del Dibujo 3">
                <h4>Título del Dibujo 3</h4>
                <p>Categoría: Fondo</p>
                <a href="[URL_DEL_ARCHIVO_A_DESCARGAR_3]" download>⬇️ Descargar Gratis</a>
            </div>

            </div>
    </div>

    <footer>
        &copy; 2025 **[Nombre del Sitio]**. Todos los derechos reservados. | Arte para todos.
    </footer>

</body>
</html>

📝 Instrucciones para Usar en Blogger

  1. Copia todo el código HTML anterior.

  2. Ve a tu panel de control de Blogger.

  3. Crea una Nueva Entrada (o edita una existente que quieras usar como página de inicio).

  4. En el editor de la entrada, cambia la vista de "Redactar" a "Vista HTML" (usualmente un ícono de < >).

  5. Pega el código completo.

  6. Reemplaza todas las instancias de [Nombre del Sitio] con el nombre que deseas darle a tu web.

  7. Actualiza los enlaces:

    • Sustituye [URL_DE_TU_IMAGEN_X] por la URL real de la vista previa de la imagen.

    • Sustituye [URL_DEL_ARCHIVO_A_DESCARGAR_X] por el enlace directo al archivo (PNG, JPG o ZIP) que se descargará.

  8. Inserta el código de tu botón de donación donde se indica [**INSÉRTAR AQUÍ CÓDIGO DEL BOTÓN DE APORTE MONETARIO**].

  9. Publica la entrada.

Este código usa una estructura HTML básica (<head>, <body>, <header>, <nav>, <footer>) y CSS simple (dentro de la etiqueta <style>) para el diseño y la galería.

¿Quieres que te ayude a buscar cómo generar un botón de donación simple de PayPal para que puedas insertarlo en el código?

Comentarios

Publicar un comentario