Pular para o conteúdo principal

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

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. perfeito!

    obrigada!

    ResponderExcluir
  21. 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
  22. sonhadora apaixonada
    clique ctrl F para procurar as coisas no html, isso é um jeito de buscar texto na pagina é bem mais fácil

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

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

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

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

    Sucesso!!!!

    ResponderExcluir
  27. 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
  28. sim é a mesma barra de rolagem que tem na lateral da pagina

    ResponderExcluir
  29. 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
  30. Ótimas dicas, tudo que precisei a maioria encontrei no seu blog. Parabéns pelo trabalho.

    ResponderExcluir
  31. 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
  32. 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
  33. 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
  34. 0yumi0
    além do gadget lista de blogs tem um gadget para links

    ResponderExcluir
  35. tutorial simples e funcional! Vlw

    ResponderExcluir
  36. 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
  37. 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
  38. Fabiano eu consegui colocar nos marcadores,deu certo.
    Vou levar para colocar nas listas de blogs.
    Obrigada,valeu.
    Linda noite para você.

    ResponderExcluir
  39. 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
  40. 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
  41. 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
  42. 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
  43. Quesia Leal
    veja esse outro tutorial: Barra de rolagem em qualquer parte do blog

    deve ser mais facil de usar

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

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

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

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

    ResponderExcluir
  48. 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
  49. Graça
    boa sorte com o novo template

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

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

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

    ResponderExcluir
  53. Funciona e fica bom, obrigado, (:

    ResponderExcluir
  54. 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
  55. 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
  56. Fabiano eu aqui de novo..rsrs..sarei Graças a Deus.
    Vou levararlgumas dicas aqui,bjs

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Sites de referências

Quer saber e mostrar no seu blog de onde vem suas visitas? Além dos contadores de visitas tradicionais que mostram estatísticas e o numero total de visitantes ainda podemos colocar no blog algumas ferramentas que mostram de onde vieram nossos visitantes, em qual site eles encontram nosso link para visitar o blog. O Feedit , não precisa de cadastro é apenas copiar o código(clique no botão getFeedit no site) e colocar no blog e já está pronto, as pessoas que entrarem no blog após você colocar o código já apareceram na lista gerada pelo site, ele tem algumas opções entre elas mostrar um mapa. O site Referrer precisa fazer cadastro e também fornece uma lista de onde vieram as visitas, mostrando inclusive a quantidade de visitantes de cada site. O cadastro é rápido e depois é só gerar o código para colocar no blog.Nos dois casos o código deve ser colocado no blog pela pagina layout, adicionar gadget, html/javascript, cole o código e clique para salvar. Esse tipo de serviço além de matar n

Novo Painel do Blogger e os Comentários

O Blogger atualizou seu painel para melhorar a navegação e deixar o Blogger mais fácil de usar. Concordo que ficou bonito, mas a notificação sobre novos comentários desapareceu. Na pagina inicial antiga do Blogger era fácil de saber havia comentários aguardando a moderação.

Formulário de contato

Uma coisa que todos os blogs precisam é manter um meio de comunicação com seus visitantes além dos comentários pois nem tudo que as pessoas querem dizer a respeito de um blog são comentários existem outros assuntos como criticas, sugestões, parcerias e outras coisas. Então é sempre bom deixar um endereço de e-mail no blog, mas além disso é possível colocar um formulário que enviará as mensagens de seus visitantes para seu e-mail. Esse formulário de contato pode ser colocado facilmente no blog pegando o código no site http://www.formulariopro.pog.com.br , lá você preencherá alguns dados como seu e-mail e pronto. Basta pegar o código e colocar no seu blog, no Blogspot isso deve ser feito pela pagina editar layout >>> adicionar elemento de pagina >>> html/javascript então coloque o código nessa janela e clique salvar. Lembre-se de verificar a caixa de spam (ou e-mails em massa) de seu e-mail pois alguns deles classificam os e-mails recebidos desse serviço com spam. Ve