Menu Drop down

Ter um menu no blog é essencial para facilitar a navegação entre páginas, posts, e aplicativos, assim como divulgar serviços e facilitar a indexação dos links do seu blog.

E nada melhor do que inserir um menu Drop down moderno em seu blog.

Encontramos este menu na web e resolvemos republicar aqui no BG, ensinando passo a passo, para inseri-lo e configurá-lo em seu blog.

Tutorial - Menu drop down

Pode-se colocar o menu Drop down em qualquer área no blog. Porém, vamos mostrar duas áreas, em seu blog, para inseri-lo.

Primeiro, vamos ensinar a inserir o código de css que vai determinar e estilo do menu:

Vá em modelo, editar html e aperte ctrl+f  Procure pela tag ]]></b: skin> e acima dela, cole o código abaixo:

/* MBL Mega Drop Down Menu Bar For Blogger (www.bloggerenciado.blogspot.com) */ ul.dropmenu{ position: relative; margin: 0px; padding: 1px 0px 0px 0px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3fpfjUxJlmxYByEn1nUn2sNz_mU-sZQv8naXZzaD6RzwZWs13utMYlJA-OuTPfsqwSWgawh0l6UWIAHwLU7y1gagr08Zn2J-KhFE7KJ-VXPWwPLVhir5JvJ8a0TeUR0hGo9lWj2I8OPI/s45/FUNDO+PRETO.jpg) repeat-x scroll 0 0; display:block; height: 35px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; } .dropmenu li{ position: relative; list-style: none; float: left; margin: 0px; padding: 0px; } .dropmenu li a{ height: 22px; padding: 9px 30px 0px 15px; display: block; cursor: point; border-right: solid 1px #4a779d; color: #FFFFFF; text-transform: uppercase; text-decoration: none; } .dropmenu li span{ display: block; float: right; height: 10px; width: 10px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLZl0m4rEQJo2mXEUqaKpRQN9ddsPOQ3nyLSlRhi0_1liDSOYBkxBZNh3s1HSp6O-xFxo7Ozni8gJXvrGa0j_rDXwxi5H3q6D2NpVYfT73slzXyoOY_u7E4T2xq5m3eVmSPb4tt9vLuCg/s1600/arrow_up.png) repeat-x scroll 0 0; position: absolute; top: 12px; right: 10px; } .dropmenu li a:hover span{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVPYYrZJPoi_LXrHzbL9vWBeGxIf4la1y5fEhKXvnVls8AltozIDZxaTHHfCLX3dJwqpZsG1i4gfRH6qSJomPOyUk9EIf1mfK6MJ9E5LvLAN_TJkN7VT3RmGP-FzJc7hynPZY8O9emZXc/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu li:hover ul, .dropmenu li:hover div{ display: block; } .dropmenu ul{ position: absolute; display: none; width: 140px; padding: 0px; margin: 0px; border-bottom: 1px solid #ccc; background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbul6fwbcM2hgVpyjqErgaFYWVmcgWn35dni02PyS2lkFSA7JRNXYTE5D6izHzgacB4464SEr7wmcyTWLIbbgx_77MMAAnn8LHl3iQUCSZXgzfqyw47iu7kYZLE-TOyrVfsMzb_O3rQTc/s1600/gradient.png) repeat-x scroll 0 0; } .dropmenu ul li{ border: 0; float: none; } .dropmenu ul a { border: 1px solid #ccc; border-bottom: 0; white-space: nowrap; display:block; color: #0657AD; text-decoration: underline; text-transform: none; } a.selected, a:hover{ color: #0657AD !important; background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbul6fwbcM2hgVpyjqErgaFYWVmcgWn35dni02PyS2lkFSA7JRNXYTE5D6izHzgacB4464SEr7wmcyTWLIbbgx_77MMAAnn8LHl3iQUCSZXgzfqyw47iu7kYZLE-TOyrVfsMzb_O3rQTc/s1600/gradient.png) repeat-x scroll 0 0; } a.selected span{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVPYYrZJPoi_LXrHzbL9vWBeGxIf4la1y5fEhKXvnVls8AltozIDZxaTHHfCLX3dJwqpZsG1i4gfRH6qSJomPOyUk9EIf1mfK6MJ9E5LvLAN_TJkN7VT3RmGP-FzJc7hynPZY8O9emZXc/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu ul a:hover { color:#F67A00 !important; text-decoration: none; background-color: #F0F0F0; background-image: none; } .dropmenu div ul{ position: relative; display: block; } .dropmenu li div{ background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbul6fwbcM2hgVpyjqErgaFYWVmcgWn35dni02PyS2lkFSA7JRNXYTE5D6izHzgacB4464SEr7wmcyTWLIbbgx_77MMAAnn8LHl3iQUCSZXgzfqyw47iu7kYZLE-TOyrVfsMzb_O3rQTc/s1600/gradient.png) repeat-x scroll 0 0; border: 1px solid #ccc; padding: 5px; display: none; position: absolute; } .dropmenu li div ul{ border: none; background: none; position: relative !important; } .dropmenu li div a{ border: none; border-bottom: 1px solid #ccc; } .dropmenu li div div{ display: block; position: relative; background: none; border: none; } .dropmenu li div div a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .dropmenu li div div a:hover{ color: #000; text-decoration: none; } ul.left{ float: left; width: 145px; } ul.right{ float: right; width: 145px; } .small{ color: #666; font-size: 10px; padding: 10px 5px 8px 5px !important; display: block; clear: both; } .products{ width: 300px; padding: 15px !important; } .products ul{ width: 100%; } .products ul li{ border-bottom: 1px solid #ccc; height: 40px; padding: 10px 0px; } .products h2{ font-size: 16px; padding: 2px 0px 3px 0px; margin: 0px; } .products p{ color: #666; font-size: 10px; padding: 0px; margin: 0px; } .products img{ float: left; padding-right: 10px; } .products ul li a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .products ul li a:hover{ color: #000 !important; text-decoration: none; background: none !important; } .tutoriais{ width: 300px; } input{ border:1px solid #4A779D; padding: 3px 8px; margin-bottom: 8px; width: 164px; } label{ padding: 0px 0px 4px 0px; display:block; } button{ background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwu4C4OV3xWNORgP8AeQg-LYffFmZCxgc1XD0838LcSwbt7AfjrQHmvuRaEfqRpH8GGUogvzO1N3IdGkSdztuky_CmhLIU0aqZokIlg7jObg8CergeCUbowCghvioK8zHXi4Mk8-VsHQ/s1600/navigation.png) repeat-x scroll 0 0; color: #FFF; border:1px solid #4A779D; padding: 4px 10px; width: 180px; } .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;} .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
Ainda dentro da caixa de código do Blogger, procure pela tag </head> e acima dela, cole o código abaixo:

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script> <script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script> <script> $(document).ready(function(){ $("#nav-one").dropmenu(); }); </script>
Continuando dentro do sua caixa de códigos html, procure pela tag
<div id='header'> (abaixo desta tag, o menu ficará embaixo do cabeçalho). Caso queira o menu no topo do blog, coloque o código logo abaixo da tag </head>

Copie este código:


<ul class='dropmenu' id='nav-one'> <li> <a href='http://bloggerenciado.blogspot.com.br/'>inicio</a> </li> <li> <a href='#'>CONTATO</a><ul> <li><a href='http://bloggerenciado.blogspot.com.br/p/blog-page.html'>CONTATO</a></li> </ul> </li> <li> <a href='#item3'>BAIXAR</a><ul> <li><a href='http://bloggerenciado.blogspot.com.br/p/templates.html'>TEMPLATE</a></li> </ul> </li> <li> <a href='#item3'>LINKS UTEIS</a><ul> <li><a href='http://bloggerenciado.blogspot.com.br/2013/04/links-uteis-para-voce.html'>LINKS IMPORTANTES</a></li> </ul> </li> <li> <a href='#'>DICAS PARA BLOGUEIROS</a> <div class='products'> <ul> <li><img alt='Thumb' border='0' height='40' src='http://www.bcb.gov.br/gifs/cifraog2.gif' width='40'/><h2> </h2> <p> <a href='http://bloggerenciado.blogspot.com.br/p/o-que-cpc-cpa-cpm.html'>O QUE É AFILIADO POR CPC CPM CPA E CPL</a></p> </li> <li><img alt='Thumb' border='0' height='40' src='http://digital-in.com.br/wp-content/uploads/2012/07/83_contato_fale_home1.jpg' width='40'/><h2> </h2> <p> <a href='http://bloggerenciado.blogspot.com.br/p/como-criar-um-formulario-para-contato.html'>CRIAR UM FORMULARIO PARA CONTATO</a></p> </li> <li><img alt='Thumb' border='0' height='40' src='http://ganhardinheiroagora.com/blog/wp-content/uploads/2011/09/programa-afiliados.jpg' width='40'/><h2> </h2> <p> <a href='http://bloggerenciado.blogspot.com.br/p/melhor-afilido-para-iniciante-na.html'>MELHORES AFILIADOS PARA INICIANTES</a></p> </li> <li><img alt='Thumb' border='0' height='40' src='http://www.sabertudo.net/wp-content/uploads/2011/08/Image-afiliados.jpg' width='40'/><h2> </h2> <p> <a href='http://bloggerenciado.blogspot.com.br/p/lista-de-afiliado.html'>LISTA DE AFILIADOS</a></p> </li> <li><img alt='Thumb' border='0' height='40' src='http://4.bp.blogspot.com/_LaA5vhQoC2k/SXtl1rAYTyI/AAAAAAAABA4/3K-0YzwPUOs/s320/blogger_logo-758360.png' width='40'/><h2> </h2> <p> <a href='http://bloggerenciado.blogspot.com.br/p/melhores-gad.html'>MELHORES GADGETS PARA INICIAR O BLOG</a></p> </li> <li><img alt='Thumb' border='0' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpBuVeMYG2KI7t58Lne4wMJFl3Akfo_AkHCRU5KXz9mZHXeG2u-o84aVebKUIFXbZLvUfuVqf4c6EnC4fvsaFBzbBi3EC6HhCPrV1CIkE9GFxMYfVY8OkggW2EibLaouSA_Bfnq6_XgU/s400/qualidade.jpg' width='40'/><h2> </h2> <p> <a href='http://bloggerenciado.blogspot.com.br/p/principais-caracteri.html'>QUALIDADE NO BLOG</a></p> </li> </ul> </div> </li> <li> <a href='#'>Tutoriais</a> <div class='tutoriais'> <ul class='left'> <li><a href='http://bloggerenciado.blogspot.com.br/p/editando-ou-inserindo-um-menu.html'>menu do blog</a></li> <li><a href='http://bloggerenciado.blogspot.com.br/2013/04/como-criar-uma-caixa-de-feed-para-blog.html'>caixa de feed</a></li> <li><a href='http://bloggerenciado.blogspot.com.br/2013/04/criando-sua-caixa-link-me-divulgando.html'>caixa link-me</a></li> </ul> <ul class='right'> <li><a href='http://bloggerenciado.blogspot.com.br/2013/04/configurar-o-uservoice-crie-um-canal-de.html'>canal de comunicação</a></li> <li><a href='http://bloggerenciado.blogspot.com.br/2013/04/criar-gadgets-de-artigos-relacionados.html'>artigos relacionados</a></li> <li><a href='http://bloggerenciado.blogspot.com.br/2013/04/como-criar-uma-caixa-de-rede-social.html'>Gadget de rede social</a></li> </ul> <center> <p> para mais tutorias pesqueise em nosso blog</p> </center> </div> </li> <li> <a href='#'>SOBRE NÓS</a> <ul> <li><a href='http://bloggerenciado.blogspot.com.br/p/quem-somos.html'>QUEM SOMOS</a></li> <li><a href='http://bloggerenciado.blogspot.com.br/p/politica-de-privacidade.html'>P. DE PRIVACIDADE</a></li> <li><a href='http://bloggerenciado.blogspot.com.br/p/parceiros.html'>PARCEIROS</a></li> </ul> </li> <li> <a href='#'>INSCREVA-SE JÁ</a> <div class='emailsub'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feeds.feedburner.com/Bloggerenciado', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'> <p> ASSINE NOSSO FEED</p> <img alt='Feed' height='60' src='http://png-4.findicons.com/files/icons/808/on_stage/128/rss_2.png' title='Feed' width='60'/> <p> <input name='email' style='width:140px' type='text'/></p> <input name='uri' type='hidden' value='Bloggerenciado'/><input name='loc' type='hidden' value='pt_BR'/><input type='submit' value='Assinar'/> <div style='text-align: center;'> <small>Gadget by <a href='http://feedburner.google.com/'>Feed Burner</a> modificado por <a href='http://bloggerenciado.blogspot.com.br/'>bloggerenciado</a></small></div> </form> </div> </li> </ul>
Substitua o endereço do Feed do Blog Gerenciado pelo seu na caixa de Feed do menu.

Siga o modelo abaixo:

onsubmit='window.open(&apos;http://feeds.feedburner.com/Bloggerenciado&apos;, &apos;popupwindow&apos;,

Agora, entenda a edição dos links no menu Drop down:

Esta etapa é para configurar os nomes e endereços das páginas.

Veja o modelo abaixo:

<li><a href="#">início</a></li>

• Vermelho: Endereço para o qual o leitor será redirecionado ao clicar.

• Azul: Descrição do link.

Agora entenda a alteração das imagens no menu Drop down:

Veja o esquema abaixo:

<li><img alt='Thumb' border='0' height='40' src='#' width='40'/>

• Azul: refere-se a altura e largura da imagens no menu

• Vermelho: refere-se ao endereço da imagem que será inserida. Altere todas as áreas dentro do menu com as tags similares.

O que achou? Comente!

Adicionando um tradutor online

Através da indexação de páginas, agregadores de links e mecanismos de busca, suas postagens ficam globais. Por isso, é importante ter algum tipo de tradutor, para que todos possam ter acesso ao conteúdo de seu blog, sem dificuldade.

Existem vários mecanismos para isso. O Babylon e o Google tradutor são alguns exemplos.

Muitos desenvolvedores de scripts, utilizam o caminho de referência de links entre o conteúdo original e o traduzido, através de ícones de bandeiras com scripts embutidos, para facilitar a visão e o clique do visitante em seu idioma original. Uma técnica de estilo, dinamismo e visibilidade.

Ao invés de procurar um tradutor para a página ou o conteúdo que está sendo lido, basta clicar na bandeira correspondente à sua língua, e pronto! A página inteira e todo o seu conteúdo é traduzido para seu idioma.

Abaixo, destacamos dois códigos que encontramos na web, e podem ser adicionados em seu template através de um Gadget.

Tutorial - tradutor online

Gadget com 25 bandeiras

O primeiro é este, abaixo, com 25 bandeiras. Um ótimo tradutor online para aplicar em seu template:


Para aplicar o modelo acima, você precisa fazer uma pequena alteração. Troque o endereço do Blog Gerenciado pelo seu, como no exemplo abaixo:

<a href="http://translate.google.com/translate client=tmpg&amp;hl=pt&amp;u=http://bloggerenciado.blogspot.com.br/

Esse código se refere à tradução de cada bandeira, portanto é necessário trocar em todos os locais onde a url do bloggerenciado aparece pelo endereço do seu blog.

Uma dica: cole no Bloco de Notas ou Notepad++ para localizar com facilidade e fazer as alterações necessárias.

<!--– Add Portuguese to English –--><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;" title="Google-Translate-Portuguese to English "><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_us.gif" height="25" title="English"/><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Ces" target="_blank" title="Spanish"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_es.gif" height="25" title="Spanish"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Cfr" target="_blank" title="French"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_fr.gif" height="25" title="French"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Cit" target="_blank" title="Italian"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_it.gif" height="25" title="Italian"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Cde" target="_blank" title="German"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_de.gif" height="25" title="German"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Cja" target="_blank" title="Japanese"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_jp.gif" height="25" title="Japanese"/></a> <a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Car" target="_blank"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_sa.gif" height="25" title="Arab"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Cru" target="_blank" title="Russian"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_ru.gif" height="25" title="Russian"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Clv" target="_blank" title="Swedish"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_se.gif" height="25" title="Swedish"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Czh-TW" target="_blank" title="Chinese"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_cn.gif" height="25" title="Chinese Simplified"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Cnl" target="_blank" title="Dutch"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_nl.gif" height="25" title="Dutch"/></a><a href="http://translate.google.com/translate?client=tmpg&hl=pt&u=http://bloggerenciado.blogspot.com.br/&langpair=pt%7Cel" target="_blank" title="Greek"><img border="0" vspace="2" hspace="2" width="25" src="http://aimore.net/band/thumbs/thumb_gr.gif" height="25" title="Greek"/></a></a> <a title="Thai" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cth&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Thai" border="0" alt="Spain" src="http://img52.imageshack.us/img52/7443/thailand.png" width="24" height="24" /></a> <a title="Ukrainian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cuk&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Ukrainian" border="0" alt="Spain" src="http://img692.imageshack.us/img692/9222/ukrainei.png" width="24" height="24" /></a> <a title="Romanian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cro&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Romanian" border="0" alt="Spain" src="http://img17.imageshack.us/img17/2865/romaniaj.png" width="24" height="24" /></a> <a title="Norwegian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cno&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Norwegian" border="0" alt="Spain" src="http://img705.imageshack.us/img705/1374/norwayd.png" width="24" height="24" /></a> <a title="Bulgarian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cbg&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Bulgarian" border="0" alt="Spain" src="http://img28.imageshack.us/img28/3291/bulgariaz.png" width="24" height="24" /></a> <a title="Belgian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cbe&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Belgian" border="0" alt="Spain" src="http://img705.imageshack.us/img705/1923/belgiumi.png" width="24" height="24" /></a> <a title="Hungarian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Chu&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Hungarian" border="0" alt="Spain" src="http://img651.imageshack.us/img651/7048/hungaryn.png" width="24" height="24" /></a> <a title="Croatian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Chr&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Croatian" border="0" alt="Spain" src="http://img856.imageshack.us/img856/4900/croatiax.png" width="24" height="24" /></a> <a title="Finnish" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfi&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Finnish" border="0" alt="Spain" src="http://img856.imageshack.us/img856/6985/finlandu.png" width="24" height="24" /></a> <a title="Indonesian" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cid&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Indonesian" border="0" alt="Spain" src="http://img829.imageshack.us/img829/6441/indonesiar.png" width="24" height="24" /></a> <a title="Polish" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cpl&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Polish" border="0" alt="Spain" src="http://img36.imageshack.us/img36/126/polandw.png" width="24" height="24" /></a> <a title="Turkish" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ctr&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Turkish" border="0" alt="Spain" src="http://img684.imageshack.us/img684/6637/turkeye.png" width="24" height="24" /></a> <a title="Slovak" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Csk&hl=pt&ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Slovak" border="0" alt="Spain" src="http://img21.imageshack.us/img21/6497/slovakias.png" width="24" height="24" /></a> tradução
Agora, basta inserir em seu blog o código acima, editado.

Vá em modelo, layout, adicionar Gadget,selecione HTML/javascript, e insira o código.

Gadget animado com bandeiras

Vamos ao segundo estilo de tradutor. Veja o modelo abaixo:


Diferente do primeiro modelo, as imagens não são estáticas, e funciona como um display de animação. Apesar de ter menos bandeiras, ele é elegante e um pouco mais dinâmico que o outro.

Para tê-lo em seu blog, é só copiar o código da caixa de auto seleção, abaixo, e adicioná-lo em seu template, seguindo os passos que já foram citados:


Neste modelo de tradutor online com bandeiras não é necessário fazer nenhum tipo de alteração no código.

E, então, o que achou? Dê-nos sua opinião!