Pular para o conteúdo principal

Barra de rolagem nos marcadores

Para modificar a aparência (cor da letra, itálico, cor de fundo ou colocar uma barra de rolagem) somente dos marcadores do blog precisamos criar um novo estilo CSS e aplicar aos marcadores somente. Isso é feito em duas partes, primeiro entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog.

Marcadores

No caso deste blog (imagem acima) o nome dos nossos marcadores é guia rápido, então encontre os marcadores do seu blog na pagina editar HTML, é claro será com o nome (titulo) que você usa nos marcadores.  Quando achar umas linhas abaixo tem <ul>, modifique para ficar igual dessa imagem <ul class='guiarapido'>, a palavra guiarapido será o novo estilo CSS que vamos criar então pode ser qualquer palavra, mas cuidado para não apagar os sinais ao lado ‘ porque sem eles não vai funcionar.


Depois que fizer isso vá até o começo do html, onde estão os estilos do seu blog (body, main, sidebar...) e coloque isso aqui:


.guiarapido { font-style: italic;
height: 200px;
overflow: auto;
}


A parte fonte-style: italic; é o efeito itálico, as outras linhas são a barra de rolagem, o valor 200 é a altura, isso você pode modificar como quiser. Se quiser colocar estilos diferentes para quando o mouse está sobre os links, faça desse jeito:


.guiarapido {height: 200px;
overflow: auto;
}


.guiarapido a{font-weight: bold;
}


.guiarapido a:hover{ font-style: italic;
}


