Batendo de novo na mesma tecla, que “é possível sim desenvolver projetos profissionais com o Blogger”, trouxe aqui um template que permite a criação de uma loja virtual, com carrinho de compras, página e galerias de produtos, e tudo isso sem sair do blogspot.

Trata-se do template Blogger Store, veja a demonstração e saiba como usá-lo.

Demo | Download

Publicando um produto

Modelo de Postagem

Depois de instalar o template, vá até as configurações, no painel do Blogger, e na guia Postagens e Comentários, procure por Modelo de postagem, clique em adicionar e cole o código abaixo:
<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”>
Descriptions…
</div>

Publicar produto

Crie uma nova postagem, e em modo edição de html, cole o código abaixo:
<div class=”item_image”>
<img border=”0″ class=”item_thumb” src=”http://example.com/product_image.jpg” />

<span class=”item_price”>$00.00</span>

</div>

Altere a url da imagem pela do produto desejado, o tamanho recomendado é 140×140.
Substitua o $00.00 pelo preço do seu produto.

Agora cole o código a seguir logo abaixo:
<div class=”item_Description”>
Digite aqui a descrição do produto
</div>

Lembre-se de descrever o produto no código acima.

Visualize a postagem, se estiver tudo certo cilique em publicar.

Como personalizar este template?

Definindo carrinho de compras:

No template em edição, procure pelo código abaixo, e realize as substituições necessárias:

<Script type = ‘text / javascript ” >
//<![ CDATA [
/ * CONFIGURAÇÃO CART SIMPLES
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = ‘[email protected]’ ;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = [ ‘name’ , ‘thumb_image’ , ‘Quantity_input’ , ‘incremento’ , ‘diminuir’ , ‘Total’ ];
//]]>
</ Script>

Substituições:

simpleCart.email
Digite seu email

simpleCart.checkoutTo
Escolha entre Paypal e GoogleCheckout, são os métodos de pagamento aplicáveis.

simpleCart.currency
Escolha da moeda (real, dólar, euro…)

Menu do topo

Procure por <ul id=’top-nav’> e altere os # pelos links desejado, e os títulos correspondentes, como Home, About, Contact, que também podem ser alterados, excluídos, adicionar outros, etc.

Menu DropDown

Procure por <ul class=’nav’>
<li><a class=’current’ href=’/’>Home</a></li>

e faça as modificações desejadas (links e texto) no código que se segue.

Menu Social

Procure pelo código abaixo
<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_linkedin’>
<a href=’#’ tooltip=’linkedin’><span>linkedin</span></a></li>
<li class=’social_rss’>
<a href=’#’ tooltip=’linkedin’><span>linkedin</span></a></li>
</ul>

e altere os # pelos links de seus perfis nas redes sociais

O esquema de cores do layout pode ser realizado pelo Design Modelo do Blogger

Considerações finais

O template Blogger Store é excelente para quem quer criar uma loja virtual, vender infoprodutos, revender, ou até criar uma loja virtual com produtos vindos de programas de afiliados, pode ser lucrativo, não? Abraços, e espero que alcance o sucesso esperado com sua loja.