09/04/2009

Colocar uma barra de rolagem na lista de blogs

Às vezes queremos adicionar muitos blogs na lista de atualizações que mostramos(lista de blogs) e fica ocupando espaço demais em nossa pagina, uma boa solução para esse problema é colocar uma barra de rolagem em nossa lista de blogs. Para fazer isso é bem simples:
Entre na pagina editar HTML e clique para expandir os modelos de widgets, então procure pelo inicio de sua lista de blogs, um jeito fácil de achar é procurando pelo titulo que usa na sua lista em nosso caso usamos o nome Meus outros Blogs, mas no seu blog estará o titulo que usa na sua lista, vejo o código:

<b:widget id='BlogList1' locked='false' title='Meus outros Blogs' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div style="height: 200px;overflow: auto; border:1px solid #000000">
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>

Repare na linha em negrito, no seu blog não tem essa linha, pois foi justamente isso que modificamos para colocar a barra de rolagem, o valor 200 que está na mesma linha é o tamanho da barra, então pode mudar para o numero que achar melhor.
O trecho final border:1px solid #000000 é a borda, se não gostou assim é só apagar esse pedaço do código, mas cuidado para não apagar as aspas, nem outros sinais. Agora vamos fechar essa div(estilo) que usamos aqui. Um pouco mais para baixo no código, você encontrará isso:

<a href='javascript:void(0)'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

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

Cuidado para não se confundir e achar que já tem uma div fechada, essa que já estava no blog pertencia ao código original, então precisamos adicionar mais uma(essa que está em negrito, não estava no modelo original do blog). Feito isso é só clicar para visualizar e depois salvar se estiver tudo correto. Essa é uma boa maneira de poupar espaço e ainda dá um novo visual com a barra de rolagem na lista de blogs.

Veja também:

Como Modificar as bordas
Tabela com o código html das cores
Criando uma lista de seus blogs
Related Posts with Thumbnails

