[Blogger - Hacks] - Menu dropdown para os Templates Dinâmicos do Blogger

Olá querido leitor, seja bem-vindo a mais um artigo. Se é você quem customiza o seu template, você deve saber o quão difícil é ter exclusividade na blogosfera hoje em dia, pois o plágio também assola os templates dos blogs. Diferente dos plagiadores, você deve saber o trabalho que dá customizar um template, e abrir mão dele após ter tido todo esse sofrimento não é fácil. Há quase 1 ano atrás, eu publiquei o artigo: Dynamic Views apresenta sete novos modelos de template no Blogger, onde mostro como tornar um dos novos templates dinâmicos do Blogger, no template padrão do seu blog.

Mas, como eu falei, é difícil abrir mão de um template que você batalhou bastante para customizar, por isso, no artigo de hoje, eu mostrarei a você como adicionar um menu dropdown em seu blog, para que seus leitores possam visualizá-lo com um dos sete novos templates dinâmicos do Blogger, mas sem que você precise abrir mão do seu tão querido template. O menu possui a seguinte aparência:

Visualização Dinâmica

...se você selecionar algum dos modelos e clicar no botão Visualizar, o blog se atualizará e passará a ser exibido com o template dinâmico que você escolheu. Porém, esse método não é permanente, ou seja, se o leitor fechar a página do seu blog e acessá-la novamente, ele verá o blog com o template original, e se quiser visualizá-lo com o template dinâmico novamente, deverá clicar no botão de visualização de novo.

Você pode instalar esse menu em qualquer lugar do seu blog que aceite HTML, mas neste tutorial eu mostrarei como adicioná-lo à sidebar (barra lateral) do blog. Agora chega de falar e vamos ao que interessa. Siga os passos abaixo para instalar o menu em seu blog.

Adicionando o menu na sidebar do blog


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. Adicione o código mostrado abaixo, dentro do campo de conteúdo do gadget.

<div align="center">
<div style='color: #000000;font-weight: bold;'>Visualização Dinâmica
<select id='dropdowndynamicview'>
<option selected='selected' value=''>Escolha um modelo...</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/classic'>Classic</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/flipcard'>Flipcard</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/magazine'>Magazine</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/mosaic'>Mosaic</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/sidebar'>Sidebar</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/snapshot'>Snapshot</option>
<option value='http://nome-do-seu-blog.blogspot.com.br/view/timeslide'>Timeslide</option>
</select> <button onclick='document.location.href=document.getElementById('dropdowndynamicview').value;'>Visualizar</button></div>
</div>


Agora, veja abaixo quais são as modificações que você pode fazer no código.

  • As partes destacadas em azul, você deve substituir pelo nome do seu blog. Caso você possua um domínio próprio deve substituir o endereço inteiro, não somente a parte em azul;
  • A parte destacada em vermelho, é a frase do botão Visualizar. Você pode substituí-la para qualquer outra que desejar;
  • A parte destacada em rosa, é apenas uma frase que aparecerá acima do menu dropdown. Caso você esteja adicionando o menu em um gadget novo, você pode apagar esta frase e escrevê-la no título do gadget, ou então mudá-la para qualquer outra que você desejar.

3. Após fazer as modificações, basta clicar no botão Salvar. Agora é só acessar seu blog e conferir se o menu está funcionando de maneira correta. Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.
É 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.

Foram postados 3 comentários neste artigo!

  1. Eu já uso a um tempo atrás este código e gostaria de saber se tem como personalizar..

    ResponderExcluir
    Respostas
    1. João Almeida, sim é possível personalizar a lista dropdown. Para tal, basta utilizar seletores CSS, e informar diretamente o elemento que você deseja afetar, exemplo: select {}, select option {}. É possível fazer uma maior customização se você adicionar classes ou ID's ao código, ou utilizar javascript.

      Excluir