[Blogger - Hacks] - Mostrar gadget apenas para leitores que usam o Internet Explorer

Recentemente eu escrevi um artigo ensinando como mostrar um alerta para os leitores que acessam o blog utilizando o navegador Internet Explorer. A ideia de mostrar o alerta surgiu pelo fato de muitos blogs e sites não serem exibidos adequadamente em tal navegador. No artigo que eu citei acima, o leitor Dymas, comentou falando o seguinte: "(...) E enche o saco ter que visitar seu blog e ficar aparecendo isso", e se pararmos para pensar, ele tem toda razão.


O alerta aparecer toda vez que a página é recarregada é muito incômodo — e pode até espantar o leitor. E foi por esse motivo que, repensando toda a ideia desse aviso, eu adaptei o script para que ao invés de mostrar um alerta, seja mostrado um gadget com uma mensagem. Uma das vantagens é que, diferente do alerta, no gadget você poderá adicionar os elementos que você quiser e customizá-lo da maneira que achar melhor — o que não é possível fazer com o alerta. Abaixo há uma imagem de exemplo de como o alerta poderá aparecer para seus leitores.

Imagem meramente ilustrativa

Você pode ver esse script em funcionamento no nosso blog de teste, acesse-o utilizando o navegador Internet Explorer e em seguida utilizando qualquer outro navegador de sua preferência, e você verá que o gadget de aviso aparece somente no Internet Explorer. A instalação é tão simples quanto a instalação do alerta que eu mostrei no outro artigo, mas siga os passos com cautela para não ocorrer nenhum tipo de problema.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > HTML/JavaScript.


2. No campo de título do gadget escreva: IE Aviso, e no campo de conteúdo do gadget escreva o aviso que você quer e/ou insira uma imagem (necessário ter conhecimentos em HTML para inserir imagens nesse gadget). Em seguida clique no botão Salvar.

3. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

4. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

</head>

5. Imediatamente acima deste código, adicione este outro código.

<!-- Script de gadget no Internet Explorer -->
<script type='text/JavaScript'>
//<![CDATA[
function ieMessage() {
if(navigator.appName == 'Microsoft Internet Explorer') {
document.getElementById('ie-aviso').style.display="block";
} else {
document.getElementById('ie-aviso').style.display="none";
}
}
//]]>
</script>
<!-- Fim do script de gadget no Internet Explorer -->


6. Clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Ainda no menu Editar HTML, pressione novamente Ctrl+F para abrir a caixa de Busca do editor e procure o código abaixo.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

7. Ao encontrar o código citado acima, adicione este outro código dentro dele:

onload='ieMessage()'

...seu código deverá ter ficado como o mostrado abaixo.

<body expr:class='"loading" + data:blog.mobileClass' onload='ieMessage()'>

8. Ainda no menu Editar HTML, pressione Ctrl+F e procure pelo código abaixo.

title='IE Aviso'

9. Ao encontrar o código citado acima, você deverá acrescentar à ele, a parte que foi destacada em vermelho no código abaixo.

<b:widget id='HTML1' locked='false' title='IE Aviso' type='HTML'>
<b:includable id='main'><div id='ie-aviso' style='display:none;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</div></b:includable>
</b:widget>


10. Preste bastante atenção ao adicionar o código, para adicioná-lo no local correto! Para finalizar, clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, agora acesse o seu blog utilizando diferentes navegadores para saber se o gadget com o seu aviso está aparecendo somente no Internet Explorer e, se você quiser, pode excluir o título do gadget (IE Aviso), pois ele foi utilizado apenas como elemento de localização dentro do template. Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

Atualização — 22.04.2012 às 01h20
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foi postado 1 comentário neste artigo!

  1. Olá Igor! Desculpe a demora! rs ..
    O Widget agora esta perfeito! Principalmente com algumas alterações, vou tentar arrumar um lugar em meu Blog para não afetar o carregamento, obrigado!

    ResponderExcluir