terça-feira, 29 de janeiro de 2013

Editar a Versão Mobile do Blogger Blogspot e Adicionar Adsense no site para celular

Hoje aprendi finalmente como editar a versão mobile de meu blog do Blogger / Blogspot, é muito simples galera, o próprio blogger fez um tutorial ensinando como editar veja, Tutorial do blogger, mas eu vou mostrar de uma forma mais simplificada com um passo a passo, o que vamos fazer é o seguinte, vamos colocar um anúncio do adsense em nosso blog versão para celular, la no site do Google Adsense você encontra a opção de anuncio de conteudo para celular, então você não deve usar essa opção pelo seguinte motivo, esses anuncios são para a queles celulares mais antigos que não suportam o JavaScript, mas na boa, não vamos nos preocupar com esses aparelhos né galera, vamos focar nos smartphones mais modernos como iPhone, Android e Windows Phone, então você pode usar um anúncio do Adsense normal para colocar em um site para celular, mas você só deve escolher o tamanho certo que é 320 x 50 que é o único modelo para celular que tem quando você cria um novo bloco de anuncio, depois disso você vai colar o código em um Gadget do tipo HTML la no layout do seu blog, coloque o seguinte título "Ola galera", só pra gente achar ele depois la no código, posiciona esse gadget em cima das postagens no layout, salve e abra a página dos modelos, entre em personalizar modelo para celular e escolha a opção "Personalizada", depois disso saia e abra a opção Editar HTML de seu blog mesmo, depois clique em "Expandir modelos de widgets", então aperte ctrl + F, vai servir para acharmos onde esta o gadget de nosso anuncio, então digite "Ola Galera", então esse ola galera vai estar em uma tag parecida com essa:

<b:widget id='HTML3' locked='false' title='Ola galera' type='HTML'>

Agora o que você tem que fazer é adicionar o atributo mobile para dizer se esse gadget vai aparecer na versão para celular, na versão para desktop ou nos dois, nesse caso vamos dizer para esse gadget aparecer apenas na versão para celular de nosso site, então basta adicionar mobile='only' em nossa tag, vai ficar assim:

<b:widget id='HTML3' locked='false' mobile='only' title='Ola galera' type='HTML'>

Pronto galera, é simples até de mais, você pode colocar mobile='yes' para aparecer nos dois modelos, você também pode editar o css de seu modelo para celular, basta adicionar .mobile antes de pegar uma classe, por exemplo:

.mobile .quadradolateral{

}

Mas leia mais o tutorial do blogger para entender como editar o css, então está ai resolvido como editar a versão mobile de seu blog do Blogger/Blogspot facilmente.

Um comentário:

faelsite disse...

Parabéns cara, vc através de uma coisa simples me ajudou MUITO. Obrigado de verdade.