61 comentários:

  1. OOoPÁAAAA
    VIREI SEGUIDORAA
    LINKEEEI
    !!!
    BJIIM
    AMEEI AS DICAAS
    VOU ACRESCENTAAR VARIIA NU MEU BLOG

    ResponderExcluir
  2. Dica muito util, assim que eu tiver com vários links de parceiros vou utilizar
    vlw e parabéns pelo post

    ResponderExcluir
  3. Coloquei e ficou perfeito...
    Valeu !!!

    ResponderExcluir
  4. Dica ótima...

    Eu estava precisando e nem sabia que podia colocar isso lá..


    Valeu mesmo!

    ResponderExcluir
  5. draxrio.compra ser sincero eu também não tinha pensando no assunto, mas uma pessoa enviou essa pergunta por e-mail então fui tentar fazer e deu certo, por isso acho importante as pessoas escrever sobre suas duvidas, ajudam a gerar idéias novas.

    ResponderExcluir
  6. Nossa.. Adorei
    Os Parceiros estavam ocupando muito espaço no meu blog.
    entao coloquei essa barra de rolagem
    no : Parceiros Banner e ficou bem melhor
    quando tiver ocupando espaço os outros tipo: Parceiros Vip e Parceiros Top vou adicionar a barra de rolagem tbm. Muito legal essa dica adorei mesmo.
    Seu Blog é 10. Flw

    ResponderExcluir
  7. Fiz passo a passo, não aceitou.Tenho certeza que fiz certo.

    ResponderExcluir
  8. Nazare Varella

    tente fazer novamente, as vezes faltou apenas um sinal: aspas, ponto e virgula, o blogspot está muito chato de mexer no html não deixa passar nada, ainda mais quando expandi o modelo.

    ResponderExcluir
  9. É uma ótima dica!!
    Já coloquei no meu blog...não que tenha muita coisa x)' mas é útil para não ocupar muito espaço na sidebar.
    E parabéns pelo blog, Fabiano! Nota 1.000!!

    ResponderExcluir
  10. vlw...fico mto bom essa barra de rolagem...uhuu

    ResponderExcluir
  11. Olá!
    Minha dúvida é a seguinte: Como colocar esta barra de rolagem somente na lista de links?
    Agradeço a atenção.

    ResponderExcluir
  12. Fabiano, boa tarde!
    Sempre uso as dicas do seu blog...Sem soma de dúvidas na minha opinião está entre os melhores que conheço.
    Gostaria de saber se é possível inserir uma barra de rolagem nas notícias publicadas (histórico), de modo que apareçam somente os títulos de uma forma melhor... O fato é que ou aparecem todas, ou por mês, ou hierarquicamente. As postagens já publicadas não ficam com boa aparência. Penso que com uma barra de rolagem ficaria melhor.
    Desde já agradeço a atenção, forte abraço!

    ResponderExcluir
  13. vou preparar uma postagem sobre isso.

    mas no caso dos arquivos não sei se melhora muita coisa pois o formato continuará sendo o mesmo ou seja com as hierarquias

    ResponderExcluir
  14. vou usar no meu blog deu certo no meu blog de teste, seu blog é muito facil de se entender.

    ResponderExcluir
  15. Seu blog é mara! Pode ter certeza q quando eu criar vergonha na cara e postar os links d parceiros e recomendações no meu blog o seu vai ser dos primeiros.
    Por mais interessante q seje uma barra d rolagem, acho mais eficiente e justo um random. Eu ja vi um blog onde uma quatidade fiza d parceiros aparecia aleatóriamente, esse é o codgo q procuro e nao acho ¬¬. soh encontro os q sorteiam apenas 1 d cada vez.
    Sera q o menino sabe desse codgo? (Ou tem ele aqui e eu nao vi :$ ?)

    ResponderExcluir
  16. eu já vi um código assim, vou fazer uma postagem sobre isso ainda essa semana

    ResponderExcluir
  17. Oi Fabiano!
    Muito obrigada por mais esta dica.
    Você é fera!

    Bjs ♥

    ResponderExcluir
  18. sou seguidor ha muiiito tempo.tenho aprendido muito aqui com vcs.valeu memo!

    ResponderExcluir
  19. era mesmo isto. vou ver se resulta.
    abraços

    ResponderExcluir
  20. gosto das dicas , mais estou com algumas dificuldades em encontrar algo no htlm , como colocar imagem de fundo mesmo hospedando a imagem .. o mais é muito bacana ..

    ResponderExcluir
  21. sonhadora apaixonada
    clique ctrl F para procurar as coisas no html, isso é um jeito de buscar texto na pagina é bem mais fácil

    ResponderExcluir
  22. Nossa amei, foi um pouco dificil enxergar os codigos, rsrs, mais a explicação esta muito facil. Também estou te seguindo. Bjus

    ResponderExcluir
  23. Cara, não entendi nada, tem mt código aí, não sei direito o que é pra colocar ou não...

    ResponderExcluir
  24. a parte que tem que acrescentar é só o que está em negrito, o resto já faz parte do seu blog

    ResponderExcluir
  25. Maravilhoso seu post, parabéns e muito obrigada por ajudar!!!

    Sucesso!!!!

    ResponderExcluir
  26. Olá Fabiano, estou tentando aprender htlm e gostaria de saber se essa 'barra de rolagens' é a mesma que rola as páginas de um blog e se posso copiar. Adoro teu espaço, és um querido. Bjs

    ResponderExcluir
  27. sim é a mesma barra de rolagem que tem na lateral da pagina

    ResponderExcluir
  28. era exatamente isso que eu procurava . Procurei tanto e acabei encontrando por acaso. Sempre passo por aki, mas hj resolvi fazer um tuor nos tutoriais , pois não é que encontrei o que tanto procurei!!!!!
    Muito grata pelas dicas.
    Passa no meu bloguito pra ver!
    http://robertacrocheecia.blogspot.com/
    Um abraço

    ResponderExcluir
  29. Ótimas dicas, tudo que precisei a maioria encontrei no seu blog. Parabéns pelo trabalho.

    ResponderExcluir
  30. Olá Fabiano. Coloquei a barra de rolagem na lista de blogs, funcionou direitinho, mas quando vi meu blog (www.cantinhodamamaearteira.blogspot.com) pelo Internet Explorer (eu uso o Chrome), vi que a barra não funcionava, e a lista de blogs fica toda visível deixando a página do blog imensa! Como corrigir isso? Obrigada.

    ResponderExcluir
  31. infelizmente nem todos os códigos funcionam igual em todos os navegadores (chrome, firefox, internet explorer...) o jeito é ver quais são os navegadores que os visitantes do seu blog mais usam e fazer o melhor ajuste para eles, veja aqui um bom contador para analisar suas visitas

    Como usar o Google Analytics no blog

    ResponderExcluir
  32. Oii! tem como clocar essa barra na lista de links do blog ?? e aquela q vc adiona os links de outros blogs, queria colocar la pq n uso a lista de blogs, so outros links diferentes

    ResponderExcluir
  33. 0yumi0
    além do gadget lista de blogs tem um gadget para links

    ResponderExcluir
  34. tutorial simples e funcional! Vlw

    ResponderExcluir
  35. Como eu faço pra aumentar o número de postagens que vai aparecer no gadget "Minha lista de blogs"? Porque só aparece 1, gostaria de fazer aparecer mais postagens. Na verdade o que eu quero e mostar feed do meu outro site, mais mostrar só a imagem principal e o título, o tamanho das imagens são 137×195 pixels, seria muito bom se mostrasse o título e a imagem, sabe, um site ajudando o outro :)

    ResponderExcluir
  36. Ariel
    no gadget minha lista de blogs tem a configuração de quantos mostra... mas não tem como editar o tamanho da imagem

    ResponderExcluir
  37. Fabiano eu consegui colocar nos marcadores,deu certo.
    Vou levar para colocar nas listas de blogs.
    Obrigada,valeu.
    Linda noite para você.

    ResponderExcluir
  38. Fabiano eu consegui colocar nos marcadores faz um tempinho.
    Não consigo colocar na lista de blog que eu sigo.
    Tem como colocar na aba adicionar gadget?
    Tentei colocar ontem não consegui.
    Desde já agradeço.
    Lindo dia para vc,bjus

    ResponderExcluir
  39. Graça
    não tem como colocar a barra de rolagem de forma automatica...

    tem que achar e modificar os códigos, mas precisa marcar para expandir o modelo

    ResponderExcluir
  40. Fabiano!!!! Consegui agora minha lista de blogs está dentro da caixa,ficou pequena,isto é no sentido do comprimento como eu tenho medo de ficar mexendo no html vou deixar como você colocou aqui.
    Meu erro era que eu não visualizava o blog 1º para salvar o modelo.
    Estou super feliz...consegui...
    Lindo dia para vc,bjus

    ResponderExcluir
  41. ACREDITE TUDO QUE VC ENSINA EU APRENDO RÁPIDO E FAÇO NO MEU BLOG
    SEI MEXER COM CÓDIGOS E TUDO
    PORÉM ESTE É MUUUUUUITO DIFICIL
    VOU EXPLICAR PQ
    NO MEU EDITAR HTML
    EU DOU CTRL F
    E ABRE UMA CAIXINHA ACIMA DAÍ ESCREVO O TITULO MINHA LISTA DE BLOGS
    E APARECE SOMENTE ESTE CONTEUDO TOTAL



    NÃO TEM MAIS ALÉM DISTO O QUE FAÇO???
    PODERIA ME AJUDAR POFAVOR?

    ESTE É O MEU E-MAIL PODERIA-ME RETORNAR NELE PARA PODER-MOS FALAR MELHOR

    ResponderExcluir
  42. Fabiano vim pegar de novo a barra para os blogs que sigo .Espero que de certo.
    Obrigada,bjus

    ResponderExcluir
  43. Fabiano sem querer exclui a barra de rolagem do menu vou pegar de novo.
    Linda semana para vc,bjus

    ResponderExcluir
  44. Graça
    obrigado e boa semana pra você também

    ResponderExcluir
  45. @Fabiano Roberto
    Quesia segue a opção barra de rolagem em qualquer parte do blog,dá certinho.

    ResponderExcluir
  46. Fabiano,vim pegar a barra de rolagem de novo.
    Troquei o template do blog.
    Aproveito para desejar a você e todos dos dicas blogs:
    FELIZ NATAL E ANO NOVO TAMBÉM!!!
    Mil beijokas

    ResponderExcluir
  47. Fabiano querido!!Eu aqui de novo ,vou pegar umas dicas aqui.
    Obrigada,bjs

    ResponderExcluir
  48. Fabiano,não consigo ficar sem vir aqui.
    Vou levar algumas coisas,bjs

    ResponderExcluir
  49. Fabiano eu aqui de novo,perdi a barra de rolagem,estou levando.
    Obrigada,bjs

    ResponderExcluir
  50. Ola Fabiano, levei o código da barra de rolagem deu certinho, obrigado.
    Estou levando o link desta página para colocar em lista de links ok?
    Obrigado.

    ResponderExcluir
  51. Fabiana,eu de volta...rsrs...
    Menino quase fui para o andar de cima mas...rsrs...aqui estou.
    Estou levando tudo de novo...rsrs...
    OBRIGADA,BJS

    ResponderExcluir
  52. Fabiano eu aqui de novo..rsrs..sarei Graças a Deus.
    Vou levararlgumas dicas aqui,bjs

    ResponderExcluir