22/12/2011

Modificar Menu Suspenso do Gadget Arquivo do Blogspot

No Blogger muitos blogueiros que usam o gadget Arquivo do blog no formato de menu suspenso (menu jump) mas quase ninguém faz modificações neste menu porém isso é bem simples de fazer, apenas precisa de cuidado na hora de alterar o código para não apagar coisas por engano, veja Porque os códigos não funcionam no blog. Então vamos mostrar como aumentar a largura, utilizar outras fontes ou mudar o tamanho da letra no gadget do arquivo do blog utilizando com o menu suspenso.
gadget arquivo do blogger

Entre na pagina Modelo (sugerimos , clique no botão editar html e marque a opção expandir modelo de widget. Agora procure pelo titulo do seu arquivo do blog, você deve encontrar uma linha semelhante a essa:
b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'

E algumas linhas mais abaixo você encontrará esse trecho que é o original do blogger:

<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>

Para deixar o menu do Arquivo do Blog personalizado como está o nosso agora (22/12/2011) devemos modificar o código e deixar deste jeito:

<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;' style='width: 200px;font-size:12pt'>
<option value=''>Histórico deste Site</option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/></option>
</b:loop>
</select>

Veja as alterações que fizemos no código do menu suspenso do arquivo:

Adicionamos essa linha: <option value=''>Histórico deste Site</option> isso permite mostrar um titulo somente no menu sem precisar mostrar o titulo no gadget. Repare que na maioria dos blogs tem escrito arquivo do blog como titulo e depois arquivo do blog no menu jump também o que não é o nosso caso. Quando clicamos para adicionar o gadget ele fica sem titulo.
gadgets sem titulo no blog

Formatação do menu suspenso: style='width: 200px;font-size:12pt' é neste trecho que modificamos o tamanho e tipo da letra ou definimos uma largura especifica para o menu. Esses são códigos simples de CSS como você usaria em qualquer outro tipo de texto, veja aqui: Como Formatar o Texto do Blog. O valor 200 é a largura do menu e 12 o tamanho da fonte. Anteriormente já falamos em como Alterar cores, tamanho, letra do menu jump e o principio é o mesmo, inclusive no link você pode ver até como trocar a cor de fundo deste tipo de menu.

Em nossa alteração de código apagamos o trecho (<data:i.post-count/>) isso é o que mostra o numero de postagens feitas em cada mês no menu, portanto você escolhe se quer ou não mostrar isso.

Apesar de ser uma alteração simples pode ajudar a dar algum destaque para esse gadget e gerar mais algumas pageviews no seu blog dando a oportunidade dos visitantes conhecerem melhor seu trabalho e quem sabe voltarem mais vezes no seu blog. Esperemos que gostem de mais essa opção de personalizar seu blog. Abraços e Feliz Natal a todos !!!
Related Posts with Thumbnails

37 comentários:

  1. Fabiano,estou levando,adorei esta dica.
    Aproveito para desejar a você:
    Feliz Natal e Ano Novo também,bjus

    ResponderExcluir
  2. Valeu galera eu pedi a vcs ontem para ajudar e vcs responderam! Obrigado vcs são D+! sempre nos ajudando.

    ResponderExcluir
  3. Legal a dica, Fabiano você sabe como se chama essa fonte do Blogger que é um B olha nessa imagem?

    Abraços e Feliz Natal pra você também.

    ResponderExcluir
  4. Valeu galera! vcs são D+! sempre nos ajudando a deixar nosso Blog com a nossa cara. =]

    ResponderExcluir
  5. @Rosiel T.S. tentei usar o http://new.myfonts.com/WhatTheFont/

    para descobrir o nome mas acho que não é fonte é apenas um icone

    ResponderExcluir
  6. se a pessoa ir em designer e na parte postagem e ir em editar você pode botar a forma paddrão do blogger twiiter curtir google +1, a questão é que eu achei o código no HTML mais creio que precisa de outro codigo para fazer o que eu quero, tem como modificar as recomentadoções padrão do blogger para deixar como estar na sua postagem?
    o meu é assim:
    https://lh5.googleusercontent.com/-cOmo7kBa0pQ/TvP9nnKzeiI/AAAAAAAAGXE/g6O36z5pnIw/s147/111.JPG
    quero que fique assim
    https://lh5.googleusercontent.com/-lTZPLAnp_f4/TvP9njiPrhI/AAAAAAAAGXI/kK6cDKlu7yo/s163/222.JPG

    ResponderExcluir
  7. @Ben para fazer isso você deve pegar os códigos de cada um dos botões e colocar na pagina editar html(marque para expandir o modelo) depois do trecho post.body

    ResponderExcluir
  8. Olá Fabiano! Desculpe pelo comentário fora do assunto da postagem, mais eu queria fazer uma pergunta. De uma olhada no site afetado.

    http://i39.tinypic.com/21l61lh.png

    Eu queria saber se tem como eu ajustar o texto do Post sem ter que diminur as imagens vistas aé no site. Lembrando que esse aé é o template Minima.

    ResponderExcluir
  9. Mano você poderia me dizer onde se encontra no HTML do blogger o texto referente ao texto apenas da postagem? Eu uso o template Minima.

    ResponderExcluir
  10. @Kung Lao Master e Liu Kang The Champion aqui tem um exemplo do que falou no template minima: Largura do Blog

    esse imagem é somente sobre a postagem? se for é no estilo #main

    ResponderExcluir
  11. caro amigo hoje navegando na net e achei um blog pokemondarkay: pokemondarkay.blogspot.com bem o mais interesante é qe a medidaque um escritor diferente publica o topo da postagem altera

    ResponderExcluir
  12. Como mudar a cor da citação (blockquote)?

    Por exemplo: o fundo do meu blog é branco, quero que as citações tenham um fundo destacado (cinza claro, verde, etc)

    ResponderExcluir
  13. Amigo eu queria saber se tem como colocar no efeito lightbox padrão do blogger uma gif de carregamento enquanto a imagem é carregada!

    ResponderExcluir
  14. acho que não tem como fazer essa alteração, mas vou pesquisar sobre o assunto e fazer uns testes

    ResponderExcluir
  15. Fabiano, Eu queria saber como retirar as "bordas" de uma imagem, eu uso o Paint.net, ex: se eu quero só o corpo de uma pessoa, como retiro o resto?
    email: jrpn53@hotmail.com

    ResponderExcluir
  16. @@Mercado_DaBola esse tipo de edição (recortar) pedaços da imagem pode ser feito com varios programas e não só o paint.net.

    não sei dizer qual é o melhor deles mas tem que pesquisar por tutoriais para o programa que usa.

    ResponderExcluir
  17. @Fabiano Roberto também acho que é um icone, mas mesmo assim obrigado por passar esse site.

    ResponderExcluir
  18. Olá, eu gostaria de não deixar nenhuma postagem no meu blog, mas também sem aquele Nenhuma postagem.

    Tem como?

    ResponderExcluir
  19. Gostei,consegui,mas a única coisa que eu queria é colocar essa letra do seu,qual é a fonte?

    ResponderExcluir
  20. Olá Fabiano!

    Eu gostaria de saber como colocar esse rodapé do seu blog,um parecido.

    Me ajuda?

    ResponderExcluir
  21. a fonte do menu de arquivo que uso é font-family: "Comic Sans MS";

    sobre o rodapé é só editar o estilo #footer-wrapper{.... } colocando um cor de fundo diferente

    ResponderExcluir
  22. e vc sabe o código da cor do seu?

    ResponderExcluir
  23. a cor de fundo do rodapé que uso atualmente é background-color: #ffff66

    ResponderExcluir
  24. Mas o que acontece se esse arquivo alterado for mostrado de outra forma?

    ResponderExcluir
  25. esse tutorial é para personalizar somente essa forma (menu suspenso).

    se usar outro tipo como lista de links veja aqui como personalizar as cores e tamanhos de fonte: Personalizar gadgets do Blog

    ResponderExcluir
  26. Esse código não está funcionando no novo blogger! ¬¬

    ResponderExcluir
  27. essa alteração no código é bem chat de fazer e por isso dá erros...

    ResponderExcluir
  28. Oi. Vc sabe como colocar o ano no menu suspenso do arquivo do blogger? Para mim só aparece o mês, aí fica dividido por mês, mas sem aparecer o ano, sendo que como o meu blog jé tem mais de um ano, o menu arquivo tem dois janeiros, dois fevereiros, mas não os anos correspondentes. Obrigada

    ResponderExcluir
  29. Anônimo clique para editar o menu arquivo e escolha a opção hierarquia.... é parecido com isso que você quer

    ResponderExcluir
  30. Olá

    quero deixar o formato do arquivo em lista (não em hierarquia com espaçamento)como aparece nos modelos dinâmicos, pode me ajudar?

    ResponderExcluir
  31. nos modelos dinâmicos só tem aqueles estilos oferecidos pelo gadget, não tem como editar o html

    ResponderExcluir
  32. ADORO ESSE BLOG, PARABÉNS PELO ÓTIMO TRABALHO.

    ResponderExcluir