¿Aprende a crear un boton seguir de Google News para su sitio web o blog?

Cómo Crear un Botón "Seguir en Google News" para tu Sitio Web o Blog

¿Por Qué Agregar un Botón de Google News a tu Web?

Google News es una plataforma poderosa para difundir contenido y aumentar el tráfico de tu sitio web. Si tienes una publicación en Google News, incluir un botón de "Seguir" en tu blog o página web puede ayudar a que más usuarios se suscriban y mantengan al tanto de tus actualizaciones.

En este artículo, te enseñaré cómo implementar un botón de Google News profesional con solo copiar y pegar un código. ¡Es muy fácil y se verá genial en cualquier plataforma!

Puede ver su demostración a continuación

Síguenos en Google News:

Google News

Código Completo para el Botón de Google News

Este botón tiene un diseño moderno con esquinas redondeadas, efectos hover, animación sutil y es totalmente responsive. Funciona en Blogger, WordPress, HTML y cualquier otra plataforma web.

Pasos para Instalar el Botón

1. Copia el siguiente código HTML y CSS:

<style>
.follow-us-wrap {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 1.5rem 0;
}

.follow-us-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #f8f9fa;
    border-radius: 50px;
    padding: 8px 16px 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.follow-us-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.follow-us-btn p {
    margin: 0;
    font-size: 0.9rem;
    color: #3c4043;
    font-weight: 500;
}

.googlenews-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: #5f6368;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 40px;
    border: 1px solid #dadce0;
    transition: all 0.3s ease;
}

.googlenews-btn:hover {
    background-color: #f1f3f4;
    color: #202124;
    border-color: #d2e3fc;
}

.googlenews-btn .c-icon {
    width: 20px;
    height: 20px;
    color: #1a73e8;
}

/* Efecto pulsante para llamar la atención */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.follow-us-btn {
    animation: pulse 2s infinite;
}

.follow-us-btn:hover {
    animation: none;
}

/* Responsive design */
@media (max-width: 480px) {
    .follow-us-btn {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
        gap: 8px;
    }
    
    .googlenews-btn {
        width: 100%;
        justify-content: center;
    }
}
</style>

