Elegantes botones de DEMO y DOWNLOAD para Blogger en CSS.

Cómo agregar un DEMO y DOWNLOAD boton en blogger?
En comparación con otros CMS, el blogger necesita más personalización, ya que no admite la adición de complementos externos. Por lo tanto, tendremos que agregar un DEMO y DOWNLOAD boton en nuestro blog blogger personalizando nuestra plantilla de blogger actual.

Paso 1: Agregando Font Awesome a Blogger
Este es un paso opcional si ya ha instalado Font Awesome en su Blog Blogger. Si no lo tienen instalado sigan el siguiente paso:

1. Vaya a su Panel de control de Blogger >> Plantilla >> Editar HTML
2. Ahora haga clic en cualquier lugar en HTML y Presione Ctrl + F
3. Y buscar a </head>
4. Ahora pegue el siguiente código arriba de </head>

Nota: Haga una copia de seguridad de su plantilla antes de continuar.

<script type='text/javascript'>
    //<![CDATA[
    function loadCSS(e, t, n) {
        "use strict";
        var i = window
            .document
            .createElement("link");
        var o = t || window
            .document
            .getElementsByTagName("script")[0];
        i.rel = "stylesheet";
        i.href = e;
        i.media = "only x";
        o
            .parentNode
            .insertBefore(i, o);
        setTimeout(function () {
            i.media = n || "all"
        })
    }
    loadCSS(
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
    );

    //]]>
</script>
<noscript>
    <link
        href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'
        rel='stylesheet'/>
</noscript>

Paso 2: Agregar código CSS de los botones DEMO y DOWNLOAD.

1. Vaya a su Panel de control de Blogger >> Plantilla >> Editar HTML
2. Ahora haga clic en cualquier lugar en HTML y Presione Ctrl + F
3. Y buscar a ]]></b:skin>
4. Ahora pegue el siguiente código arriba de ]]></b:skin>

/* CSS Demo & Download Buttons By (www.TwistBlogg.com) */
.bie-slide,
 .bie-slide2 {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 170px;
  line-height: 40px;
  padding: 0;
  border-radius: 50px;
  background: #fdfdfd;
  border: 2px solid #f84f4f;
  margin: 10px;
  transition: all 0.5s ease-in-out;
 }
 .bie-slide2 {
  border: 2px solid #36D7B7;
 }
 .bie-slide:hover {
  background-color: #f84f4f;
 }
 .bie-slide2:hover {
  background-color: #36D7B7;
 }
 .bie-slide:hover span.circle,
 .bie-slide2:hover span.circle2 {
  left: 100%;
  margin-left: -45px;
  background-color: #fdfdfd;
  color: #f84f4f;
 }
 .bie-slide2:hover span.circle2 {
  color: #36D7B7;
 }
 .bie-slide:hover span.title,
 .bie-slide2:hover span.title2 {
  left: 40px;
  opacity: 0;
 }
 .bie-slide:hover span.title-hover,
 .bie-slide2:hover span.title-hover2 {
  opacity: 1;
  left: 28px;
 }
 .bie-slide span.circle,
 .bie-slide2 span.circle2 {
  display: block;
  background-color: #f84f4f;
  color: #fff;
  position: absolute;
  float: left;
  margin: 5px;
  line-height: 30px;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  transition: .5s;
  border-radius: 50%;
 }
 .bie-slide2 span.circle2 {
  background-color: #36D7B7;
 }
 .bie-slide span.title,
 .bie-slide span.title-hover,
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  position: absolute;
  left: 65px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #f84f4f;
  transition: .5s;
 }
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  color: #36D7B7;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  left: 80px;
  opacity: 0;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  color: #fff;
 }

Paso 3: Agregar HTML a las publicaciones de blogger
Pegue el siguiente código HTML en las publicaciones donde desea mostrar los botones de descarga y demostración.

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" rel="nofollow" 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>

Demo Click here Download Click here

O bien, puede usarlos por separado.

Para Demo Boton:

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
</div>

Demo Click here

Para Download Boton:

<div id="wrap" style="text-align:center">
<a class="bie-slide2" href="#" rel="nofollow" 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>

Download Click here

Cambiar # con sus links de DEMO y DOWNLOAD.
Pueden cambiar fácilmente los iconos cambiando

<i class="fa fa-laptop"></i>

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

Explore más iconos de Font Awesome desde aquí.