Vender marcando la diferencia: Crear una tienda en Blogger

agosto 07, 2014

Crear una tienda en Blogger

Entradas que forman esta serie:



  • Beneficios de tener un blog. Leer 
  • Las Emociones. Leer
  • La descripción PerfectaLeer
  • La Foto PerfectaLeer
  • Generando confianza. Leer
  • Hacer una tienda en Blogger. Leer

  • Ya sabemos lo básico para empezar a crear una tienda en blogger. Recuerda tener listas las fotos maravillosas de tus productos y las diferentes descripciones que vas a utilizar para transmitir las emociones que has elegido.


    Para crear nuestra tienda vamos a usar una página en blanco en Blogger, tablas html y paypal. Por lo que te recomiendo echar un vistazo a esta entrada:


    Y descargar el libro sobre Comprar y Vender con Paypal que puedes encontrar aquí:


    ¿Tienes ya todo listo? ¡Pues vamos allá!



    PÁGINA DE INICIO


    En nuestra primera página en blanco crearemos las categorías principales de nuestra tienda. Vamos a usar, para ello, banners genéricos previamente diseñados con el nombre de cada una de nuestras categorías y una tabla HTML.

    1.- En el panel de Blogger vamos a: Páginas >> Página Nueva



    2.- Añadimos el nombre de la página donde expondremos las categorías principales de nuestra tienda y pasamos a vista HTML para incluir nuestra tabla.



    3.- Lo primero es decidir si queremos que en esta página-escaparate se muestre la sidebar y otros elementos de nuestro blog. Para ocultar algunas partes, usaremos este código:

    <style>
    /* Ocultar-Modificar parte de la estructura original */
    .main-inner .header-inner .fauxcolumn-right-outer, .sidebar, .post-footer, .comments, .blog-pager, .feed-links { display: none;width: 0;}
    .main-inner, .main-inner .columns {padding: 0;}
    .header-inner .Header .titlewrapper {padding: 0 30px;}
    .post img {padding:0;border:0;}
    </style>

    Tal y como está, en la página principal no aparecerá la sidebar, el pie de las entradas, los comentarios ni la páginación. Será como una portada.

    4.- Este código lo pegaremos tal y como está en nuestra entrada en Vista HTML así:


    <div dir="ltr" style="text-align: left;" trbidi="on">

    <style>

    /* Ocultar-Modificar parte de la estructura original */
    .main-inner .header-inner .fauxcolumn-right-outer, .sidebar, .post-footer, .comments, .blog-pager, .feed-links { display: none;width: 0;}
    .main-inner, .main-inner .columns {padding: 0;}
    .header-inner .Header .titlewrapper {padding: 0 30px;}
    .post img {padding:0;border:0;}
    </style>
    <br /></div>


    4.- Ahora sí, vamos a crear nuestra tabla, donde añadiremos las imágenes de nuestras categorías:

    <table align="center" cellpadding="5" cellspacing="50" >
    <tbody>

    <tr>

    <td><a href="URL DE LA PÁGINA DE ESA CATEGORÍA" style="display: inline-block;" target="_blank"><img src="URL IMAGEN CATEGORIA 1" /></a></td>


    <td><a href="URL DE LA PÁGINA DE ESA CATEGORÍA" style="display: inline-block;" target="_blank"><img src="URL IMAGEN CATEGORIA 2" /></a></td>

    <td><a href="URL DE LA PÁGINA DE ESA CATEGORÍA" style="display: inline-block;" target="_blank"><img src="URL IMAGEN CATEGORIA 3" /></a></td>

    </tr>

    <tr>

    <td><a href="URL DE LA PÁGINA DE ESA CATEGORÍA" style="display: inline-block;" target="_blank"><img src="URL IMAGEN CATEGORIA 4" /></a></td>

    <td><a href="URL DE LA PÁGINA DE ESA CATEGORÍA" style="display: inline-block;" target="_blank"><img src="URL IMAGEN CATEGORIA 5" /></a></td>

    <td><a href="URL DE LA PÁGINA DE ESA CATEGORÍA" style="display: inline-block;" target="_blank"><img src="URL IMAGEN CATEGORIA 3" /></a></td>

    </tr>


    </table>

    Recuerda que puedes añadir tantas categorías como necesites, para ello consulta la entrada sobre tablas HTML y recuerda:

    <tr></tr> es una fila.
    <td></td> es una celda.

    En el código del ejemplo, hay dos filas (<tr></tr>) con tres celdas cada una (<td></td>).


    5.- El siguiente paso es más sencillo, solo tienes que poner los enlaces a las páginas creadas para cada categoría y los enlaces a tus imágenes genéricas que previamente debes haber subido a Picasa, Dropbox o cualquier otra web de alojamiento de imágenes online.

    Si llegados a este punto aún no has creado el resto de páginas de tu tienda, ¡no te preocupes! Solo tienes que darle a guardar en la página actual que estás programando y crearlas. 



    Ahora que ya las tienes creadas, pasa el ratón por debajo del título, para que aparezcan las diferentes opciones y pincha en Ver. Así conseguirás el enlace a cada una de ellas.




    Copia el enlace que vuelca tu navegador al estar viendo la página seleccionada y ve anotándolos para añadirlos posteriormente a nuestra página de inicio de la tienda.


    6.- Volvemos a editar nuestra página de Inicio y añadimos las URLs tanto de las páginas como de las diferentes imágenes que hemos creado para las categorías principales.

    El resultado, si pinchamos en Vista Previa, sería similar a este:

    Imagen tomada del blog Rose Moustache

    Publicamos nuestra página y accediendo a ella, podemos ver como al pinchar en cada categoría se abre la nueva página asignada a la misma.


    PÁGINA DE CATEGORÍA


    Ahora vamos a crear nuestra primera página de productos, con las fotos de cada uno de ellos, una breve descripción y el enlace de compra a Paypal.

    1.- En Vista HTML pegamos de nuevo el código para ocultar algunos de los elementos de nuestro blog, dándole así un aspecto tipo web, y nuestra nueva tabla:


    <style>

    /* Ocultar-Modificar parte de la estructura original */

    .main-inner .header-inner .fauxcolumn-right-outer, .sidebar, .post-footer, .comments, .blog-pager, .feed-links { display: none;width: 0;}
    .main-inner, .main-inner .columns {padding: 0;}
    .header-inner .Header .titlewrapper {padding: 0 30px;}
    .post img {padding:0;border:0;}
    </style>

    <table align="center" cellpadding="5" cellspacing="50">
    <tbody>
    <tr>

    <td><img src="URL IMAGEN PRODUCTO 1" /></a></td>


    <td><img src="URL IMAGEN PRODUCTO 2" /></a></td>


    <td><img src="URL IMAGEN PRODUCTO 3" /></a></td>

    </tr>
    <tr>

    <td><center>DESCRIPCIÓN PRODUCTO 1</center></td>

    <td><center>DESCRIPCIÓN PRODUCTO 2</center></td>

    <td><center>DESCRIPCIÓN PRODUCTO 3</center></td>

    </tr>
    <tr>

    <td><center>BOTÓN PAYPAL PRODUCTO 1</center></td>

    <td><center>BOTÓN PAYPAL PRODUCTO 2</center></td>

    <td><center>BOTÓN PAYPAL PRODUCTO 3</center></td>

    </tr>
    </tbody></table>

    NOTA >> La descripción de tus productos puedes editarla en Vista Redactar una vez hayas copiado el código en Vista HTML.


    2.- Ponemos los enlaces correspondientes a nuestros productos en las tres celdas de la fila 1. La descripción irá justo debajo, en la fila 2. Y, por último, el enlace a Paypal en la fila tres.

    Puedes crear otra nueva tabla de productos añadiendo el mismo código justo debajo. Si te quedan muy juntas, solo tienes que añadir un par de <br/> para dejar espacios en blanco en Vista HTML. Así:

    <table align="center" cellpadding="5" cellspacing="50">
    <tbody>
    <tr>

    <td><img src="URL IMAGEN PRODUCTO 1" /></a></td>


    <td><img src="URL IMAGEN PRODUCTO 2" /></a></td>


    <td><img src="URL IMAGEN PRODUCTO 3" /></a></td>

    </tr>
    <tr>

    <td><center>DESCRIPCIÓN PRODUCTO 1</center></td>

    <td><center>DESCRIPCIÓN PRODUCTO 2</center></td>

    <td><center>DESCRIPCIÓN PRODUCTO 3</center></td>

    </tr>
    <tr>

    <td><center>BOTÓN PAYPAL PRODUCTO 1</center></td>

    <td><center>BOTÓN PAYPAL PRODUCTO 2</center></td>

    <td><center>BOTÓN PAYPAL PRODUCTO 3</center></td>

    </tr>
    </tbody></table>

    <br/><br/>

    <table align="center" cellpadding="5" cellspacing="50">
    <tbody>
    <tr>

    <td><img src="URL IMAGEN PRODUCTO 4" /></a></td>


    <td><img src="URL IMAGEN PRODUCTO 5" /></a></td>


    <td><img src="URL IMAGEN PRODUCTO 6" /></a></td>

    </tr>
    <tr>

    <td><center>DESCRIPCIÓN PRODUCTO 4</center></td>

    <td><center>DESCRIPCIÓN PRODUCTO 5</center></td>

    <td><center>DESCRIPCIÓN PRODUCTO 6</center></td>

    </tr>
    <tr>

    <td><center>BOTÓN PAYPAL PRODUCTO 4</center></td>

    <td><center>BOTÓN PAYPAL PRODUCTO 5</center></td>

    <td><center>BOTÓN PAYPAL PRODUCTO 6</center></td>

    </tr>
    </tbody></table>


    Y así ¡hasta el infinito!


    3.- Este es el código que he usado yo en mi página de ebook gratis:


    Verla funcionando AQUI

    Cambiando un poco la disposición de las filas. Pero eso seguro que tú también puedes hacerlo con un poco de practica y repasando la entrada que te comentaba sobre crear tablas en HTML:



    Ya solo te queda hacer lo mismo con cada una de tus páginas creadas y ¡mostrar todo lo que tienes que ofrecer a todo el mundo! 

    ¿Te animas a hacerlo? 

    ¡Cuando la tengas lista, déjame el enlace en comentarios! Me encantará verla.






    Suscríbete a mis entradas por email ¡para no perderte nada!





    ♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






    Te encantará:

    6 pensamientos ¡falta el tuyo! ;)

    1. Me viene genial!!! a ver si voy teniendo más tiempo y lo voy haciendo poco a poco :)

      ResponderEliminar
    2. ¡Ole! muchas gracias. Ya tenia montada mi "tienda" gratuita pero no sabia el truco de ocultar todo para que solo se vea la tienda... Lo he hecho y queda genial

      Besos

      ResponderEliminar
    3. Mil gracias estoy montando la mia poco a poco. Lo explicas todo muy bien. Me falta un poco de informacion de como empezar una tienda "legalmente". Tienes algun post sobre ese asunto?. Cuando la tenga montada te pondre el enlace en comentarios. un beso

      ResponderEliminar
      Respuestas
      1. ¡Hola Ana Maria!

        No, lo siento mucho, sobre ese tema sé lo básico para la parte que me toca :)

        Lo mejor es que te pases por Hacienda, allí te explicarán al detalle todo lo que necesites saber.

        ¡Besos!

        Eliminar
    4. Hola Celia, a mí no me funciona bien. No se ven las imágenes aunque las he enlazado correctamente y no sé qué hacer. Y en cuanto al texto, tengo que incluir espacios para que no se salga de la página porque sino, se mete en la table siguiente... ¿Alguna manera de solucionar esto?

      ResponderEliminar
    5. Este comentario ha sido eliminado por el autor.

      ResponderEliminar



    ¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



    El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

    Safe Creative #1408270134965
    Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.