Botones estilo “Flat Design”

2/12/2018

Botones de descarga y demo.

Estos botones son muy utiles si en tu blog sueles poner descarga de documentos.

Para agregarlos nos tenemos que ir a

Tema > Editar HTM

Buscamos ]]></b:skin> y justo antes pegamos este codigo

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Ahora cada vez que vallas a usar los botones añades este codigo a tu entrada

<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="URL ENLACE" target="_blank">Demo</a></li> <li><a class="download" href="URL ENLACE" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>

Cambiamos lo marcado en azul por el url del enlace

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso