Loja virtual grátis para Blogger

Como Fazer Um Site >> Criar Blog >> Blogger >> Loja virtual grátis para Blogger



Criei uma loja virtual no Blogger.

Quer ver como ficou? Veja como funciona a loja virtual em http://loja-virtual-gratis.blogspot.com.

O sub-dominio blogspot não é muito adequado para quem está interessado em manter uma loja online, mas isso resolve-se facilmente ao registrar um domínio, por exemplo do tipo www.seusite.com e apontando-o para os servidores do Blogger.

O modelo (template) que instalei tem uma aparência muito agradável e apesar de ser gratuito parece funcionar muito bem. Os menus estão todos traduzidos para português. Tem um carrinho de compras que vai atualizando o valor conforme o cliente vai adicionando produtos, e permite que os clientes efetuem o seu pagamento quando tiverem terminado de fazer as compras na loja virtual.


Instalar Modelo da Loja Virtual

Depois de fazer download do arquivo e de o descompactar para uma pasta no seu computador, faça login na sua conta do blogger. Selecione o blog onde vai instalar o modelo da loja virtual. Clique no menu "Modelo". Clique no botão "Efetuar Cópia de Segurança / Restaurar". Na janela que se abre clique no botão para "Procurar" o arquivo XML, selecione o arquivo, e clique no botão "Carregar".

Depois do modelo ter sido instalado com sucesso, é necessário efetuar algumas configurações.


Personalizar o modelo

1. Configuração do Carrinho de Compras

O código para a configuração do Carrinho de Compras fica abaixo da tag <head>:

<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = 'seu-email-do-paypal@gmail.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
</script>

simpleCart.email
Substitua com seu endereço de e-mail do Paypal.

simpleCart.checkoutTo
Há três opções de método de pagamento, Paypal, GoogleCheckout e através de email. Para blogger só pode usar Paypal e GoogleCheckout (para receber encomendas por email era necessário PHP, o que o blogger não permite).

simpleCart.currency
Pode definir a moeda substituindo "USD" pela sua moeda. Por exemplo se quer usar euros então deve definir aquela linha do seguinte modo:
simpleCart.currency = EUR;

Para definir reais substitua "USD" por "BRL". Se o objetivo é vender para o mundo todo, sempre é possivel optar por ter a loja a funcionar em dólares.

simpleCart.cartHeaders
Não é necessário alterar.


2. Barra de menus e sub-menus

a. Para editar os links do menu superior, procure o seguinte código no HTML do modelo:

<ul id='top-nav'>
<li> <a href='#'> Início </ a> </ li>
<li> Categorias <a href='#'> </ a>
<ul class='sub-menu'>
<li> <a href='#'> Categoria 1 </ a> </ li>
<li> <a href='#'> Categoria 2 </ a> </ li>
<li> <a href='#'> Categoria 3 </ a> </ li>
</ Ul>
</ Li>
<li> <a href='#'> Contato </ a> </ li>
<li> <a href='#'> Sobre </ a> </ li>
</ul>

b. Para editar a barra de menus principal e os sub-menus procure o seguinte código:

<ul class='nav'>
<li> class='current' href='/'> Início </ a> </ li>
<li> <a href='#'>Categorias</ a>
<ul>
<li> <a href='#'> Categoria 1 </ a> </ li>
<li> <a href='#'> Categoria 2 </ a> </ li>
<li> <a href='#'> Categoria 3 </ a> </ li>
<li> <a href='#'> Categoria 4 </ a> </ li>
</ Ul>
</ Li>
<li> <a href='/p/pagina-exemplo.html'> Página </ a> </ li>
<li> <a href='#'> Instalar Loja Virtual? </ a> </ li>
<li> <a href='#'> Download </ a> </ li>
</ul>

c. Menu social

<ul id='top_social'>
<li class='social_facebook'>
<a href='#' tooltip='facebook'><span>facebook</span></a></li>
<li class='social_twitter'>
<a href='#' tooltip='twitter'><span>twitter</span></a></li>
<li class='social_rss'>
<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>
</ul>

Substitua "#" pelo endereço da página que quer que apareça no menu (válido para o ponto a, b ou c).


