Bom, os gadgets são elementos que podem ser inseridos no blog, geralmente na lateral, e tem a opção de colocar um título.
Alguns blogs tem a opção Cor do título da barra lateral, na página Fontes e cores, mas talvez não tem cor de fundo, ou tamanho. Para isso pode ser mudado usando a opção Editar Html e mudar o Css.
Isso não é possível para quem usa um modelo clássico(antigo), entenda o que é, por que mudar e como nesse post: Mudar modelo do blogger para Design.
O código onde deve mudar a aparência do título dos gadgets do blogger é
.sidebar h2 {
Barra lateral e seu título, ou melhor, O Título dos gadgets dentro da lateral(sidebar)
h2 é um título, e, sidebar(barra lateral) é o local onde vão os gadgets.
Logo após .sidebar h2 { vai sua estilização e acaba com o próximo caracter fecha-chaves }
Se ainda não existir .sidebar h2 { } você pode adicionar ele dentro do CSS do seu blogger, pode ficar exatamente logo acima desse trecho de código ]]></b:skin>
Veja imagem, clique para aumentar
Veja o exemplo de um título da barra lateral, fonte vermelha:
.sidebar h2 {
font-size: 1.3em;
color: red;
}Os estilos devem terminar com ponto e vírgula cada, Exemplo:
color: blue;
Significa cor da fonte Azul.
background: red;
Cor de fundo vermelha.
background: green;
Cor de fundo verde.
font-size: 1.3em;
Tamanho da fonte, 1.3 vezes o tamanho normal.
font-size: 2em;
Tamanho da fonte, 2 vezes o tamanho normal.
color: #000000;
Cor da fonte representada por código Html hexadecimal que significa preta.
Onde mudar o o título do gadget
- No blogger:
- Clique em Design,
- Em seguida Editar Html,
- Antes de começar faça um backup do seu código clicando em Baixar modelo completo, só por precaução e segurança, Salve em seu computador.
- Em Editar Html tenha cuidado com os caracteres que devem ser respeitados( ' : ; ."{} etc).
- Para saber se seu blog está atualizado, apenas observe, que deve existir, no seu Html, um código parecido com esse abaixo:
<variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Helvetica, Arial, sans-serif" value="normal normal100%Helvetica, Arial, sans-serif"> - Perceba que cada propriedade geralmente está numa linha e termina com ponto e vírgula; e deverá continuar assim. Dentro das chaves você pode substituir códigos ou se não existir adicionar.
Você não deve copiar esse código inteiro, e sim apenas procurar se já existe em seu código os estilos que você deseja mudar ou adicionar, até porque ele só indica o tamanho da fonte.
.sidebar h2 {
font-size: 1.3em;
} - use os códigos dos exemplos abaixo para fazer seu estilo, adicione de acordo com o que você quer.
- Clique em Salvar alterações .
Veja exemplos de códigos que podem ser adicionados:
Tamanhos de fonte:
Apenas um, não deve existir entre as mesmas chaves dois font-size e o número deve ser seguido de em;font-size: 0.5em;
é metade da fonte "do texto"
font-size: 0.7em;
é 70% da fonte
font-size: 1.2em;
é 120% da fonte
font-size: 1.6em;
é 160% da fonte
font-size: 2em;
é 200% da fonte ou dobro
Cor de fonte:
color: #FF6A2E;cor da fonte, laranja
color: #6FB0E2;
Cor fonte azul
color: #38B63C;
cor da fonte verde
Tem mais códigos na página Fontes e cores do blogger.
Cor de fundo:
background: #FF6A2E;
cor do fundo, laranja
background: #6FB0E2;
Cor fundo azul
background: #38B63C;
cor de fundo verde
Cor de fundo e imagem no título da sidebar
Se deseja usar imagem de fundo no título do gadget, deve colocar cor de fundo, se a imagem não aparecer vai ter uma cor de destaque e que seja o oposto da cor da fonte.
Essas técnicas servem para não deixar o tempo de carregamento do blog muito lento, essas imagens podem ser pequenas porque elas irão repetir varias vezes quando usadas como fundo do título, fazendo parecer uma única imagem grande.
As imagens que usei, essa abaixo tem tamanho 1px por 36px
Ampliada apenas na largura:
Imagem tem tamanho 352px por 1px
Mesma imagem ampliada na altura:
Imagens no tamanho original:
Código usado para fundo de qualquer coisa é background: ; e junto com ele, isso quer dizer que são regras(qualidade, propriedade) para ele, então deve estar antes do ponto e vírgula.
1- uma cor a escolher
2-uma imagem url (endereço web e nome da image)
3-posição da imagem
4-pra onde a imagem repete, ou não repete.
Exemplo de código de fundo com imagem:
background: #E4EFF1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88aXN7iveWbmaNzcXs9yW4pOza_AFU5cy8DNjEdLc2Zj2r8ZCRZYp_3cPfnvdhy1fVc5JDTy4Svgmy9eeg-kbI7R22qK37O0QSAab0-b0959CAwy2p6C5p-nmtLZmGj_7PPywLW8glDWA/s400/backround-titulo.PNG) center no-repeat;Vou repetir.
Fundo= background:
Os códigos abaixo controlam o estilo do fundo:
1- uma cor azul= #E4EFF1
2- imagem= url(Aqui onde a imagem está hospedada na web)
3-posição da imagem= center
4- não repetir= no-repeat
5- fim= ;
Regras para a imagem background:
Posição:
Centro= center
Esquerda= left
Direita= right
topo= top
Base= bottom
Comportamento:
Repetir para toda parte= repeat
Repetir horizontalmente= repeat-x
Repetir verticalmente= repeat-y
Não repetir= no-repeat
Exemplo de título com imagem de fundo
Imagem usada:
O repeat-x faz a imagem repetir varias vezes horizontalmente, formando o efeito acima, isso é economia de bytes, e dependendo da criatividade da pessoa poderia até ficar bonito.Código para fundo: cor+ url(imagem)+ posição+ repetir horizontalmente;
background: #E4EFF1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQdor6HYHQAZ8Olu-HZPmjuP9XGLMxQE987c4aK_9AmC-K5t_pE6aDqPTzeGtOrI2th05X0Qna1jWVQq9R1bsqH74CpsVrUwdEQA6SCHFENXWzJ7V6yXEu5Ig4BQE_lmPAvod-qcGQYYl/s320/fundo.GIF) center repeat-x ;Códigos de título do gadget ou sidebar, prontos:
Esses são exemplos de como ficaria um código para os títulos para lateral do BlogSpot, mas isso pode variar um pouco porque cada modelo tem uma fonte especifica e outros estilos que podem mudar um pouco.
.sidebar h2 {
background: #E4EFF1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQdor6HYHQAZ8Olu-HZPmjuP9XGLMxQE987c4aK_9AmC-K5t_pE6aDqPTzeGtOrI2th05X0Qna1jWVQq9R1bsqH74CpsVrUwdEQA6SCHFENXWzJ7V6yXEu5Ig4BQE_lmPAvod-qcGQYYl/s320/fundo.GIF) center repeat-x ; color: blue;
font-size: 1.2em;
padding: 4px;
}Esse código é do título acima.
Título, imagem de fundo repeat-x center
Imagem usada, ampliada, para ver melhor:
Essa imagem foi feita usando o power point, e depois copiada para o paint para deixar nesse tamanho e salvar, ja que não sei fazer isso no power point.
.sidebar h2 {
background: BLUE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZY3F6hHjGcPuRgizV4teVOgiZUy7M07_uQTGS1-db-HIrtLsLNjnev6ZEBv9e2KZ_gp0bhF3NwuLMhEck3YAueJtLIDTJERpF2ZBO9mDxJXPgxRv9ijnD0r4ornJDSUsDaZ5lQ4pJgAQ/s400/background-titulo.PNG) center repeat-x;
color:red;
font-size: 1.3em;padding: 4px;
}Título do gadget
.sidebar h2 {
background: #E4EFF1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88aXN7iveWbmaNzcXs9yW4pOza_AFU5cy8DNjEdLc2Zj2r8ZCRZYp_3cPfnvdhy1fVc5JDTy4Svgmy9eeg-kbI7R22qK37O0QSAab0-b0959CAwy2p6C5p-nmtLZmGj_7PPywLW8glDWA/s400/backround-titulo.PNG) center no-repeat ;
text-align: center;
color: red;
padding: 4px;
font-size: 1.3em;
}Imagem pode ser feita em um editor photo...
Esse título acima eu usei um alinhamento de texto para que ficasse melhor na imagem de fundo:
text-align: center;
Alinhamento de texto no centro
Também usei um código para dar espaço suficiente para a altura da imagem, o padding é tipo uma margem a ser respeitada, ou um "escudo transparente".
padding: 4px;
é mais 4 pixeis em volta do titulo(.sidebar h2)
Cor de fundo é a cor dessa área do blog #E4EFF1, caso o título for maior que a imagem a cor da fonte fica visível .
Título com imagem de fundo Repeat-y
.sidebar h2 {
background: rgb(255, 185, 102) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Dwg0Zd5q6K29keFoUfnxv0EkRfw3qoFtdsI1Vrh37PIM0i4yHB-u9M3Za_YZxndW3XhW5DJY18xKBats6GdXwcvP7uHBD8b37jhE3-qJ6x7mfcqLOw0ghY6ldC-lPYt2LY-TBZ17t6ff/s400/fundo-titulo.PNG) center repeat-y ;color:BLUE;
font-size: 1.3em;
text-align: center;
}Esse código abaixo é a cor laranja para fundo:
rgb(255, 185, 102)
A imagem repete verticalmente com repeat-y e o título usa text-align: center; para que o texto fique no centro, pois combina melhor com essa imagem.
- Escolher novo modelo no blogger
- Mudar a fonte da descrição do blogger
- Colocar imagem-link no BlogSpot
- Menu muda de cor e link aumenta
- Colocar adsense acima dos posts no BlogSpot
- Aumentar o título da postagem
- Imagem e cor de fundo do blogger
- Analise de visitas de site ou blog
- Adicionar enquete no blog ou site
- Colocar barra rolagem em div, caixa com scroll
ola to tentando colocar um gif no titulko do meu blog mas a imgane nao fica no cerntro e esta muito grande chegando ao poster poderia mim ajudar com isso agradeço desde ja.
ResponderExcluirPo mo legal isso ae vlw pelo post
ResponderExcluiracessem meu blog
http://xdestroydownloadsx.blogspot.com
Gostaria de colocar o título no centro e como fundo uma figura em meu blog. A figura eu consegui colocar mas o título fica no topo. Poderia ajudar-me?
ResponderExcluireu nao consegui colocar o background :s
ResponderExcluira fonte muda, mas o back nao aparece
Thom w.
ResponderExcluirSe não existir esse código:
.sidebar h2 { }
Você deve adicionar para conseguir. E entre chaves o background e fon-size, etc
muito bom esse tutorial, ajudou muito!
ResponderExcluirparabéns! =)
passa no meu blog pra dar uma conferida =)
abraços!
vlw
ResponderExcluirBom dia.
ResponderExcluirTenho um blog ( http://oqueemeuenosso.blogspot.com/ ) e gostaria de mudar somente o tamanho da font de apenas um Gadget (O que você encontra por aqui).
Gostei de suas dicas mas não consegui encaixar o que você disse com o que encontrei no meu HTML.
Se vc puder me dar uma luz, agradeço.
Abaixo segue o HTML
T+
=============================
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
============================
Edi Comentou:
ResponderExcluirMudar somente o tamanho da font de um Gadget é muito difícil, nem sempre possível, vou pensar em escrever sobre, quando o fizer comentarei aqui.
Você não conseguiu mudar fonte e cores do título do gadget porque talvez não possui .sidebar h2 { } em seu css, nesses casos você pode adicionar, com o tamanho de fonte e cores entre-chaves.
Edi
ResponderExcluirComo comentei anteriormente é realmente difícil alterar o estilo de alguns gadgets, você pode tentar mudar a fonte de um gadget, clique aqui, mas vai precisar se esforçar.
Olá amigo como faço para alinhar ao centro o adsese do google no meu blog pois ele fica a esquerda colado na coluna, por favor me ajude, sem mais Edson e obrigado.
ResponderExcluirBLOGS DO ED
ResponderExcluirSe você obteve seu código no adsense, pode "cercar ele com uma DIV com style center, mais ou menos assim:
<div style="text-align:center;">
COLOQUE AQUI SEU CÓDIGO(SUBSTITUA AS MAIUSCULAS)
</div>
melhor post ateh agodra q ue encontrei sobre o assuntu, vlw....
ResponderExcluirVlww... fera ajudou muitoo ;)
ResponderExcluirvisita aew..:
www.tvrayban.tk
Você é 1000 cara!
ResponderExcluirmuito bom
ResponderExcluirNão sei pq, mas aqui o title do sidebar fica em negrito. Acho q é por causa do H2. E não consigo trocar pra H3! ¬¬
ResponderExcluirPoxa muito bom o site todo, tenho um pouco de dificuldade de lidar com o blogger "blogspott" já que o html dele não funciona bem no frontpage e em outros editores de html. Confesso que procurei em toda a net, e só achei aqui essa informação! Parabéns pelo site e obrigada por compartilhar!!
ResponderExcluirOla... Estou criando um blog, e todas as dicas que eu ja havia lido, nao entendia completamente. Agora que encontrei seu blog vou conseguir fazer varias alterações, pois são bem claras. Muito obrigada!
ResponderExcluirbah amigo(a) vlw mesmo!ajudou bastante
ResponderExcluirEu fiz tudo certo e não apareçe!
ResponderExcluirFefe
ResponderExcluirVocê pode estar usando um template da web que não tem estrutura igual a maioria dos modelos do blogger ou errou em algo
Caramba o melhor tutorial que eu já vi.
ResponderExcluirAgora entendo como ficam legais.
muito bom esse tuto
ResponderExcluir