Cómo crear cajas en material design en blogger

Las cajas de diseño de material design son adecuadas cuando se usan en sitios web temáticos de ventas o servicios, como tiendas en línea o páginas de destino.

Cómo crear cajas en material design en blogger

hola a todos, en esta ocasión les compartiré un tutorial enseñándoles cómo hacer una caja de descripción en material design para embellecer el aspecto de su blog.

Los cuadros de diseño de materiales como este serán adecuados si se usan en sitios temáticos de ventas o servicios, como tiendas en línea o páginas de destino, que pueden explicar un producto o servicio que se vende de manera completa y concisa.

Para la demostración que puedes ver en esta publicación, para aquellos que quieran hacerlo, veamos a continuación.

Cómo hacer una descripción de la caja de diseño de materiales

Acceda a Blogger, seleccione Tema y Editar Html, copie el css a continuación y colóquelo sobre el código ]]></b:skin>.

/* material design box */
.bloggerprobox{background-color:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.bloggerprobox h2 {background-color:#02d07a;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase}
.bloggerprobox.box-yellow h2{background:#e2c601}
.bloggerprobox.box-blue h2{background:#2ad2c9}
.bloggerprobox.box-red h2{background:#f7176a}

/* table detalles */
table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background-color:transparent}
table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}

/* css modo oscuro ajuste la clase si es diferente o elimine esta sección
*/
.darkMode .bloggerprobox{background-color:#2d2d30;color:#fefefe;}
.darkMode .bloggerprobox table,.darkMode .bloggerprobox table td,.darkMode .bloggerprobox{border-color:rgba(255,255,255,.15);color:#fefefe}

Vea lo simple que es, simplemente copie uno de los códigos a continuación y póngalo en su publicación.

caja material design verde
<div class="bloggerprobox">
<h2>Descripción</h2>
<!--su texto aqui--> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>
caja material design azul
<div class="bloggerprobox box-blue">
<h2>Descripción</h2>
<!--su texto aqui--> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
caja material design lista
<div class="bloggerprobox box-yellow">
<h2>Lista</h2>
<ul>
<li>texto 1</li>
<li>texto 2</li>
</ul>
</div>
caja material design tabla
<div class="bloggerprobox">
<h2>Tabla</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nombre</b></td> <td>luis miguel</td></tr>
<tr><td><b>Licencia</b></td> <td>Personal</td></tr>
<tr><td><b>Version</b></td> <td>1.0</td></tr>
<tr><td><b>Precio</b></td> <td>$ 100.00</td></tr>
</tbody>
</table>
</div>

Guardar y ver los resultados.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Subir