////agregar botón de descarga Responsive en post de Blogger

agregar botón de descarga Responsive en post de Blogger

R. Aleksiev
R. Aleksiev
Saturday, April 4, 2020

Agregar DOWNLOAD u otro botón en Blogger: haga su blog o sitio simple pero lindo para atraer lectores. Hoy voy a compartir consejos para que tu blog dé un paso más en los estandares web. Agregua DOWNLOAD o cualquier otro Botón en su Blog con CSS y HTML simples.
En el uso de Wordpress esto se puede hacer facil con Wordpress MaxButton Plugin. Si está buscando crearlos en su blog Blogger Blogspot, entonces este tutorial es para usted.

Nota: Haga una copia de seguridad de su plantilla actual por seguridad

Vamos a hacerlo en algunos simples pasos :

  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 </style> - encontraras más, pero funcciona solo con el último
  4. Ahora pegue el siguiente código arriba de </style>

@charset "UTF-8";
.post-footer { margin-top:30px; }

.share-post,
.multiauthor-box { margin-bottom:50px; }

.share-post ul {
  padding:0;
  margin:0;
  text-align:center;
}

.share-post li {
  list-style:none;
  display:inline-block;
  margin-right:10px;
  padding:0;
  font-weight:700;
  text-transform:uppercase;
}

.share-post li:first-child {
  font-size:16px;
  color:#22a1c4;
}

.share-post li a {
  display:block;
  text-align:center;
}

.share-post span { display:none; }

.share-post li a i {
  display:block;
  color:#fff;
  width:40px;
  height:40px;
  line-height:40px;
  font-size:18px;
  border-radius:40px;
  font-weight:normal;
  transition:all .3s;
}

.share-post {
  margin-bottom:30px;
  border-top:1px solid #eff0f0;
  border-bottom:1px solid #eff0f0;
  line-height:52px;
  min-height:52px;
  margin-left:-30px;
  margin-right:-30px;
}

.share-post li a i.fa.fa-facebook {
  background:#3b5998;
  border:1px solid transparent;
}

.share-post li a i.fa.fa-twitter {
  background:#19bfe5;
  border:1px solid transparent;
}

.share-post li a i.fa.fa-google-plus {
  background:#d64136;
  border:1px solid transparent;
}

.share-post li a i.fa.fa-linkedin {
  background:#006699;
  border:1px solid transparent;
}

.share-post li a i.fa.fa-pinterest {
  background:#cb2027;
  border:1px solid transparent;
}

.share-post li a i.fa.fa-facebook:hover {
  background:#fff;
  color:#3b5998;
  border:1px solid #4666aa;
}

.share-post li a i.fa.fa-twitter:hover {
  background:#fff;
  color:#19bfe5;
  border:1px solid #2acef4;
}

.share-post li a i.fa.fa-google-plus:hover {
  background:#fff;
  color:#d64136;
  border:1px solid #e95247;
}

.share-post li a i.fa.fa-linkedin:hover {
  background:#fff;
  color:#006699;
  border:1px solid #017ab6;
}

.share-post li a i.fa.fa-pinterest:hover {
  background:#fff;
  color:#cb2027;
  border:1px solid #e33239;
}

Finalmente "Guardar Plantilla"

Ahora vaya a "POST" >> Agregar nueva entrada o Editar entrada >> Ingrese debajo el código HTML 

<html>
 <head></head>
 <body>
  <div style="text-align: center;"> 
   <ul class="btn"> 
    <li><a class="demo" 
href="YOUR-LINK-HERE" 
target="_blank">Button 1</a></li> 
    <li><a class="download" 
href=" YOUR-LINK-HERE" 
target="_blank">Button 2</a></li> 
   </ul> 
  </div>
 </body>
</html>

Si desea cambiar la posición de su botón, entonces cambie simple con el siguiente código 

<div style="text-align: right;">
<div style="text-align: left;">
<div style="text-align: center;"


Nota: cambie el nombre de su botón en el Botón 1 y Botón 2 También puede agregar más agregando la etiqueta a continuación 

<li><a class="demo" href="YOUR-LINK-HERE" 
target="_blank">Button Add </a></li>

Reemplace "YOUR-LINK-HERE" con su Link

RESULTADOS




R. Aleksiev Saturday, April 4, 2020 Tags: Blogger, Code, CSS

SeeClose Comments