Hoy aprenderemos a agregar un botón de descarga en una publicación de blog de Blogger con CSS y HTML.
Nuevo y hermoso código de botón de descarga responsive para Blogger 2021.
Hoy en día, hay millones de sitios web y blogs en Internet, incluidos Android, PC, aplicaciones, codificación, videos, música, noticias, blogs o sitios web de fotos, etc. Y muchos sitios web y blogs tienen algunos datos descargables para los usuarios allí. por ejemplo, cuando descarga imágenes, usa Pinterest, canciones, videos de Youtube, etc.
Si tenemos archivos para descargar, el usuario puede simplemente hacer clic en el botón de descarga para descargarlos y obtenerlos, ahora le enseñaré a crear un botón de descarga hermoso y responsive en el blog de Blogger.
Cómo agregar un botón de descarga en la publicación de Blogger 2021
1. Pegar el Codigo CSS Arriba de ]]></b:skin>
/* Heading Font */
@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2')}
.Blog .download-info{display:flex;align-items:center;margin:1.7em 0;padding:15px;border:2px solid #ebeced;border-radius:3px;font-size:13px}
.Blog .download-info .file-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;border-radius:15px;color:#fefefe;background:#ebeced linear-gradient(225deg,#00dcc0 0,#005af0 75%);font-weight:700;font-family:Poppins, sans-serif}
.Blog .download-info .file-text{padding:0 12px;width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.Blog .download-info .file-link{flex-shrink:0;display:flex;font-size:11px;margin:0 0 0 auto;padding:6px 10px}
.Blog .download-info .file-link .m-icon{width:15px;height:15px}
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe !important;background-color:#005af0;border-radius:3px;font-size:13px;line-height:22px}
.m-icon.download{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23161617" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/><polyline points="8 12 12 16 16 12"/><line x1="12" x2="12" y1="2" y2="16"/></svg>')}
.m-icon{display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center}
2. En el post de Blogger en edicion HTML pegar el sigiente codigo HTML
<div class='download-info'>
<span class='file-icon'>RAR</span>
<span class='file-text'><b>El Libro De la Selva</b></span>
<a class='button file-link' href='//mypctriksblog.blogspot.com/2021/08/como-agregar-codigo-javascript-en.html' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>
</div>
Para personalizar el boton con los datos de sus archicos deben cambiar lo siguiente:
1. Cambiar RAR con el formato de su archivo.
2. Cambiar El Libro De la Selva con su nombre de archivo.
3. Cambiar el link //mypctriksblog.blogspot.com/2021/08/como-agregar-codigo-javascript- en.html con su link de descarga.
El Libro De la Selva
Download
Failure is not the end , but the beginning for us who want to think.
<div class="colorbox purple">
Failure is not the end , but the beginning for us who want to think.
</div>
To achieve a goal , sometimes we have to take a detour . Failure is one of them.
<div class="colorbox blue">
To achieve a goal , sometimes we have to take a detour . Failure is one of them.
</div>
One person who tried and failed , is better than a thousand people who had never tried.
<div class="colorbox green">
Person who tried and failed , is better than a thousand people who had never tried.
</div>
Do not always go with the flow , be yourself.
<div class="colorbox red">
Do not always go with the flow , be yourself.
</div>
Failure is part of the effort , not the result that makes us give up so easily.
<div class="colorbox orange">
Failure is part of the effort , not the result that makes us give up so easily.
</div>