Cómo crear una tabla de especificaciones para celulares en Blogger.

Si tiene un blog relacionado con los widgets electrónicos y está buscando una buena tabla para las especificaciones de los widgets, entonces ha venido al lugar correcto. Hoy en este artículo aprenderemos a crear una tabla de especificaciones para telefonos moviles con un bonito diseño.

Como crear Tabla de Especificaciones para telefonos moviles en Blogger?

Para crear esta tabla de especificaciones en Blogger, solo necesitas agregar algunos códigos CSS y HTML, que es muy fácil de hacer. Simplemente siga los pasos dados cuidadosamente.

Paso 1. Agregar los códigos CSS

Copie el siguiente código css y péguelo antes de ]]></b:skin>

/* Specifications Table */
.wc-sp{position:relative;width:100%;line-height:15px;font-family:'Noto Sans', sans-serif;font-size:12px;color:#455065;font-weight:400;background:#ebeff3;margin-top:5px;padding:12px 0 12px 70px}.wc-sp:before{content:'';position:absolute;height:100%;width:50px;left:0;top:0;padding:10px;z-index:2}.wc-sp.icon-battery:before{content:'';background:url("data:image/svg+xml,") center / 12px no-repeat;background-size:20px 20px;background-color:#ff8008} .wc-sp.icon-dimension:before{content:'';background:url("data:image/svg+xml,") center / 12px no-repeat;background-size:20px 20px;background-color:#ff8008}.wc-sp.icon-chipset:before{content:'';background:url("data:image/svg+xml,") center / 12px no-repeat;background-size:20px 20px;background-color:#ff8008}.wc-sp.icon-storage:before{content:'';background:url("data:image/svg+xml,") center / 12px no-repeat;background-size:20px 20px;background-color:#ff8008}.wc-sp.icon-camera:before{content:'';background:url("data:image/svg+xml,") center / 12px no-repeat;background-size:20px 20px;background-color:#ff8008}.wc-sp.icon-os:before{content:'';background:url("data:image/svg+xml,") center / 12px no-repeat;background-size:20px 20px;background-color:#ff8008}

2. Agregando en el post los codigos HTML

Ahora pegue el código HTML que se proporciona a continuación donde desee agregar la tabla de especificaciones.

<!-- Specifications Table HTML Codes --> 
<div class='wc-sp icon-battery'>
<b>Battery Capacity:</b> 5000mAh
</div>

<div class='wc-sp icon-dimension'>
<b>Dimension:</b> 197g, 0mm thickness
</div>

<div class='wc-sp icon-chipset'>
<b>Chipset:</b> Qualomm Snapdragon 450
</div>

<div class='wc-sp icon-storage'>
<b>Storage:</b> 32Gb/64GB
</div>

<div class='wc-sp icon-camera'>
<b>Camera:</b> Rear, 13 MP + Front, 8 Mp
</div>

<div class='wc-sp icon-os'>
<b>OS:</b> Android 10
</div>

RESULTADOS

Battery Capacity: 5000mAh

Dimension: 197g, 0mm thickness

Chipset: Qualomm Snapdragon 450

Storage: 32Gb/64GB

Camera: Rear, 13 MP + Front, 8 Mp

OS: Android 10

3. Agregar nuevo icono en la tabla de especificaciones

Si desea agregar un nuevo ícono en la tabla de especificaciones, debe agregar el código css como se indica a continuación.

.wc-sp.icon-nameicon:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M7 22H9V24H7V22M11 22H13V24H11V22M15 22H17V24H15V22M5 4H19A2 2 0 0 1 21 6V18A2 2 0 0 1 19 20H5A2 2 0 0 1 3 18V6A2 2 0 0 1 5 4M5 8V18H19V8H5' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#ff8008}

Detalle:

1. La parte de .icon-nameicon es el nombre de la clase de icono, pueden colocar la clase de icono como quieren.
2. Mientras el icono svg, reemplácelo con su código svg, para obtener el codigo svg puede visitar https://materialdesignicons.com

El formato de escritura de HTML para el nuevo icono se muestra a continuación, tenga en cuenta que la parte que marqué es el class name, su class name debe ser el mismo class name en CSS

<div class='wc-sp icon-nameicon'><b>Title:</b> Description</div>