21 abril 2012
0
Modificar títulos dos posts
Abra o HTML do seu blog e aperte F3, procure por:
h3.post-title {
Logo abaixo desse trecho cole o seguinte código:
background:transparent url(LINK DA IMAGEM AQUI) no-repeat bottom;
align: center;
margin:.25em 0 0;
padding: 40px 5px 5px 50px;
Créditos : cherry-liah
h3.post-title {
Logo abaixo desse trecho cole o seguinte código:
background:transparent url(LINK DA IMAGEM AQUI) no-repeat bottom;
align: center;
margin:.25em 0 0;
padding: 40px 5px 5px 50px;
Coloque o link da imagem onde se pede.
As medidas do "padding" deste código se ajustam á uma imagem de 500x60 pixels. Se a imagem que você for usar tiver um tamanho diferente, você terá que alterar os valores do padding. Lembrando que as medidas do padding seguem esta ordem:
padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda);
Visualize se ficou bom e depois salve ou cancele.
Se quiser colocar apenas uma cor de fundo, basta colocar esse código abaixo de h3.post-title { :
background-color: #codigodacor;
1
Mudar cor dos títulos dos Gadgets
Nesse tutorial estou passando uma dica de como modificar a dor da sua barra lateral do blogger.
Clique em HTML ~> Expandir modelos de widgets ~> Ctrl+F e procure por h2.
Logo apos vai está mais ou menos assim:
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}
background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/
Clique em HTML ~> Expandir modelos de widgets ~> Ctrl+F e procure por h2.
Logo apos vai está mais ou menos assim:
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
Então apague toda essa área e coloque esse código aqui:
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}
Caso queira trocar a cor do fundo por uma imagem troque essa parte
background: #fbfbfb; /*Cor de fundo*/
Por:
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/
Antes de salvar é sempre bom visualizar primeiro.
0
Barra de rolagem colorida
Em HTML perte Ctrl+F, procure por ]]></b:skin> e cole antes esse código:
/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}
11 abril 2012
10 abril 2012
Assinar:
Postagens (Atom)