21 de julho de 2011

Como criar inventário boo-box para exibir anúncios em seu site

Postado por

Este tutorial irá ajudá-lo a criar um código de inventário boo-box e inseri-lo em seu blog para que você possa ganhar dinheiro exibindo as campanhas dos anunciantes da boo-box. Caso prefira, faça o download do material aqui.

Gerando o código de inventário

1) Faça seu login no site da boo-box e acesse seu painel administrativo .

2) Na caixa “Criar Inventário”, clique no botão “Criar

criar inventário na boo-box

3) No item 1, selecione o formato de banner que deseja trabalhar. No item 2 copie o código gerado para o formato escolhido.

criar inventário script

Com o código gerado, é hora de inclui-lo no seu blog. Veremos o processo no Blogspot e no WordPress, que são as plataformas mais conhecidas.

Adicionando um inventário no Blogspot

1) Vá ao seu painel administrativo do Blogspot. Clique na seta ao lado do botão com “páginas” desenhadas e escolha a opção “Layout”:

blogspot layout

2) Em Layout, clique em “Adicionar um Gadget” na área em que você desejar adicionar o código do banner.

add gadget blogspot

3) Ao clicar em “Adicionar um Gadget”, será aberta uma janela pop-up com várias opções. Clique em “HTML/JavaScript”

criar gadget html no blogspot

4) Agora, cole o código que foi gerado no painel da boo-box e clique em “Salvar”.

criando banner boo-box no blogspot

Pronto! Seu widget com um inventário da boo-box já estará funcionando! (:

Adicionando um inventário no WordPress

ps* a plataforma do WordPress é uma das melhores plataformas para blogs, porém ela limita um pouco a ação do administrador. Para conseguir trabalhar com algumas linguagens de programação (como o Javascript, por exemplo), o administrador do site precisa ter um domínio próprio do site (ao invés de “boo-box.wordpress.com” ficará “boo-box.com”) e hospedar esse domínio à parte. Infelizmente mesmo adquirindo o wordpress premium não será possível trabalhar com o Javascript nele, é necessário contratar um servidor para hospedar o domínio do site.

1) Acesse o painel administrativo do seu site no WordPress. No menu do lado esquerdo, clique em Aparências e depois em “Widgets”.

criando widget no wordpress

 

 

2) Identifique um widget do tipo “Texto” e arraste-o para a barra lateral do site.

Dependendo do tema que você está utilizando, você pode ter várias barras laterais disponíveis (ou superior, inferior, etc). No nosso exemplo existe duas barras laterais (“sidebar home”, e “sidebar page”) , mas isso não fará muita diferença no final, pois irá interferir apenas no posicionamento do banner na página.

criar widget no wordpress

3) Agora basta colar o código de inventário gerado no painel da boo-box no widget recém adicionado

widget boo-box wordpress

Pronto! Ao visualizar seu blog você já verá um inventário da boo-box na barra lateral, ou onde você decidiu adicioná-lo! (:

Adicionando um inventário no Tumblr

Como o Tumblr não trabalha com widgets, a edição será diretamente no código HTML do site, portanto antes de começar a mexer, salve o HTML original para ser possível reverter o processo por completo em qualquer situação.

1) Acesse o painel adminstrativo do seu Tumblr e clique no ícone semelhante a uma “endrenagem” na parte superior da página para acessar o painel de personalização da sua página.

tumblr 1

 

 

2) Clique na opção “Editar HTML” para abrir a página com o código fonte do site.

tumblr 2

3) Através da edição em HTML existem diversas opções de onde adicionar o script de inventário. Se você não é um expert em HTML pode ficar intimidado e será necessário estudar um pouco o layout do seu site a fim de identificar o melhor local para adicionar o script. Após identificar o local, basta apenas colar o script da boo-box.

tumblr 3

Depois de colar o código, clique em “Update preview” que você verá onde o banner foi adicionado, antes de sair dessa tela clique em “Save” para salvar todas as alterações feitas no Tumblr. Pronto! Seu inventário está criado (:

Adicionando um inventário em outras plataformas

O inventário da boo-box é desenvolvido em Javascript, portanto, todas as plataformas que suportarem essa linguagem técnica estão aptas a veicular os banners da boo-box.

Se a plataforma de seu blog ou site não oferecer a criação de um widget facilmente, você pode adicionar o código de inventário diretamente no código fonte do seu site. Nesse caso, o processo é semelhante ao do Tumblr no qual é necessário abrir a edição do HTML do site, identificar o local o qual você deseja que o banner seja adicionado e colar o script diretamente no HTML do site.

Caso tenha algum problema ou dúvida, entre em contato com o suporte oficial da boo-box: [email protected]