BOTONES DE DESCARGA PARA BLOGGER

BOTONES DE DESCARGA PARA BLOGGER.

 

Blogger es una genial plataforma muy flexible y se pueden editar muchos aspectos, como es el caso de los botones de descarga, con algo de CSS se pueden lograr grandes cosas como los botones que presentamos hoy:

Para agregar este truco a tu blog pega el siguiente código justo antes de  ]]></b:skin>

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

#wrap {

    margin: 20px auto;

    text-align: center;

}

#wrap br {

    display: none;

}

.btn-slide, .btn-slide2 {

    position: relative;

    display: inline-block;

    height: 50px;

    width: 200px;

    line-height: 50px;

    padding: 0;

    border-radius: 50px;

    background: #fdfdfd;

    border: 2px solid #0099cc;

    margin: 10px;

    transition: .5s;

}

.btn-slide2 {

    border: 2px solid #efa666;

}

.btn-slide:hover {

    background-color: #0099cc;

}

Ahora en la edición html de una entrada pega lo siguiente:

<div id="wrap">

<a href="URL DEL ENLACE" class="btn-slide" target="_blank">

  <span class="circle"><i class="fa fa-rocket"></i></span>

  <span class="title">Demo</span>

  <span class="title-hover">Click here</span>

</a>

<a href="URL DEL ENLACE" class="btn-slide2" target="_blank">

  <span class="circle2"><i class="fa fa-download"></i></span>

  <span class="title2">Download</span>

  <span class="title-hover2">Click here</span>

</a>

</div>

Fecha de la Publicación;  16/11/2020

Fuente miltrucosblogger.

Publicado por: