Postagens | Dicas blog, Imagem, Pc Windows

Onde e como adiciona código Css no Blogger

Mostrarei onde começa o Css no blogger e onde adicionar alguns novos estilos Css no Html do blogger.

Atualização importante 2012:
O passo a passo indicado abaixo mudou após o blogger remover a antiga interface, veja como colocar Css em modelos do blogger, clique aqui
Se achar interessante, você pode ler algumas dicas sobre Css abaixo, mas os passos(procedimento) para acrescentar Css no blogger mudou, por isso ignore os passos abaixo e clique aqui para ver a nova maneira de acrescentar Css no modelo de blogger



Esse post tem a função de facilitar e esclarecer onde se coloca estilos Css no blogger de forma a evitar alguns erros e, você pode usar um blog de testes para praticar ou até mesmo fazer as coisas mais difíceis nele antes de aplicar ao seu blog.
  1. Acesse o blogger.com
  2. Clique em Layout Design (Design substituiu a palavra Layout. Atualização:2010)
  3. Clique em Editar HTML
  4. Para fazer uma cópia de seu código clique em Baixar modelo completo, e após isso salve em seu computador

    Se algo der erro você poderá usar esse fazer um upload para deixar como estava.

  5. Você deverá localizar esse código:

    ]]></b:skin>

    Exatamente antes/acima desse código ]]></b:skin> pode deixar uma linha em branco e adicionar códigos Css
  6. Depois clique em VISUALIZAR para ver como ficou e, se gostar pode clicar em SALVAR MODELO

Clique para aumentar
Adicionar estilo css no blogger


Nesse local mostrado acima você poderia adicionar algo assim:

.post {color:green;
font-size:110%;
 }


O código acima tornaria a cor da fonte do post do blogspot verde e aumentaria ela 110%.

Mas o correto mesmo seria primeiro procurar no Css do blogger se já existe .post{ e entre-chaves{} adicionar o código que já está entre-chaves ou estilos Css que você queira adicionar.

Você deve ter cuidado para não apagar nem um caracter, qualquer caracter nesse local é importante, até um ponto ou uma vírgula tem sua função.

Outra coisa que poderia dar erro é adicionar um código no local errado, Veja um exemplo errado:

.post {color:green;
font-size:color:blue;110%;
 }


Nesse código acima color:blue; está no lugar errado e faria esse tamanho da fonte(font-size:110%;) não funcionar.

Você pode entender melhor o Css do blogger se observar a forma como está organizado, as semelhanças, onde tem cada caracter...

O Css do Html do blogger começa com esse código:


<b:skin><!--[CDATA[

O Css do blogger termina com esse:

]]></b:skin>

A estilização do BlogSpot fica entre esses dois códigos acima.

9 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. muito obrigada me ajudou bastante

    ResponderExcluir
  3. Nao consigui entender direito, mas quero aprender, tenta me mandar um E-mail me explicado melhor, mais direto, seilá, é que entendi mais ou menos o post ---> /

    ResponderExcluir
  4. Anônimo6/11/12

    Saudações, Caro Blogueiro!!

    Preciso de ajuda. E talvez tenha relação com este post. (se não tiver, me desculpe).

    É que estou construindo um blog(que pretende ser histórico), sobre futebol de mesa, muito pesado, muito rico em fotos, que está numa fase de rascunhos, scaneamento de imagens, recortes etc, porém tive um susto. Como tenho 3 navegadores em minha máquina, fiquei apavorado, pois fiz uma alteração no meu provedor de fotos, o Flick, e toda vez que abro o blog(rascunho) por esse navegador as fotos não aparecem mais. E o segundo susto pior...fiz minhas alterações e construções do blog pelo Google chrome por achar o melhor, porém, ao entrar com o mais famoso de todos, o Interne explorer, vi que algumas importantes ações que fiz no Google Chrome, não estão feitas - quando acesso o blog rascunho pelo internet. Será devido à essas alterações na interface do blogger ??

    Muito obrigado!

    Paulinho Meira

    ResponderExcluir
  5. A nova interface do blogger não altera o estilo e códigos de seu modelo, por isso não tem efeito em nada no blog, apenas mudou a maneira de gerenciar as coisas, nem o fato de você ter usado o Chrome para alterar coisas pode atrapalhar. acesse seu blog com outros navegadores, não veja seu blog apenas usando sua conta do blogger.

    O que pode acontecer é, tanto para códigos Css como Javascript podem não funcionar algumas funções e efeitos em algum dos navegadores, verifique se você está com o Internet Explorer 8 ou superior, pois eles são mais usados.

    Quanto a imagens do Flick, você deve ver se elas não estão num tipo de modo privativo, elas devem ser públicas para todos verem. Eu não sei muito desse flick, mas, veja se consegue ver suas fotos usando outro navegador, sem estar logado.

    ResponderExcluir
    Respostas
    1. Anônimo6/11/12

      Lizandro,

      Muito obrigado pelo retorno ! Mas quero aproveitar um pouco de sua boa vontade, meu caro..., por gentileza, dentro do mesmo tema. Onde devo fazer toda a elaboração do blog ? No Google, no Internet, ou no Mozzila??? O Office que uso é o 2007.Quanto ao Flick, agora não tem mais jeito, acabei que comprando por um ano, uma conta pro, então agora tem que ser ele...mas vejo sim as fotos...meu blog fica no blogspot.com...caso tenha algo contra, por favor, grite!! Se tiver um email que eu possa me comunicar agradeço...fucei e fucei, mas não encontrei um por aqui...Valeu!!

      Paulinho Meira

      Excluir
    2. Para mim o mozilla tem sido mais fácil para trabalhar com o blogger, eu tive muitas dificuldades com o Internet Explorer, e algumas com o Google Chrome.

      Você citou o Office, eu não uso nem um outro programa para mexer em meu blog, apenas para criar imagem, mas para criar imagem é algo a parte porque a gente cria e depois publica, eu aconselho que use apenas o um navegador para mexer no blogger, quer dar cores ou mudar tipo de letra, tudo no blogger com o navegador.

      Leia umas dicas para praticar postagem, clique

      Se você tem uma conta no Flick, precisa saber se eles não vão remover as imagens se um dia você não pagar, e precisa saber copiar a Url da imagem para adicionar ela no blogger, precisa saber se o Flick não usa uma Url temporária para exibir as imagens, eu aconselho a postar imagens que estão no computador, isso porque aí é o blogger que vai hospedar e garantir elas. Para você saber essas coisas, só praticando.

      Não vejo problema em você usar um blogspot.com, ele é do blogger, esse meu blog começou como blogspot.com e usa o blogger para administrar(gerenciar), porém eu registrei um nome de domínio próprio(usando o blogger para isso).

      Eu não deixo meu email porque tenho pouco tempo de sobra e muita coisa atrasada, a gente espera que cada leitor do blog se capacite buscando soluções na web, nem todas as soluções você encontrará aqui ou em um único local, se você tem dúvidas que não tem respostas prontas, pode perguntar em comentários ou até melhor usar fóruns do google para essa categoria blogger ou o yahoo respostas, escolha a categoria mais correta(nesse caso design e programação) e pergunte, esses são fóruns bastante frequentados, o que indica que tem muita chance de uma resposta que ajude.

      Excluir
    3. Anônimo7/11/12

      Caro Lizandro, agradeço mais uma vez pela sua colaboração, respondendo às minhas questões. Lamento que nosso maior inimigo seja o "tempo" - pois conheço bem essa "inimizade" rsrsrs Só um comentário: há coisas que ninguém chega pra você e diz como é né ? Ou você sua sangue e acaba conseguindo aprender na marra, no peito ou na raça ou encontra abnegados como você, que disponibilizam dicas, orientações graciosamente...Mas vamos combinar: quando vem um anjo com uma luz e diz: olha, é por esse caminho...a coisa fica tão simples e fácil não ? Querendo ser meu amigo virtual, é só ir pro hotmail ou estadao, face ou orkut, que com minha assinatura, irá me localizar ou compor meu email.

      Abraço!

      Valeu Lenz!!

      Paulinho Meira

      Excluir
    4. Obrigado,

      As vezes a gente sofre mesmo para descobrir e aprender algo, mas o que a gente aprende ralando e com dificuldade, dificilmente a gente 'desaprende', e com o tempo e a prática a gente vai obtendo mais facilidade em aprender, é a dificuldade nos deixando mais aptos.

      Excluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares