Cómo crear cajas en material design en blogger

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.

Mira También¿Cómo agregar un archivo robots.txt personalizado en Blogger?

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>.

Mira TambiénCómo crear un botón bookmark en blogger
/* 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.

<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>
<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>
<div class="bloggerprobox box-yellow">
<h2>Lista</h2>
<ul>
<li>texto 1</li>
<li>texto 2</li>
</ul>
</div>
<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.

Mira TambiénCómo dividir publicaciones en varias páginas en Blogger

Felipe Arango

Siento una pasión desbordante por la ciencia y la tecnología, y disfruto enormemente plasmar mis pensamientos en palabras sobre estos temas. He dedicado muchos años a esta tarea, y no puedo imaginar un lugar mejor que miwebperfecta.com para expresar libremente mis instintos.

Ultimas Entradas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Usamos cookies para ofrecerte la mejor experiencia en nuestra web. Haciendo clic en “Aceptar” das tu consentimiento para usar estas cookies. Más información