5 maneiras de inserir códigos CSS personalizados no seu Blogger

Cascading Style Sheets (CSS) são usados ​​principalmente para denominar suas Páginas da Web ou alterar a aparência do seu Blog. Todo mundo quer fazer seu blog diferente e original de outro seja alterando layouts ou adicionando alguns elementos para além de seu nicho.

Existem basicamente cinco opções para adicionar códigos CSS em blogs do blogger e você tem que escolher um deles como a melhor opção que você pode facilmente aplicar para o seu blog. Geralmente, a escolha para a adição/mudança de códigos CSS vai depender de suas necessidades, como se você deseja adicionar CSS para o blog inteiro ou apenas quer denominar qualquer elemento particular. Sidebar, rodapé, post único, Gadget  específico etc.

1) Adicionar CSS no Blogger pelo Designer de Modelo

Esta é uma opção simples e melhor para aqueles que são novos no mundo dos blogs. Neste método, você não precisa se preocupar com os erros a serem enfrentados ao adicionar códigos CSS em template blogger.

Esta customização foi fornecido pelo Designer de Modelo e você pode mudar qualquer aspecto do seu blog, adicionando códigos CSS no campo Adicionar CSS localizado sob a aba Avançado.

A melhor parte desta ferramenta é que você pode ver o retorno instantaneamente em uma visualização ao vivo sob o editor.

Passo 1:

Entre na sua conta do Blogger no blogger.com/home e clique no blog que quer acrescentar o código.

Passo 2:

A partir de seu Painel do blog, vá até a aba Modelo do seu blog e clique no botão Personalizar.

Passo 3:

Sob o menu na guia Avançado  no painel esquerdo, role para baixo e selecione Adicionar CSS. No entanto, se você estiver usando um terceiro Blogger Template, não pode ser apenas Adicionar sub-menu CSS no painel da direita.

Passo-4:

Agora você pode adicionar CSS no campo localizado sob Adicionar CSS personalizado para substituir estilos existentes de seu blog.

2) Adicionar CSS no Modelo do Blogger através da opção Editar HTML.

Para usar esse método, você deve ter alguns conhecimentos básicos sobre o Editor HTML  do seu modelo do blogger. Em outras palavras, se você estiver familiarizado com os códigos HTML, você pode adicionar códigos CSS mais facilmente em seu blog.

No entanto, eu recomendo fortemente que você faça o download de uma cópia do seu modelo de blog antes de fazer quaisquer alterações ou editar o código.

Para adicionar qualquer código CSS no template blogger diretamente, vá para a guia Modelo do seu blog e clique no botão Editar HTML.

No editor HTML aberto de seu blog, você vai ver um monte de linhas com vários códigos. Clique ou coloque o ponteiro do mouse em qualquer lugar nos códigos dados e procure por ]]></b:skin>

Agora, antes ou acima de ]]></b:skin> adicione seus códigos CSS para alterar quase qualquer aspecto da aparência do seu blog. Note que cada Cascading Style Sheets (CSS) começa com um nome de marca e códigos CSS devem ser inseridos entre os {} Parênteses na folha de estilo.

Por exemplo:

/* Amostra de código CSS Showeblogin da tag body */
body {
font-family:"Times New Roman",Serif;
color:#123456;
background:#654321;
border:solid 2px red;
}

Depois de adicionar os códigos, clique na visualização do modelo para ver os efeitos e depois só salvar o modelo. Você também pode adicionar seu CSS entre <style> códigos CSS aqui </ style> em qualquer lugar do modelo, mas deve ser melhor para inseri-lo antes de fechar a tag </head> .

3) Insira códigos CSS através de Gadgets

Este método também é isento de riscos e que podem ser úteis paro neste recurso recém-chegado da plataforma de blogs. Além disso, se você tem monte de códigos abertos de CSS, esta abordagem vai ser amigável.

Basta visitar seu Painel blog e vá para a guia Layout e, em seguida, clique em qualquer Adicionar um Gadget que se encontra nas áreas de widgets do seu blog.

Agora, role a página e clique em HTML/JavaScript e, em seguida, adicionar seus códigos CSS existentes entre:

<style type="text/css">
/* Coloque seu código CSS aqui. */
</style>

4) Vincular arquivos CSS externos no Blog

Novato não deve usar esse método porque é preciso muito cuidado e conhecimento técnico como a adição de CSS no Editar HTML através do Modelo do blog.

Mas, temos um truque simples para isso. Então, se você tem arquivo CSS externo e deseja vincular o arquivo CSS hospedado externamente para seu modelo de blog, você pode fazer isso da seguinte forma:

<link type="text/css" rel="stylesheet" href="endereço-externo-de-hospedagem-style.css">

Vá para o seu Editor HTML de modelo de blog e procure a tag <head> e, em seguida, adicionar os códigos HTML acima com o link de seu arquivo style.css hospedado externamente após/abaixo do <head> ou antes/acima da tag</head>.

No entanto, o link deve ser colocado apenas dentro das tags <head> ... </head>. O atributo "rel" com o valor "stylesheet" permite que o navegador reconheça que o atributo "href" fornece o endereço Web (URL) para sua folha de estilo.

5) Adicionar CSS para Single Post de seu Blog

Esta técnica é para ser usado para estilo em linha. Em outras palavras, você pode aplicar esse método para um post de blog específico ou página da web.

Assim, se você quer fazer a formatação apenas de uma determinada parte do texto em seu blog de uma só vez. Aqui está o formato para denominá-lo:

<span style="CSS Codes here">Write your text here</span>

Suponha que você queira estilizar um texto específico (Showeblogin) em um parágrafo específico, então você pode fazer isso com a ajuda deste simples codificação.

Vá para o editor post (HTML) em vez do modo de Escrever e adicione os seguintes códigos CSS:

<span style="color:red;font-weight:bold;background-color:#f3f3f3;"> Showeblogin </span>

Aprecie!

Fonte: http://www.superwebtricks.com/blogger-beginner-guide/add-css-into-blog-template/