3. Barra Deslizante

Como configurar a barra deslizante?

Por defeito a barra deslizante mostra os posts mais recentes, mas pode configurar para mostrar por etiquetas.

Os códigos para a barra deslizante são:

<script type='text/javascript'>
//<![CDATA[
random = true;
product_image = new Array();
product_image[0] = "/noimage.png"; // Image URL for product wich have no a thumbnail.
product_image_width = 250; // Product image width.
product_image_height = 260; // Product image height.
product_image_number = 9; // Value to show item.
//]]>
</script>

e

<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/>

Para fazer com que a barra deslizante mostre os posts de uma etiqueta especifica configure o código anterior da seguinte forma:

<script type="text/javascript" src="/feeds/posts/default/-/SUA_ETIQUETA_AQUI?orderby=updated&alt=json-in-script&callback=featured_product"/>

Pode também exibir posts de outro blog:

<script src='URL_BLOG/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>


POSTS

Depois de configurar o modelo é altura de criar os seus posts.

Para ter melhores resultados com este modelo deve-se usar um modelo para os posts.

1. Criar um modelo de post.

Vá ao menu "definições" do Blogger e seleccione "Mensagens e comentários" copie o código abaixo para o campo "Mensagem de Modelo".


<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">00.00 €</span>
</div>
<div class="item_Description">
Descrição...
</div>


2. Criar um Post

Passo 1. Título do post

No título do post deve usar o nome do produto (deve ser um título curto, 2 ou 3 palavras, para que o layout da grelha de compras, onde os produtos vão aparecer, funcione bem).

Passo 2. Imagem do produto e Miniatura

Faça upload de uma imagem, tal como costuma fazer no Blogger. Selecione HTML, e copie o URL da imagem. De seguida, cole o URL da imagem no seu "modelo de mensagem" (deve substituir "product_image.jpg" pelo URL da imagem).
Para melhores resultados recomenda-se o uso de imagens de 140 × 140.

Exemplo:
<div class="item_image">
<img border="0" class="item_thumb" src="http://seu_blog.blogspot.com/produto1.jpg" />
</div>

Etapa 3. Definir o Preço

Defina o preço do produto na tag span depois imagem.

Exemplo:
<span class="item_price">00.00 €</span>

Etapa 4. Descrição do Produto

Dê uma descrição ao produto, faça-o na tag div.

Exemplo:
<div class="item_Description">
Mauris sit amet Orci Arcu, ne imperdiet quam. Praesent luctus Orci sit amet Lectus accumsan auctor id purus rhoncus. Em lorem dui, Bibendum sit amet tempor vitae, tincidunt eu nulla.
</div>

Etapa 5. Publicar

Verifique o código do seu post e certifique-se que tudo está como deve ser. Deve ficar algo como

<div class="item_image">
<img border="0" class="item_thumb" src="http://seu_blog.blogspot.com/produto1.jpg" />
<span class="item_price"> 00.00 € </ span>
</ Div>
<div class="item_Description">
Mauris sit amet Orci Arcu, ne imperdiet quam. Praesent luctus Orci sit amet Lectus accumsan auctor id purus rhoncus. Em lorem dui, Bibendum sit amet tempor vitae, tincidunt eu nulla.
</div>

E, em seguida, clique em Publicar.

 

DOWNLOAD

Faça download aqui do modelo da loja virtual para Blogger em português.

Nota: Se preferir pode fazer um download alternativo que tem as imagens do layout, imagens para criar produtos simulados, e os scripts javascript que o modelo usa para funcionar. Não precisará deste download alternativo, para pôr a loja a funcionar apenas precisa do modelo xml que se encontra no link de download que foi antes indicado. Mas se achar que pode vir a precisar dos ficheiros .js e das imagens então faça o download alternativo aqui.


Registro de Dominio:
Namecheap.com

Domínios a preços acessíveis.
Inclui serviço de privacidade gratuito.

Hospedagem para seu site:

banner de afiliado
affiliate_link
banner de afiliado

Estas são as duas empresas
de hospedagem que eu uso
para alojar os meus sites.

Criar Site Grátis:

Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2014 - ComoFazerUmSite.com
Design com Dreamweaver

.