Como adicionar o CSS no Blogger – Compreensão CSS no Blogger

Deseja adicionar alguns efeitos interessantes para o seu blog como queda de neve, 3D fontes, neon textos, caixa de sombras ou você quer ter o design de seu blog para o próximo nível, então tudo que você precisa é inserir algumas linhas de CSS personalizado para o seu blog. CSS, o que é isso? CSS é conhecido como Cascading Style Sheet que em simples usado para descrever a aparência do seu blog ou em outras palavras, é usado para definir como os elementos HTML devem ser exibidos. Antes de aprender sobre CSS, é melhor saber sobre HTML. Existem toneladas de recursos em CSS e até mesmo um iniciante pode entender facilmente os elementos básicos do CSS, mas dominá-lo levará muito tempo e conhecimento prático.

CSS desempenha um papel mais importante no embelezamento de elementos e todos os modelos do Blogger por padrão terão seu próprio código CSS. A qualquer momento, se você deseja embelezar ainda mais o design do seu blog, pode adicionar algum CSS personalizado. Em alguns de nossos tutoriais blogger mencionamos nossos visitantes para adicionar códigos CSS, por exemplo, dê uma olhada neste post, mas a maioria dos iniciantes não sabem onde adicionar o CSS. A maioria deles simplesmente abre seus arquivos de modelo, descobre as tags B:skin e, de alguma forma, finalmente estraga seus códigos de modelo. O Blogger permite que você adicione seu próprio CSS personalizado no template designer, que substitui o código CSS padrão para obter a aparência atraente do seu blog. Aqui vamos mostrar como inserir / adicionar CSS no Blogger.

como inserir / adicionar CSS no Blogger-entendendo CSS no Blogger

Antes de adicionar CSS, você deve escrever CSS e antes de escrever o código de estilo CSS, você deve encontrar os seletores para os quais deseja alterar o estilo. Você pode usar as ferramentas do desenvolvedor do seu navegador para inspecionar o elemento, aqui não vamos detalhes sobre isso. Por exemplo, você sabe sobre h1, h2, h3, h4, h5 e H6 tags em geral e para modificar essas fontes você pode adicionar CSS como este abaixo.

h1 {font-family: "Times New Roman", Times, serif;font-size: 15px;font-weight: bold;color: rgb(56, 77, 187)}

mas o que você fará para alterar o layout da página, estilo da guia do menu, links, família de fontes, alinhamento, fundo ou cor do texto quando não souber a classe do elemento. É aqui que você tem que fazer uso da ferramenta de desenvolvedores do seu navegador. Basta clicar com o botão direito em um elemento e clicar em Inspecionar elemento onde você verá os elementos à sua esquerda e CSS à sua direita. Altere o código CSS e veja como as alterações resultam, por exemplo, aqui está o código CSS para a guia menu, que você achará diferente em seu modelo.

.tabs-inner .widget li a:hover {color: #fff;background-color: #FF9900;text-decoration: underline;display: inline-block;padding: .6em 1em;font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;border-left: 1px solid #ffffff;border-right: 1px solid #dddddd;}

usando a ferramenta inspect element, você pode visualizar as alterações CSS de qualquer elemento e, quando obter a aparência desejada, pegue o código CSS e execute-o em seu blog.

aplicando CSS no Blogger

existem duas maneiras de implementar CSS no Blogger uma é editando os arquivos de modelo diretamente e o outro método mais fácil é usar a opção Adicionar CSS no Designer de modelos do Blogger.

adicione CSS usando o designer de modelos do Blogger

adicionar CSS aqui é a maneira mais fácil e segura, pois não afeta seus arquivos de modelo principais. Além de adicionar CSS personalizado, o Blogger template designer permite que você altere facilmente o plano de fundo do seu blog, ajustando a largura, o layout, os estilos de fonte, as cores, a área do gadget, o conteúdo do rodapé etc.

• início de sessão para seu blog do Blogger, vá em Modelos e, em seguida, clique em personalizar
• Agora você vai ver o designer de modelo do Blogger página com 5 algumas opções
• Clique na opção Avançado, seleccione o sub itens para baixo e, em seguida, escolha Adicionar CSS.
• em seguida, você verá um campo ao seu lado direito e é aqui que você deve adicionar seu CSS personalizado.

adicione o código CSS personalizado acima, veja as alterações abaixo e quando tudo estiver pronto, clique em “Aplicar ao blog” na parte superior.

adicionando CSS editando seu modelo do Blogger

A outra maneira de aplicar CSS é editando diretamente o CSS principal ou adicionando um CSS personalizado ao seu arquivo de modelo. Não sugerimos este método para iniciantes porque o uso impróprio pode levar a quebrar seu modelo. Portanto, antes de adicionar CSS usando este método, certifique-se de fazer backup; veja como fazer backup e restaurar o modelo do Blogger.

• Em seu painel do Blogger, vá em Modelo e, em seguida, clique em editar HTML
• Agora você vai ver o seu modelo de códigos, basta pressionar CTRL + F para pesquisar e, em seguida, procure por <b:skin>
• Expandir o <b:skin> e você vai ver o CSS para seu modelo de blog aparece.

leia também: Como fazer um backup completo do Blogger

comece a editar o CSS existente ou você pode adicionar seu CSS personalizado, mas aqui você não obtém a opção de visualização que você obtém no Blogger template designer. Finalmente Salve seu modelo quando terminar.

espero que este artigo guiou você a adicionar CSS no Blogger. Comece a embelezar seu blog e para obter mais atualizações, Inscreva-se em nossos feeds RSS.