» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Como Identificar Cores




Se você quer colorir algo em seu blog e não sabe como obter o código HTML da cor.
Aqui vão algumas sugestões para te ajudar.
1º - Site Color Schemer
Clique AQUI para ir até o site.

Escolha a cor desejada e copie onde está indicado na figura o código HTML da cor, sem esquecer de colocar o símbolo # antes da numeração ou números e letras.

2º - Software Pixel Pic

O Pixel Pic é um software grátis que você pode baixar aqui: Pixel Pick
Depois de instalado quando você clica no programa e o ativa você pode selecionar com o mouse qualquer cor que desejar na tela do seu computador, clica em cima da cor que o programa te dá os vários códigos que representam esta cor. Então é só copiar o código desejado e usar. (Geralmente o HTML)
Depois ele fica na barra de ferramentas no cantinho caso você precise dele de novo.
Entre no site do software, use o tradutor do seu chrome e aprenda mais.

3º - Software Achronism Studios

Faça o download deste software neste site: Software
O princípio de ação é parecido com o anterior.

4º - Whats Its Color

Este é um serviço online onde você envia o arquivo de uma foto. O site identifica as cores principais e gera uma tabela de cores informando o código HTML das mesmas.
Acesse o site neste endereço: What Its color

5º - Nome das Cores
Este site é [.com.br] significa que é em português e do brasil.
Nele você seleciona a cor que deseja e ele fornece o código HTML.
Também tem uma lista de Nomes de cores em inglês e seus respectivos códigos mais abaixo no site.
Você pode acessá-lo clicando neste link: Nome das Cores

Espero que esta lista ajude!
Veja Também:
Para completar o conteúdo:
♦ Este é um software que identifica cores» Conhecem o Tray Color?
Site com Cores e seus Códigos para o seu Blog/Site

Como Colocar uma Imagem no Título do Post




No template Blue Love, adicionei uma imagem no Título do Post.

Atendendo a pedidos vou explicar como fiz isso.

1º - Encontre no bloco de códigos CSS do seu template em Modelo→Editar HTML
O código de comando do Título do Post geralmente é este .post h3 ou .post-title ou h3.post-title (Utilize Ctrl+F)

Aqui vou usar este bloco de códigos:

.post h3 {
background:transparent url("URL da IMAGEM") no-repeat left top;
margin:.25em 0 0;
padding:10px 0 8px 50px;
font-size:140%;
line-height:1.4em;
color:$titlecolor;
}

» Veja a linha em vermelho, ela determina o fundo do título do post, onde você pode colocar imagem como está configurado acima.
Os outros comandos da linha significam:
no-repeat→ a imagem não deve repetir;
left → imagem alinhada à esquerda;(Você pode alinhar sua imagem onde quiser, basta ajustar a margem interna-padding)
top → imagem alinhada no topo.

No template Blue Love usei uma imagem com as dimensões 45x45px, que é um tamanho bom, prefira imagens deste tamanho ou menores.

» Estão vendo a linha em verde. Ela determina as margens internas do título do post, que você deve sempre configurar para que o título não fique em cima da imagem.
♦ As medidas devem ficar nesta ordem para configurar as respectivas margens:
padding: 10px(margem superior) 0(margen direita) 8px(margem inferior) 50px(margem esquerda);
→ Notem que a margem esquerda é um pouco maior que a largura da imagem. Fique sempre atento a isto.

Nos templates 2010 do blogger por exemplo, no Modelo Simple vai aparecer o código:
h3.post-title, .comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}

Neste caso você deve separar os comandos h3.post-title do comments h4 ficando assim:
h3.post-title{
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
background:transparent url("URL da IMAGEM") no-repeat left top;
padding:10px 0 8px 50px;
}
.comments h4 {
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;
}
Para o código do título do post (h3.post-title) acrescente as linhas do background e padding como está acima e siga as orientações do post.

Espero ter ajudado!
Até mais!


Post atualizado em 20/09/2012

Não consigo adicionar o Gadget Páginas no meu Blogger




Estava criando um template e tentei colocar o gadget de links das páginas estáticas do blogger, mas toda vez que queria acrescentar aparecia que o gadget de páginas já estava adicionado, mas não aparecia no blog.
Como assim?
Aí resolvi procurar o porque de ele estar marcado como exibido e não aparecer.


Isso aconteceu porque as páginas ficam ocultas automaticamente.

Para que o gadget de links das páginas do seu blog apareçam você deve:

1º Clique em [Páginas] na página inicial do blogger.
Veja que suas páginas estão selecionadas para Não mostrar.

2º Clique em [Não mostrar] → aparecerá as opções para você "Mostrar" o gadget dos links das páginas estáticas do blog na parte superior do seu template ou nas laterais.
» Selecione onde você quer que fique o seu gadget.


3º Clique em [Salvar Organização].

Obs: Quando você seleciona para adicionar um Gadget e o de Páginas aparecer Já adicionado é considerado um bug do blogger.

Fonte: Fóruns dos Produtos do Google › Blogger ›


Para complementar o conteúdo:


Como usar Fontes Diferentes em seu Blog do Blogger




Como podemos ver, o blogger 2010 já possui nos seus templates mais opções de fontes além das tradicionais. Ótimo! Já estávamos cansados das mesmas: Arial, Trebuchet, Verdana,Times New Roman (Essa pra mim é a pior!).
Mas muitos usuários do blogger não usam os templates atuais e muitos dos templates customizados não possuem a opção de colocar fontes diferentes.

Vocês não imaginam o quanto fiquei feliz de aprender, alguns dias atrás, a alterar as fontes dos meus blogs e poder usar fontes "cutes". Acho lindo!

Claro que informação boa e útil não deve ficar exclusiva né. Então para quem ainda não sabe alterar as fontes do seu blog aqui vai o tutorial:

1º Escolha a fonte para o seu blog: 

Acesse o site: Google Web Fonts
» Escolha a fonte que mais lhe agradar.
» Neste caso eu escolhi a fonte Oregano representada pelo comando: font-family: 'Oregano', cursive;
» Se você estiver visualizando as fontes por palavras clique na setinha indicada na imagem abaixo▼


» Se você estiver visualizando as fontes por sentenças clique na setinha ao lado de Quick-use indicada na imagem abaixo▼

2º Colocando a fonte no HTML do seu Template:

» Role a página até a opção 3;
» Selecione o código da fonte ▼. Copie.


» Cole acima da tag <head> do seu template.
Para isso vá em: → Modelo → Editar HTML

ATENÇÃO

» Assim que colar a linha do código da fonte no seu template você deve fazer uma alteração IMPORTANTE.
Este é o código que você copiou no Google Web Fonts.▼
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
» No final da linha acrescente uma barra → / . Ficando assim:▼
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'/>

3º Como usar a fonte:

» Volte no Google Web Fonts e na opção 4 está o comando para integrar sua fonte no código CSS do seu template.

♦ Para mudar a fonte do título dos posts:
» Vá em Editar HTML procure por: (Use Ctrl+F)
.post h3 {
» Se você usa os novos modelos do blogger procure:
h3.post-title {
» Ou também você pode encontrar a linha:
.post-title {

» Adicione a linha abaixo na frente da chave {
font-family: 'Oregano', cursive;
Ficando assim:
.post h3 {font-family: 'Oregano', cursive;
outros comandos do título dos oists e fecha a chave }

» Acrescente a linha da font-family aos comandos do título dos posts.

Se aparecer mais de um h3.post-title ou .post h3 acrescente a linha da font-family em cada um deles. Faça o mesmo para os outros títulos.

♦ Para mudar a fonte do título do blog:
Repita o mesmo procedimento descrito acima, porém encontre a linha do comando do título do blog que é:
#header h1 {font-family: 'Oregano', cursive;
Outros comandos... fecha chave}

♦ Para mudar a fonte do título das gadgets (sidebars):
.sidebar h2 {font-family: 'Oregano', cursive;
Outros comandos... fecha chave}

♦ Você também pode mudar a fonte do blog todo colocando a font-family no comando:
body {font-family: 'Oregano', cursive;
Outros comandos... fecha chave}

OBSERVAÇÃO IMPORTANTE

Não sei se vocês perceberam, mas no 2º passo do tutorial na 3ª imagem eu realcei 2 dicas do próprio Google Web Fonts que dizem o seguinte:
1ª Dica: Usar muitos estilos de fonte podem retardar sua página web, selecione apenas os estilos de fonte que você realmente precisa em sua página web.
2ª Dica: Se você escolher apenas os idiomas que você precisa, você vai ajudar a evitar a lentidão na sua página.
Então atenção ao usar muitas fontes. Sei que dá vontade de deixar o blog super lindo, mas se exagerarmos podemos diminuir a velocidade de carregamento do blog e isso não é bom.

Espero que vocês tenham gostado!


A reprodução, parcial ou total deste post é proibida sem a autorização da autora.
A citação da fonte é obrigatória.


Fonte: Aprendi a Usar fontes diferentes no meu blog neste Site

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger