Bienvenidos a un nuevo post, voy a compartir un tutorial de cómo añadir el botón de demostración y el botón Descargar para blogger. Este tutorial puede ayudar a que los blogs sobre la plantilla blogger quede con una mejor presentación. Estos botones de Demo y Download se crean con CSS para que tenga una mejor vista. Dos icono se toman de fontawesome. Los pasos son sencillos, aquí les dejamos los pasos:
1. Ir a la Plantilla
2. Edit HTML
3. Colocar después de <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Colocar el código CSS antes de </ b: skin> o </ style> o antes de ]]> </ b: skin> o </ style>
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:400;font-size:16px;font-family:'Titillium Web', sans-serif;text-align:center;border-radius:3px;border:0;transition:all .2s ease-out}
.demo {background-color:#2D9E3B;}
.download {background-color:#1A66BC;}
.demo:hover {background-color:#35BA45; opacity:1;}
.download:hover {background-color:#2073D2;opacity:1;}
.demo:before {content:'\f04b';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
4. Colocar el código HTML en las Entradas y Listo
<div style="text-align: center;"><ul class="btn"><li><a class="demo" href="colocar-enlace" target="_blank"> Demo</a></li>
<li><a class="download" href="colocar-enlace" target="_blank"> Download</a></li>
</ul></div>
