Como Crear Botones Demostración y Descarga en Blogger - Tutoriales Gratis de Internet

Como Crear Botones Demostración y Descarga en Blogger


Como crear Botones de Demostración y Descargas para utilizarlo en las publicaciones dentro de la plataforma de sitios web en blogger, estos botones se han convertido en una de los principales formas de monetizar un blog en blogger, por esa razón debemos implementar botones de demostración y descarga actualizado para que se adapte a nuestro sitio web.

Estos botones demostración y descarga pueden ser modificados de una manera sencilla y se adapta a diferentes tipos de plantillas blogger, donde solo modificaremos los enlaces url de descargas y demostración respectivamente.



Para Implementar los Botones de demostración y descarga en Blogger debemos completar las siguiente opciones:
 
Nos dirigimos a Blogger / Tema / Editar HTML. Aquí buscar y colocar el siguiente código CSS arriba del cierre de ]]></b:skin>  o  </style>

#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)}}


En el siguiente paso colocaremos el siguiente código Script arriba del código de cierre  </body> y guardaremos 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>


 Para colocar los botones dentro de las entradas o paginas, debemos implementar el siguiente código html en la opción de edición Vista HTML en cada entrada donde deseamos colocar los botones de demostración y descarga.
 
<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demostración</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Descargar</a>
</div>

Debemos reemplazar el símbolo numeral # por el enlace url de la demostración y el enlace url de descarga de archivos.

 





Comparte este artículo en tus Redes Sociales

5 comentarios