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:
Comentários (Atom)


.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)

.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)


.png)
.png)
.png)
