Como adicionar um Banner Flutuante na lateral do Blogger

Se você cansou de procurar por um banner flutuante para seu Blogger, fique tranquilo pois até que enfim você encontrou. Esse banner fica posicionado na barra lateral do seu blog, e além de personalizável ele e leve e bonito. O banner vem com uma opção para o usuário fechar a publicidade, caso ela esteja incomodando. Totalmente personalizável o banner é em especial para publicidades com as dimensões 160x600, acredito que com alguns arranjos dar para mudar isso, mas não recomendo caso você não tenha experiência com códigos.

E antes de tudo devo avisar que não é permitido utilizar anúncios do Adsense dentro desse banner, as regras proíbem isso. Porém existem milhares de programas de afiliados que permitem o uso do banner, com certeza ele lhe dará bons cliques.


Como adicionar um Banner Flutuante na lateral do Blogger


Enfim para usar o banner é bem simples, não tem complicação alguma:

1 - Vá até o painel do seu Blogger na parte do Layout.
2 - Clique em Adicionar um Gadget, e escolha HTML/JavaScript.
3 - Cole o código abaixo, aplicando as alterações necessárias.
4 - Salve e pronto, não é necessário posicionar ou nomear o Gadget.

Copie o seguinte código:

<style>
#techpistolflotads {
height:30px;
width:auto;
background: #333333 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#bsadsbase{
height:600;
margin:0auto;
width:160px;
background:#fff;
border-bottom:2px #333333 solid;
border-right:2px #333333 solid;
border-left:2px #333333 solid;
text-align:center;
padding:4px;
}
#bsadsheadline{
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:10px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}
</script>
<div id="bsadsheadline">
<div id="techpistolflotads">
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.techpistol.info" target="_blank" onclick="getValue()">FECHAR (X)</a></span>
</div>
<div id="bsadsbase">
<h3></h3>
<p align="left"><h3></h3></p>
<p>                                                                                                                         
**COLE O CÓDIGO DO ANÚNCIO AQUI!**
<br/></p></div></div>

Fim do código.

Lembre-se de que você deve alterar somente oque esta em vermelho.
Caso tenha mais experiências com códigos você pode personalizar a seu gosto.

Onde esta escrito:
**COLE O CÓDIGO DO ANÚNCIO AQUI!** - Você irá substituir pelo código do seu anúncio, você também pode adicionar imagem basta adicionar o código abaixo, lembrando que a imagem deve ter as dimensões de 160x600.
Para adicionar uma imagem: <img src="URL DA SUA IMAGEM"> 

Onde esta escrito: 
FECHAR (X) - Você pode alterar se quiser, é o botão onde o usuário irá clicar para fechar o banner.

Onde esta escrito:
http://www.techpistol.info - Você pode inserir algum link que desejar, quando o usuário clicar no botão parar fechar o banner esse link será aberto em uma nova guia. Caso não queira nenhum link basta apagar o trecho target="_blank" e substituir o link por: #

Eae gostou da dica? Se tiver alguma dúvida ou problema não esqueça de comentar ai em baixo, iremos ajudar em tudo que precisar, um forte abraço e boa sorte =D

COMPART..

João Neto

Apaixonado por jogos do gênero FPS e Simulação, amante da computação e ciências em geral. Hobbies loucos como de Produtor, Designer e Modding.

  • Image
  • Image
  • Image
  • Image

0 comentários:

Postar um comentário