Postagens | Dicas blog, Imagem, Pc Windows

Mudar tamanho e cores do título dos gadget do blogger

Mudar a aparência do título dos gadgets no BlogSpot, cores de fundo ou fonte assim como tamanho ou colocar uma imagem de fundo para o título dos gadgets, widgets ou elementos do blogger.

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
adicionar código no Css blogger

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:
  1. Clique em Design,
  2. Em seguida Editar Html,
  3. 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.
  4. Em Editar Html tenha cuidado com os caracteres que devem ser respeitados( ' : ; ."{} etc).
  5. 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 normal 100% Helvetica, Arial, sans-serif">
  6. 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;
    }
  7. use os códigos dos exemplos abaixo para fazer seu estilo, adicione de acordo com o que você quer.
  8. 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

background
Ampliada apenas na largura:


imagem usada como background titulo ampliada

Imagem tem tamanho 352px por 1px

fundo do titulo
Mesma imagem ampliada na altura:

imagem fundo do titulo

Imagens no tamanho original:

fundo titulo



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(http://3.bp.blogspot.com/_NrcfzTud13U/SWotjy7jW-I/AAAAAAAAAaA/_54qMT7zXOM/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:
fundo tituloO 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(http://2.bp.blogspot.com/_NrcfzTud13U/SWlinlwMRDI/AAAAAAAAAZI/7U8FTawtNHs/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(http://2.bp.blogspot.com/_NrcfzTud13U/SWlinlwMRDI/AAAAAAAAAZI/7U8FTawtNHs/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:
imagem usada como background titulo ampliada 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(http://3.bp.blogspot.com/_NrcfzTud13U/SWlzObCOeRI/AAAAAAAAAZ4/UVgiCkNWKiU/s400/background-titulo.PNG) center repeat-x;
color:red;
font-size: 1.3em;padding: 4px;

}

Título do gadget


.sidebar h2 {
background: #E4EFF1 url(http://3.bp.blogspot.com/_NrcfzTud13U/SWotjy7jW-I/AAAAAAAAAaA/_54qMT7zXOM/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(http://4.bp.blogspot.com/_NrcfzTud13U/SWlruKJ0e4I/AAAAAAAAAZw/yohugFX3P3A/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.

24 comentários:

  1. 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.

    ResponderExcluir
  2. Po mo legal isso ae vlw pelo post


    acessem meu blog
    http://xdestroydownloadsx.blogspot.com

    ResponderExcluir
  3. 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?

    ResponderExcluir
  4. eu nao consegui colocar o background :s
    a fonte muda, mas o back nao aparece

    ResponderExcluir
  5. Thom w.

    Se não existir esse código:
    .sidebar h2 { }

    Você deve adicionar para conseguir. E entre chaves o background e fon-size, etc

    ResponderExcluir
  6. muito bom esse tutorial, ajudou muito!

    parabéns! =)
    passa no meu blog pra dar uma conferida =)
    abraços!

    ResponderExcluir
  7. Bom dia.

    Tenho 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;
    }

    ============================

    ResponderExcluir
  8. Edi Comentou:

    Mudar 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.

    ResponderExcluir
  9. Edi
    Como 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.

    ResponderExcluir
  10. 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.

    ResponderExcluir
  11. BLOGS DO ED

    Se 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>

    ResponderExcluir
  12. melhor post ateh agodra q ue encontrei sobre o assuntu, vlw....

    ResponderExcluir
  13. Vlww... fera ajudou muitoo ;)
    visita aew..:
    www.tvrayban.tk

    ResponderExcluir
  14. Anônimo7/3/11

    Nã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! ¬¬

    ResponderExcluir
  15. Poxa 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!!

    ResponderExcluir
  16. Ola... 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!

    ResponderExcluir
  17. bah amigo(a) vlw mesmo!ajudou bastante

    ResponderExcluir
  18. Eu fiz tudo certo e não apareçe!

    ResponderExcluir
  19. Fefe

    Você pode estar usando um template da web que não tem estrutura igual a maioria dos modelos do blogger ou errou em algo

    ResponderExcluir
  20. Caramba o melhor tutorial que eu já vi.
    Agora entendo como ficam legais.

    ResponderExcluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares