Cursos 24 Horas - Cursos 100% Online com Certificado

Tag de marcadores 3D no blogger

42 Comentários Autor : Notícia e blog 31 julho 2009

Assim que fica a nuvem de tags


Uma nuvem de marcadores 3d é um efeito bonito e facil, você deve ter visto já aqui mesmo na sidebar no Noticia e blog então vamos aprender a fazer uma no seu blog, lembrando que antes de tudo isso é legal fazer um backup do seu template pois se alguma coisa der errado você pode reverter facilmente.Vamos começar:


1.Faça login no blogger


2.Vá em layout » Elementos da página » Adicionar um Gadget » Marcadores


3.Após adicionar um marcador vá para layout » Editar Html


4.Clique em expandir modelo Expandir modelos de widgets e usando as teclas CRTL e F procure pelo nome que você deu ao seu marcador se foi categorias pesquise esse nome se foi marcador pesquise marcador após encontrar você verá um código parecido com esse:
<b:widget id='Label1' locked='false' title='Categorias' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><img src='http://i32.tinypic.com/241wktu.jpg'/><data:title/></h2> </b:if> <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> <b:if cond='data:display == &quot;list&quot;'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='&quot;label-size-&quot; + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
5.Agora substitua tudo que está entre <b:includable id='main'> e </b:widget> por esse código abaixo:

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf"
width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#
ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;


</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

6. Lembrando que o código acima já contém o <b:includable id='main'> e </b:widget> então cuidado para não repetir o mesmo código
7. width="250" height="200" deve ser alterado de acordo com a largura e altura do seu template para que perfeito

8.Visualize para ver se deu tudo certo e Salve as alterações.

