Crear una tienda online en Blogger

Hoy vamos a hablar de como podemos crear una tienda on-line en Blogger.


Aunque ya sabemos que blogger solo nos deja crear 20 paginas, en este post explico como aumentarlas.
Para emprezar voy a dejar un pequeñoi resumen, de como lo vamos a hacer:

1.        Crear la tabla de la tienda para mostrar los productos
2.        Añadir las fotos, precios y demás
3.       Crear la página de venta de cada producto si es necesario.. ( eso si queremos)
4.        Opcional: Enlazar las fotos a la página de venta de cada producto si procede

Crear una tabla para mostrar nuestros productos

Para crear la tabla para mostrar nuestros productos, escribis este código Html y lo escribis en la pagina .

 <table align="center" cellpading="8">
<!--pb-shop-add-on-->
<tr>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
</tr>
<tr>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
</tr>
</table>

Yo no recomiendo más de tres columnas porque no entrarán bien en el ancho de vuestro blog.

Si necesitáis una fila más hacia abajo, tenéis que pegar abajo, después de </tr> pero antes de </table> esto de nuevo:

 <tr>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
<td valign=bottom>Foto<br>Nombre<br>Precio<br></td>
</tr>

Y si por ejemplo queréis que en lugar de tres columnas os salgan dos, deberéis borrar la línea esta <td valign=bottom>Foto<br>Nombre<br>Precio<br></td> en cada uno de los bloques:

Una vez pegado o editado de acuerdo a las filas y columnas que necesitéis, cuando cambiéis de nuevo la vista a Redactar lo veréis así más o menos:

Añadir el nombre, fotos, precios, ect..

Para añadir el nombre debemos de editar el nombre que tenemos marcado en color rojo por el que queramos.
Lo mismo pasa con el precio marcado en azul, lo cambiamos por el precio que queramos poner.

Para cambiar la parte de la foto marcado en rosa, le damos al boton de la foto de nuestro editor y lo marcamos como tamaño pequeño.

<td valign=bottom>Foto<br>Nombre<br>Precio<br>

Nos quedará así:

Nombre Precio	Foto Nombre Precio	Foto Nombre Precio
Foto Nombre Precio	Foto Nombre Precio	Foto Nombre Precio

Crear la pagina de cada producto.

NPara mostrar un resumen de cada producto y mostrar mas fotos, tendremosque creear una pagina individual para cada producto que tengamos y ocultarlas en la pestaña de paginas para que no se muestren en el menu.

<Diseño- Paginas- Editar>

y desmarcamos las que no queremos que se muestren.

Ya tenemos nuestra pagina de tienda.

Imprimir entrada