Cómo Crear Botones de Demostración y Descarga en Blogger

Aprende paso a paso a integrar botones de demostración y descarga en Blogger con efectos modernos de onda (ripple) utilizando HTML, CSS y JavaScript. Optimiza tus entradas y mejora la experiencia de usuario en tu sitio web de forma sencilla.

Botones de Demostración y Descarga para Blogger — Implementa botones responsivos y personalizables para tus entradas en Blogger.

¿Por qué utilizar botones de demo y descarga en tus publicaciones?

Los botones de demostración y descarga se han convertido en elementos indispensables para blogs de recursos, plantillas, juegos y tutoriales. Al presentar enlaces limpios y visualmente atractivos, aumentas la interacción de los usuarios, mejoras el CTR y profesionalizas el aspecto visual de tu plataforma.

Estos botones son totalmente personalizables y se adaptan a cualquier plantilla de Blogger de manera fluida.

Paso 1: Agregar el código CSS en tu plantilla de Blogger

Dirígete a Blogger > Tema > Editar HTML. Busca el cierre de etiqueta ]]></b:skin> o </style> e inserta el siguiente código CSS justo arriba:

#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:17px;border-radius:3px;color:rgba(255,255,255,0.8);font-weight:700;padding:12px 18px;margin:5px;box-shadow:0 2px 2px 1px rgba(255,255,255,1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e53a3a}
.tombolripple.tdua{background:#0984e3}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#e53a3a}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#0984e3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

Paso 2: Agregar el código JavaScript para el efecto Ripple

Dentro de la misma edición HTML de tu plantilla, busca la etiqueta de cierre </body> e inserta el siguiente script inmediatamente arriba antes de guardar los cambios:

<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>

Paso 3: Insertar la estructura HTML en las entradas

Para mostrar los botones dentro de tus entradas o páginas, cambia el editor a la vista HTML y pega la siguiente estructura donde desees que aparezcan:

<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="URL_DEMO" rel="nofollow" target="_blank">Demostración</a>
  <a class="tombolripple tdua ripple-effect" href="URL_DESCARGA" rel="nofollow" target="_blank">Descargar</a>
</div>