A postagem original pode ser vista aqui mas como ela foi adaptada para o blogger pode não dar certo o tutorial desse site.

    42 Comentários

    Anônimo disse...
    22 de setembro de 2009 21:49 #

    Eu acho que a única coisa que falsa neste blog são imagens de como fica o HTML/JavaScript depois de pronto. Colocando isso o blog fica perfeito!

    Notícia e blog disse...
    24 de setembro de 2009 17:24 #

    @Anônimo Obrigado pela sugestão de hoje em diante irei colocar.

    Jhon/ O victor disse...
    25 de outubro de 2009 22:17 #

    Isso aqui é demais! Ficou perfeito no meu blog. Esse é o melhor site de dicas pra Blogger que eu já encontrei! Parabéns

    Gilberto Araujo disse...
    24 de novembro de 2009 10:59 #

    Parabéns! ficou perfeito!... entrei num site adpatado do wordpress e tinha esta nuvem de tag... e pensei: quero ter um desses no meu blog... porem... uso o blogger... aí pesquisando... cheguei aqui... e menos de 2 minutos ja tinha uma nuvem igual... hehehe... vou fuçar mais um pouco por aqui...

    Gabriel disse...
    9 de dezembro de 2009 21:52 #

    eh dificil vo fazer nao

    bere e alcione disse...
    18 de dezembro de 2009 19:07 #

    Adorei, cheguei ate a trocar a cor do fundo e das letras. O visual é manero mas não esta funcionando como link. Gostaria que ajudasse. abs

    wel disse...
    3 de fevereiro de 2010 21:17 #

    Pô cara não estou conseguindo, faço tudo certo, mais não aparece no meu blog, fica só um quadro branco... Pode me ajudar??? me add no msn de repente pode me ajudar por lá...

    wel.extreme@hotmail.com

    http://celulapinheirinho.blogspot.com/

    PvB DownLoaDs disse...
    21 de fevereiro de 2010 23:04 #

    Ouu aqui no meu blog nun da nem a pau porque?? no do meu amigo deu certim mais no meu não.. ajuda? pvb.downloads@gmail.com < E-mail //\\ www.pvb-downloads.blogspot.com < Blog

    tatodicastro disse...
    13 de abril de 2010 18:15 #

    No meu blog nao deu certo ... estou usando os novos modelos do blogger ... sera q só funciona nos modelos antigos ? :( queria tanto esse widget ... ajuda ai kra!!!

    Notícia e blog disse...
    13 de abril de 2010 20:19 #

    @tatodicastro, qual o seu blog?

    tatodicastro disse...
    14 de abril de 2010 00:13 #

    http://suaphotostyle.blogspot.com/

    esse é meo blog... mais ainda to montando ele, e queria coloca esse gadget :(

    BLOG'S NA EDUCAÇÃO disse...
    10 de maio de 2010 09:50 #

    Apareceu no ganged o nome AManda( e só sem puerinha) desde já agradeço...poderia me dar um help....

    SponXor disse...
    16 de maio de 2010 05:37 #

    já não funciona :-(

    SponXor disse...
    16 de maio de 2010 06:33 #

    Consegui... é só trocar os links:

    http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf

    http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js

    e trocar por estes:

    http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf

    http://sites.google.com/site/bloggerustemplatus/code/swfobject.js

    espero que funcione? comigo deu certo ;-)

    Notícia e blog disse...
    16 de maio de 2010 18:45 #

    @SponXor, obrigado pela dica corrigi o código!

    Glayson Nunes disse...
    26 de maio de 2010 15:37 #

    Também adorei esta ideia, tentei de tudo enquanto é jeito e só deu errado no meu... se alguém puder ajudar - http://madnesspop.blogspot.com/

    valeu

    Fred V. disse...
    31 de maio de 2010 02:50 #
    Este comentário foi removido pelo autor.
    Adolfo Leoni™ disse...
    17 de junho de 2010 02:21 #

    Opa caras blza ??
    Primeiramente parabens pelo trabalho de vc's...
    Eu tentei fazer aki no blog só q só aparece é esta frase : " Blogumulus by Roy Tanck and Amanda Fazani ".
    Se puder me da uma ajudinha aew...

    vlw's!!

    Lucashl2 disse...
    9 de julho de 2010 00:38 #

    @Adolfo Leoni™

    Tb apareceu assim no meu!!

    Hadrianus Santhana disse...
    17 de julho de 2010 15:16 #

    Absolutamente perfeito o fórum com as explicações. SEgui o passo-a-passo e o resultado foi absolutamente incrível. Uma dúvida: o pano de fudo do marcador 3d ficou branco. Como faço para modificar a cor do pano de fundo e a cor das letras do marcador 3d?
    Por gentileza, responda para o e-mail: adriano.santana4@gmail.com

    Grato!
    Abraço!

    Suelen Mello(sumello) disse...
    25 de julho de 2010 02:05 #

    o engraçado que eu consigo visualizar ele em modo de VISUALIZAR TA LI LINDÃO.. mas quando eu salvo e vou para o meu Blog nada..Fica Branco, no meu Outro Blog deu certo até mudei a cor de Fundo.
    POderia me ajudar ficaria muito Grata
    Poderia ser porque tenho muito Titulo no Marcador ja mudei e alterei para 30 e nada

    Notícia e blog disse...
    25 de julho de 2010 09:07 #

    @Suelen Mello(sumello)
    Tenho que verificar qual o seu blog.

    Dr. Rodrigo Fontes disse...
    7 de agosto de 2010 09:47 #

    Olá, como boa parte do pessoal, no meu BLOG tb apareceu td branco.
    Como posso fazer a função "flash" funcionar???

    Huds disse...
    17 de agosto de 2010 15:30 #

    Mesmo problema da @Suelen Mello(sumello), no vizualizar fica certinho, quanto salvo, nada aparece :/

    KuRtIs disse...
    6 de setembro de 2010 11:37 #

    Parabéns de tudo certo aqui,mas o problema é que a cor de onde fica os textos flutuando é branca,alguém sabe me dizer se dar de mudar a cor?

    Anônimo disse...
    11 de setembro de 2010 21:41 #

    POsso colocar em site tb esse marcador?

    (sumello) disse...
    29 de setembro de 2010 16:11 #

    @Notícia e blog

    Ola como eu disse que não conseguiu isso era alguma coisa que no meu template não dava pra ver eu troquei e nesse ja da pra ver certinho.Mas decidi não por ele mais é o maximo essa Tag.. uma outra Coisa gostaria de saber se vc desse a permissão de eu colocar essa Dica no meu Blog colocando o link do seu Blog aguardo resposta.. abraços
    meu blog é www.layoutdasumello.com

    (sumello) disse...
    29 de setembro de 2010 16:15 #

    @KuRtIs
    da para mudar a cor sim procure no código a cor branca #ffffff e altera para a desejada

    Kell Brandão e Mª Talita disse...
    17 de janeiro de 2011 12:17 #

    Tenho um blog de testes e nesse funcionou direitinho, mas no blog de verdade mesmo, não funcionou. Acontece o mesmo q com as demais pessoas. Na visualização aparece, mas depois q salvo as modificações, só aparece um quadro em branco no blog.

    www.beauteinfinie.com
    binfinie@gmail.com

    Admin disse...
    24 de janeiro de 2011 13:30 #

    A cor de fundo eu consegui mudar ,mas a cor da letra não, para o meu template se ficasse como ficou o exemplo la do inicio da postagem ficaria otimo ,mas nao consegui deixar a cor da letra branca..se tiver como me da uma ajuda...darioslv75@gmail.com

    Revista Pop disse...
    27 de janeiro de 2011 18:45 #

    Ola gostaria de agaradecer muito pelo POST.Realmente muito bom explicado passo a passo e funcionou muito bem no meu blog. podem ver http://arevistapop.blogspot.com/

    Maira Macri disse...
    15 de março de 2011 17:03 #

    Ficou demais!!! Deu certinho de primeira, porém ele não link nas tags... eu clico na palavra - por exemplo no meu caso "ilustração" - e não acontece nada... Como posso fazer funcionar? Tem q mexer na variável dentro do codigo? se puder me ajudar nessa, fico imensamente grata!!

    Parabéns pelo blog =)

    Fico no aguardo... =* Ma.

    Anônimo disse...
    23 de março de 2011 12:38 #

    Claro e direto! Isso é muito bom. Parabéns!

    Marcelo Ribeiro disse...
    29 de março de 2011 01:27 #

    Justamente o que eu buscava! obrigado!
    Me responde uma coisa, tem com mudar a cor das tags que aparecem na nuvem de tags?

    Brenno Henrique disse...
    4 de abril de 2011 14:19 #

    Ficou MUITO MASSA! Obrigado pela dica!

    Mas surgiu um problema, quando marcamos uma tag acentuada o blogger gera um link também acentuado. Porém, o link da nuvem aparece com o caractere do acento desconfigurado dando erro no link.

    Particularmente, acho muito feio corrigir isso tirando os acentos e deixando a página com erros ortográficos.

    Alguém sabe de uma solução alternativa???

    Paulo Henrique disse...
    5 de maio de 2011 12:05 #

    valeu cara suas informações são muito uteis

    Junior disse...
    7 de maio de 2011 07:03 #

    Legal gostei , Valeu! já ta no meu blog http://toad-news.blogspot.com/

    Letícia Molon disse...
    9 de agosto de 2011 20:00 #
    Este comentário foi removido pelo autor.
    Letícia Molon disse...
    9 de agosto de 2011 21:10 #

    Adorei o site, enfim consegui por o gadget no blog =D
    Depois de olhar outros post percebi o que tinha de errado ^^' (isso que dá não entender de html)

    Até exclui meu post de dúvida, hehehe
    http://animusbook.blogspot.com/

    Thiago_30 disse...
    20 de fevereiro de 2012 10:43 #

    Kra tem como mudar a cor do fundo e das letra se tivem fala ae

    thiago disse...
    21 de fevereiro de 2012 13:38 #

    Pessoal eu ja sei como mudar a cordo fundo e das letras
    *PARA MUDAR O FUNDO:
    Procure por "bgcolor" value="# ffffff " aonde esta "ffffff" coloque o código da cor que você quer
    *PARA MUDAR A COR DAS LETRAS:
    Procure por"tcolor=0x000000&amp" aonde esta "000000" coler o codigo da cor
    espero que ajude flw.

    Ana Paula disse...
    13 de agosto de 2012 19:26 #

    @thiagoADOREI, THIAGO! OBRIGADA PELA ÓTIMA DICA FICOU MUITO LEGAL!

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.