<div class="follow-us-wrap"><div class="follow-us-btn"><p>Síguenos en Google News:</p><a href="https://news.google.com/publications/CAAqBwgKMP2XpAswwKK8Aw" class="googlenews-btn" target="_blank"><svg class="c-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false"><mask id="mask0_16694_137339" maskUnits="userSpaceOnUse" x="21" y="117" width="165" height="278" style="mask-type: luminance;"><path d="M21.3334 117.334H185.355V394.885H21.3334V117.334Z" fill="white"></path></mask><g mask="url(#mask0_16694_137339)"><mask id="mask1_16694_137339" maskUnits="userSpaceOnUse" x="21" y="21" width="470" height="470" style="mask-type: luminance;"><path d="M485.21 213.437H261.458V304.071H390.252C378.245 361.65 328.038 394.705 261.458 394.705C182.872 394.705 119.566 332.86 119.566 256.087C119.566 179.316 182.872 117.471 261.458 117.471C295.294 117.471 325.855 129.201 349.867 148.394L419.721 80.1525C377.154 43.8987 322.581 21.5071 261.458 21.5071C128.298 21.5071 21.3334 126.002 21.3334 256.087C21.3334 386.174 128.298 490.669 261.458 490.669C381.519 490.669 490.667 405.367 490.667 256.087C490.667 242.226 488.484 227.298 485.21 213.437Z" fill="white"></path></mask><g mask="url(#mask1_16694_137339)"><path d="M-0.494751 394.704V117.47L185.055 256.087L-0.494751 394.704Z"></path></g></g><mask id="mask2_16694_137339" maskUnits="userSpaceOnUse" x="21" y="21" width="470" height="236" style="mask-type: luminance;"><path d="M21.3334 21.3333H490.667V256.109H21.3334V21.3333Z" fill="white"></path></mask><g mask="url(#mask2_16694_137339)"><mask id="mask3_16694_137339" maskUnits="userSpaceOnUse" x="21" y="21" width="470" height="470" style="mask-type: luminance;"><path d="M485.21 213.435H261.458V304.069H390.252C378.245 361.648 328.038 394.703 261.458 394.703C182.872 394.703 119.566 332.859 119.566 256.086C119.566 179.314 182.872 117.47 261.458 117.47C295.294 117.47 325.855 129.199 349.867 148.392L419.721 80.1508C377.154 43.897 322.581 21.5054 261.458 21.5054C128.298 21.5054 21.3334 126 21.3334 256.086C21.3334 386.172 128.298 490.667 261.458 490.667C381.519 490.667 490.667 405.365 490.667 256.086C490.667 242.225 488.484 227.296 485.21 213.435Z" fill="white"></path></mask><g mask="url(#mask3_16694_137339)"><path d="M-0.494751 117.469L185.055 256.085L261.458 191.043L523.412 149.458V0.178467H-0.494751V117.469Z"></path></g></g><mask id="mask4_16694_137339" maskUnits="userSpaceOnUse" x="21" y="21" width="470" height="470" style="mask-type: luminance;"><path d="M21.3334 21.3333H490.667V490.666H21.3334V21.3333Z" fill="white"></path></mask><g mask="url(#mask4_16694_137339)"><mask id="mask5_16694_137339" maskUnits="userSpaceOnUse" x="21" y="21" width="470" height="470" style="mask-type: luminance;"><path d="M485.21 213.435H261.458V304.069H390.252C378.245 361.648 328.038 394.703 261.458 394.703C182.872 394.703 119.566 332.859 119.566 256.086C119.566 179.314 182.872 117.47 261.458 117.47C295.294 117.47 325.855 129.199 349.867 148.392L419.721 80.1508C377.154 43.897 322.581 21.5054 261.458 21.5054C128.298 21.5054 21.3334 126 21.3334 256.086C21.3334 386.172 128.298 490.667 261.458 490.667C381.519 490.667 490.667 405.365 490.667 256.086C490.667 242.225 488.484 227.296 485.21 213.435Z" fill="white"></path></mask><g mask="url(#mask5_16694_137339)"><path d="M-0.494751 394.703L326.947 149.458L413.173 160.121L523.412 0.178467V511.993H-0.494751V394.703Z"></path></g></g><mask id="mask6_16694_137339" maskUnits="userSpaceOnUse" x="141" y="117" width="350" height="374" style="mask-type: luminance;"><path d="M141.238 117.334H490.666V490.667H141.238V117.334Z" fill="white"></path></mask><g mask="url(#mask6_16694_137339)"><mask id="mask7_16694_137339" maskUnits="userSpaceOnUse" x="21" y="21" width="470" height="470" style="mask-type: luminance;"><path d="M485.21 213.437H261.458V304.071H390.252C378.245 361.65 328.038 394.705 261.458 394.705C182.872 394.705 119.566 332.86 119.566 256.087C119.566 179.316 182.872 117.471 261.458 117.471C295.294 117.471 325.855 129.201 349.867 148.394L419.721 80.1525C377.154 43.8987 322.581 21.5071 261.458 21.5071C128.298 21.5071 21.3333 126.002 21.3333 256.087C21.3333 386.174 128.298 490.669 261.458 490.669C381.519 490.669 490.667 405.367 490.667 256.087C490.667 242.226 488.484 227.298 485.21 213.437Z" fill="white"></path></mask><g mask="url(#mask7_16694_137339)"><path d="M523.41 511.995L185.054 256.087L141.395 224.099L523.41 117.47V511.995Z"></path></g></g></svg>Google News</a></div></div>

2. Cambia la URL:
   Reemplaza https://news.google.com/publications/CAAqBwgKMP2XpAswwKK8Aw con el enlace de tu propia publicación en Google News.
3. Pega el código donde lo necesites:
   Puedes colocarlo en un widget de Blogger, en una entrada, en una página HTML o incluso en el footer de tu sitio.

Nota: Este código es compatible con cualquier plataforma web y no requiere conocimientos avanzados de programación para implementarlo.

Características del Botón

• ✅ Diseño profesional con esquinas redondeadas y sombras sutiles
• ✅ Efectos hover para mejorar la interactividad
• ✅ Animación de pulsación para llamar la atención sin ser intrusiva
• ✅ Totalmente responsive (se adapta a móviles y tablets)
• ✅ Colores coherentes con la paleta de Google
• ✅ Transiciones suaves para una experiencia de usuario fluida

¿Dónde Colocar el Botón?

Puedes añadir este botón en diferentes secciones de tu sitio web:

• Barra lateral (sidebar) para mayor visibilidad
• Footer para que los visitantes lo vean al finalizar la lectura
• Dentro de tus artículos como llamado a la acción

Conclusión

Ahora ya sabes cómo agregar un botón de Google News profesional a tu sitio web en cuestión de minutos. Este pequeño elemento puede aumentar significativamente tus seguidores y mejorar el engagement con tu audiencia.

¿Te gustó este tutorial? ¡Compártelo en tus redes sociales y ayuda a otros creadores de contenido!

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Crear botonesDiseno web

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.