Nuvem de Tags Animada para Blogger
Como Fazer Um Site >> Criar Blog >> Blogger >> Nuvem de Tags Animada para Blogger
Atualização: O Flash vai deixar de ser suportado a partir do ano 2020. Por enquanto este widget ainda vai funcionando, mas é provável que os visitantes do seu blog tenham primeiro que ativar o Flash Player no browser que estiverem a usar. Normalmente o próprio widget gera um link que diz "Ativar o Flash Player" e depois disso a nuvem de tags começa a funcionar.
Pode apresentar as tags (etiquetas/marcadores) do seu blog de uma forma mais atraente através de uma caixa flash em que as tags começam a girar assim que se passa o cursor do rato sobre elas. Veja um exemplo da Nuvem de Tags em acção mais abaixo.
Este widget que se chama "Blogumus" é uma nuvem de tags criada em flash que usa scripts que foram convertidos a partir do plugin da nuvem de tags para o Wordpress, WP-Cumulus, de Roy Tanck.
Apesar de ser em flash este widget não torna as tags inacessiveis aos motores de pesquisa. Se os seus visitantes não tiverem javascript/flash activados nos seus browsers, as tags são apresentadas na mesma, apesar de neste caso não serem animadas.
Passe o rato sobre a caixa para ver a nuvem a girar:
Como Instalar o Blogumus no seu Blogger
A instalação deste widget é bastante simples!
Vá à secção Esquema (ou Layout), e clique em "Editar HTML". Procure a seguinte linha:
<b:section class='sidebar' id='sidebar' preferred='yes'>Imediatamente a seguir a essa linha cole o seguinte código:
| <b:widget id='Label99' locked='false' title='Nuvem de Tags' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='https://sites.google.com/site/comofazerumsitecom/ficheiros/swfobject.js' type='text/javascript'/> <div id='flashcontent' style="text-align: center;"><a href='http://comofazerumsite.com/criarblog/blogger/nuvem-tags-animada.html'>Nuvem de Marcadores para o Blogger</a><br/>-<br/><a href='http://comofazerumsite.com'>fazer um site</a></div> <script type='text/javascript'> var so = new SWFObject("https://sites.google.com/site/comofazerumsitecom/ficheiros/nuvemtags.swf", "tagcloud", "230", "210", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='10'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget> |
Faça "Pré-Visualizar". Se foi instalado correctamente você já deve conseguir ver a nuvem de tags a aparecer na sua barra lateral. Agora você já pode guardar o seu modelo, editar as cores e dimensões de acordo com as suas preferências, ou mover a nuvem de tags para uma localização diferente na sua barra lateral.
ATENÇÃO: Para ser possivel ver a nuvem de tags em acção, é preciso que já tenha adicionado etiquetas/marcadores a algum dos seus posts.
Modificando o Blogumus
Por defeito, o Blogumus inclui as seguintes variaveis definidas:
- Largura definida com 230px
- Altura definida com 210px
- Cor de fundo é o branco (#ffffff)
- Cor do texto é Cinza (333333)
- Tamanho da fonte é "10"
Se preferir pode tornar o seu widget maior, mais pequeno, pode mudar o esquema de cores, etc. Para fazer isso terá que editar as diferentes partes do código. Vou percorrer estas opções na ordem em que aparecem no código:
1 . Alterar a largura e a altura
As variaveis para a largura e para a altura podem ser encontradas na seguinte linha do código:
var so = new SWFObject("https://sites.google.com/site/comofazerumsitecom/ficheiros/nuvemtags.swf", "tagcloud", "230", "210", "7", "#ffffff");2. Alterar a cor de fundo
A cor de fundo pode ser mudada do branco para qualquer cor alterando o valor hex na mesma linha do código:
var so = new SWFObject("https://sites.google.com/site/comofazerumsitecom/ficheiros/nuvemtags.swf", "tagcloud", "230", "210", "7", "#ffffff");Por exemplo se preferisse o vermelho para cor de fundo, teria que substituir #ffffff por #ff0000. Veja aqui os códigos de cores HTML.
3. Alterar as cores do texto
Por defeito, o texto está definido com a cor cinza (valor hex #333333). Você pode alterar esta variavel na seguinte linha:
so.addVariable("tcolor", "0x333333");Tenha em atenção que "tcolor" é uma variável flash e não inclui o habitual simbolo cardinal (#) nos códigos de cor hex. Subsitua apenas os números.
4. Ajustar o tamanho da fonte
O tamanho máximos das tags é definida na seguinte linha:
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='10'><data:label.name/></a></b:loop></tags>");Pode alterar esse valor se preferir que as tags sejam mostradas numa fonte maior ou mais pequena.
À medida que faz estas alterações pode ir pré-visualizando o seu widget para se assegurar que a sua escolha para as cores e dimensões corresponde ao que pretende.
Você tinha a Nuvem de Tags instalada mas deixou de funcionar
O que pode ter acontecido é os arquivos flash terem sido apagados e por esse facto os respectivos endereços terem deixado de estar corretos.
Para evitar que isso aconteça e para que a sua nuvem de tags nunca mais deixe de funcionar, siga os seguintes passos:
- faça o download dos arquivos. Clique em Nuvem-de-Tags(ficheiros).zip e grave no seu computador.
- faça o upload dos arquivos swfobject.js e nuvemtags.swf para o seu servidor. Pode fazer o upload dos arquivos para uma conta "Sites" do Google, e usar os arquivos com os respectivos endereços do Google Sites. Clique no link para ver como pode fazer upload de arquivos para o Google Sites.
- depois não se esqueça de actualizar o HTML do seu blog com os novos endereços (mudando o código fornecido no inicio deste artigo) . Para isso deverá colocar os endereços dos arquivos que fez upload nas partes destacadas a vermelho:
<script src='https://sites.google.com/site/comofazerumsitecom/ficheiros/swfobject.js' type='text/javascript'/>
...
SWFObject("https://sites.google.com/site/comofazerumsitecom/ficheiros/nuvemtags.swf", "tagcloud", "230", "210", "7", "#ffffff");
Domínios a preços acessíveis.
Inclui serviço e privacidade gratuito.
Escolha uma empresa
de hospedagem fiável para
alojar o seu site.