Se não quiser a barra de rolagem nos marcadores é só não colocar a primeira parte do código. Nas duas partes seguintes coloque os estilos que desejar: tipo de letra, tamanho... (lembrando que a parte que tem o “a” são os links e “a:hover” é quando colocamos o mouse sobre o link, assim podemos editar somente os marcadores do blog sem alterar o restante dos links ou textos. Vamos lembrar mais uma vez que fizemos tudo isso usando o estilo com o nome de guiarapido apenas como exemplo, você pode usar qualquer palavra, mas tem que ser exatamente igual em todas as partes do código.

Comentários

  1. Fabiano,
    Segui suas indicações e coloquei barra de rolagem nos marcadores do meu blog. Não entendo nada de html, mas ficou ótimo! Sempre venho aqui atrás de suas dicas. Vc tem me ajudado muito. Obrigadíssima!
    Sonia

    ResponderExcluir
  2. e ai manin
    na paz?
    espero que sim!
    ai!
    da uma olhada no meu blog:

    www.tennos.blogdpot.com

    tem uma fita k7 que toca umas musicas quando o blog é acessado
    quero saber se tem como colocar uma foto de cada lado com os links dos perfis, o meu e o da outra moderadora do blog.
    se tiver, me diz como, ou eu te mando os links e as fotos e voce me manda só onde colocar os dados.
    blz manin?
    valeu.teu blog é muito bom cara.
    gostei da sua iniciativa de ajudar as outras pessoas.
    fui!

    ResponderExcluir
  3. para a imagem ficar do lado coloque assim:

    <img src="file:///D|/Meus documentos/acessorios/Web/sobre.jpg" border="0" style="float:right" />

    o float:right faz ela ficar do lado direito, se trocar por left é esquerda

    ResponderExcluir
  4. barra de rolagem é essa barra que aparece ao lado da pagina para você ver o restante dela

    ResponderExcluir
  5. Olá,
    Estou Gostando Muito do seu Site Ajudando Nós Iniciantes e queria seber se voc^r poderia fazer Um Favor?
    Bem Se Puder Me Ensine a Fazer Isso Com os Marcadores:↓
    http://img412.imageshack.us/img412/6937/precisodessesmarcadores.jpg

    ResponderExcluir
  6. Olá estou seguindo seu Blog e Gostaria que você me ensina-se ah Fazert Isso Com Os Marcadores!
    http://img412.imageshack.us/img412/6937/precisodessesmarcadores.jpg

    ResponderExcluir
  7. Olá Estou seguindo seu blog a tempo e Gostaria que se você pudesse fazer um favor pra min serei muito grato Me Ensine a fazer isso Com Os marcadores
    http://img412.imageshack.us/img412/6937/precisodessesmarcadores.jpg

    ResponderExcluir
  8. Rock Lee
    veja como fazer botões e personalizar gadgets nos links abaixo

    http://www.dicasparablogs.com.br/2009/04/como-fazer-e-colocar-botoes-no-blog.html

    http://www.dicasparablogs.com.br/2009/07/barra-de-rolagem-em-qualquer-parte-do.html

    ResponderExcluir
  9. Brigado Fabiano ajudou mesmo!!

    ResponderExcluir
  10. Olá Fabiano,como se dá o nome onde está assim no seu site:
    Termos de Uso,Parceria,Anuncie,Encomendas etcc...?
    Qual código usado?
    Grata querido...Bjos.

    ResponderExcluir
  11. L Loroza, aqui tem um código para fazer um menu horizontal

    http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html

    e veja também como fazer botões
    http://www.dicasparablogs.com.br/2009/04/como-fazer-e-colocar-botoes-no-blog.html

    ResponderExcluir
  12. oi Adorei essa dica mas não estou conseguindo aplica-la no meu blog, não sei o que há de errado fiz tudo seguido suas orientações mas a barra não aparece. se vc me ajudar eu agradeceria. abraços.

    ResponderExcluir
  13. oi. Consegui colocar a barra de rolagem nos marcadores, no entanto, eu quero colocar mais de uma barra de rolagem, em mais dois marcadores, ou seja, mais duas barras de rolagem em meu sidebar. Fiz da mesma forma com os outros marcadores mas não apareceu nada. Se puder ajudar agradeço.

    ResponderExcluir
  14. vejam essa postagem sobre barra de rolagem em outras partes do blog

    http://www.dicasparablogs.com.br/2009/07/barra-de-rolagem-em-qualquer-parte-do.html

    ResponderExcluir
  15. Ola, não estou conseguindo fazer na parte de colocar no começo do html poderia me ajudar?

    ResponderExcluir
  16. Neto

    pode colocar aquele código antes de body{....

    ResponderExcluir
  17. Notei que na parte inferior do lado direito vcs colocaram um menu
    suspenso no (widget Arquivo do Blog).
    Eu tambem utilizo desta forma, mas queria saber se é possível fazer o seguinte.


    Duvida 1:
    Neste menu suspenso, seria possível colocar inicialmente somente o ano? Pois com o passar do tempo a lista ficará grande com todos os meses de cada ano. Entao eu queria ver se tem jeito de aparecer (2008,2009,etc...), e dentro dele os meses.
    Com isso na abertura do site, o (widget Arquivo do Blog), ficaria
    somente os anos, e na medida que o usuário necessitasse ele navegaria
    pelos meses,ocupando muito menos espaco.


    Duvida 2
    Antes, eu usava o (widget blog de arquivo), com a opção (hierarquia),
    que ocupa muito espaço no blog na página inicial.
    Acredito que para resolver isto, bastaria apenas que o conteudo do
    widget arquivo do blog, (ex: 2008,2009,etc), aparecessem fechados.
    Por padrão aparece o ano e um mês aberto com o título das
    postagens o que ocupa espaço no site.
    Então, seria possível abrir o site e ver os itens do widget blog de
    arquivo, fechados? Tipo, com a seta de cada ano apontado para a
    direita e não para baixo? ou somente mostrando os anos? (2008,2009)?

    Se vc pudesse me ajudar, ficaria muito agradecido, pois só encontro tutorial falando sobre menu suspenso e não como (alterar a visualização padrão do widget arquivo do blog na opção hierarquia.

    Obrigado.
    Stanley Sousa
    Blog: www.ipvcgyn.blogspot.com

    ResponderExcluir
  18. ipvcgyn.com

    as opções do arquivo do blog são somente aquelas que tem no gadget, ou seja entre na pagina layout e clique para editar o arquivo

    veja também em configurações, arquivamento

    ResponderExcluir
  19. Oi, preciso da tua ajuda para postar algumas fotos no meu blog. Gostaria que fosse assim, tipo uma barra de rolagem e assim q se clicasse em cima da foto, ela aumentaria de tamanho como em sites. Tem como fazer isso no blog? Como? Desde já agradeço.

    ResponderExcluir
  20. Dorisa Luz

    veja se uma dessas opções resolver o seu problema

    http://www.dicasparablogs.com.br/2009/09/fazer-uma-apresentacao-de-slides-no.html


    http://www.dicasparablogs.com.br/2009/06/fazer-um-galeria-de-imagens-no-blog.html

    fazer exatamente o que você está dizendo precisaria criar uma pagina para cada foto e no blog não é possível.

    ResponderExcluir
  21. Não entendi direito o negocio de head,main e sidebar explica em video obg

    ResponderExcluir
  22. mexer com códigos é mesmo um pouco complicado no começo

    ResponderExcluir
  23. fabiano, já peguei inúmeraas dicas suas e hoje consegui colcoar a barra de rolagem. Estou aqui só para agradecer a sua iniciativa, é de imensa valia.Se puder visitar o meu Blog eu agradeço, sõa só 3 meses de trabalho.
    http://batalhaodasaudadepaulistanos.blogspot.com
    Muito Obrigado
    C.Gomês

    ResponderExcluir
  24. Obrigado Mesmo pela dica...
    Ajudou muito
    na minha opinião:
    ESSE É O MELHOR SITE PARA AJUDAR OS BLOGGEIROS
    valeu mesmo
    (APROVADO)

    ResponderExcluir
  25. muiito boa a dica!! funcionou direitinho comigo! Obrigada ;)
    http://casaa2.blogspot.com

    ResponderExcluir
  26. Gostaria de colocar essa rolagem mas n estou conseguindo :(

    ResponderExcluir
  27. tem que criar o código com o mesmo nome da id do gadget, inclusive as letras maiusculas.... veja outro tutorial sobre esse assunto: Personalizar gadgets do Blog

    ResponderExcluir
  28. Caro amigo muito obrigado pelo post.
    ainda bem que tem pessoas como você que sempre esta nos ajudando com esses posts legais

    ResponderExcluir
  29. Fabiano, meu bog está com problemas, quando eu ou qualquer outra pessoa acessam o blog, ele fica totalmente travado, e a barra de rolagem não funciona .. e quando funciona fica muito lenta, eu acho que é porque da ultima vez que mexi nele, eu fui tentar colocar efeito de estrelas sobre o mouse, na 1ªvez eu cosegui, e depois que fui modificar novamente, ele nao funcionou e agora está assim,pode me ajudar? endereço do blog; www.poline-s2.blogspot.com

    ResponderExcluir
  30. o blog ficar lento pode muitos códigos diferentes juntos... quanto mais efeitos colocar no blog mais lento ele fica...

    outra coisa você usa gifs animados nas postagens, eles também demoram muito para carregar, como nestas imagens:

    + de 300k - http://28.media.tumblr.com/tumblr_llcsgklUEK1qa29mbo1_500.gif

    440k - http://24.media.tumblr.com/tumblr_limc0fZNIT1qhmjx2o1_500.gif

    ResponderExcluir
  31. :( não consigo entender isso de jeito nenhum :(
    title='Marcadores' type='Label'>



    Oh Ceussss :(

    ResponderExcluir
  32. Janinha Meu Bem
    esse código é como achará o gadget dos marcadores no html do seu blog, veja esse outro tutorial: Personalizar gadgets do Blog, o assunto é bem parecido com esse e também serve para colocar barra de rolagem ou personalizar os marcadores.

    ResponderExcluir
  33. opa !!! meu blog é o http://midiasgospel.blogspot.com no meu caso nao consegui colocar a barra de rolagem, da uma olhada la no meu blog eu tive que dividi os marcadores em 2 partes pois nao da em uma só ! como coloco a barra de rolagem pois nao consegui por esses códigos!!!

    ResponderExcluir
  34. Mídias Gospel
    crie um estilo CSS assim:

    #Label1{height: 300px;overflow: auto;}

    ResponderExcluir
  35. DESCULPA, MAS SOU INICIANTE, SE EU NÃO PEGAR TUDO MASTIGADINHO, NÃO VOU PRA LUGAR NENHUM.

    "Depois que fizer isso vá até o começo do html, onde estão os estilos do seu blog (body, main, sidebar...) e coloque isso aqui:

    .guiarapido { font-style: italic;
    height: 200px;
    overflow: auto;
    }"

    "COLOQUE ISSO AQUI" MAS AONDE? EM QUAL POSIÇÃO, ANTES E DEPOIS DE ONDE? UMA DE CADA VEZ? Agradeço amigo.

    ResponderExcluir
  36. Fabiano estou levando,sem quere apaguei de um blog.
    Lindo domingo para vc

    ResponderExcluir
  37. oi eae me tira uma duvida ae,
    eu coloquei tudo certinho no meu blog so que ele fikou com um espaço muito grande de um marcador para o outro como eu diminuo esse espaço ? vlw

    ResponderExcluir
  38. @Eduzinho6279 esse tutorial não altera o espaço entre os marcadores...

    mas veja se tem algum código com padding ou margim com valor alto.

    se não der certo aqui tem outro código que dá para fazer a barra de rolagem em qualquer gadget
    Personalizar gadgets do Blog

    ResponderExcluir
  39. É COM MUITA SATISFAÇÃO QUE MINHA PESSOA TODO DIA ENTRA EM SEU BLOG PARA COMPARTILHAR SEUS CONTEÚDOS AGRADEÇO MUITO POR TER VC PARA NOS AJUDAR PARABÉNS FICA COM DEUS
    http://portal-do-rap.blogspot.com

    ResponderExcluir
  40. Na moral, eu ja quebrei a cabeça tentando colocar a maldita barra de rolagem no meu marcador, nao tem como, por que no meu blog nao aparece como tga na sua imagem, como eu faço?? rss ajudinha

    ResponderExcluir
  41. se for somente para o gadget dos marcadores pode usar esse código:

    #Label1 {height: 200px;overflow: auto;}

    ResponderExcluir
  42. aparece essa mensagem pra mim
    The new widget id "#Label1 {height: 200px;overflow: auto;} " is invalid for type: Label

    ResponderExcluir
  43. mas esse código é para colocar em outro trecho do html não é junto com o label1 que mostramos na imagem.

    pode colocar o código que falamos no começo do html onde está body {.....}

    ResponderExcluir
  44. URGH FABIANO, SEI QUE VC TA ME AJUDANDO, MAS A CABEÇA AQUI NÃO TA COLABORANDO RSSS EU REALMENTE PRECISO DESSA BARRA DE ROLAGEM NOS MARCADORES, VC PODE ME ADD NO FACE PRA GENTE TENTAR FAZER ISSO?? OBRIGADA^^
    MEU FACE É DANUBIA FERREIRA BJUS

    ResponderExcluir
  45. no seu html depois de

    h5{font-size:16px;margin-bottom:.4em}
    h6{font-size:14px;margin-bottom:.4em}


    coloque
    #Label1{height: 200px;overflow: auto}

    ResponderExcluir
  46. tente criar o estilo

    #Label1{font-style: italic;
    height: 200px;
    overflow: auto;}

    ResponderExcluir
  47. Onde fica sidebar, main, body, fale um codigo especifico que eu possa pesquisar e colocar porfavor

    ResponderExcluir
    Respostas
    1. pode ser em qualquer um deles, por exemplo

      body {.....

      esses códigos parecem em varias partes mas são apenas uma referencia para localizar o css

      Excluir

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