BOTONES DE DESCARGA Y DEMO PARA TU BLOG DE BLOGGER

by Blogs Famag - noviembre 10, 2020

BOTONES DE DESCARGA Y DEMO PARA TU BLOG DE BLOGGER.

Este tipo de diseño se caracteriza por dejar a un lado todo tipo de sombras, relieves, texturas y degradados. Es reconocido como el diseño auténticamente digital.

Para agregar el primer estilo de botones que se muestra en la imagen (los más grandes), ve a Plantilla, Editar HTML y antes de ]]></b:skin> agrega lo siguiente:

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

1 Un clic en “Plantilla”

2 Un clic en “Editar HTML”

Ahora se te abrirá el Editor HTML de tu plantilla

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

3 Busca el siguiente código

]></b:skin>

Cuando lo hayas Encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

antes de ]]></b:skin> agrega lo siguiente:

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}

.button2 ul{margin:0;padding:0}

.button2 li{display:inline;margin:5px;padding:0;list-style:none}

.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}

.button2 li a.download{background:#3498db}

.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}

.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}

.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';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:16px 24px;font-family:fontawesome;transition:all .3s}

.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Ahora en la edición html de una entrada o página (este paso lo debes repetir cada vez que quieras usar los botones) pega lo siguiente:

<li><a class="download" href="URL ENLACE" target="_blank">Download</a></li>

</ul>

</div>

Los valores resaltados en azul son los que se puedes editar.