» 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

Link para Texto na Mesma Página





Sabe quando você está escrevendo um texto grande e quer fazer referência a alguma parte do seu texto, mas não sabe como levar o leitor até lá sem que ele procure.
Pois é ontem aprendi como colocar um link onde a página desce ou sobe automaticamente até o texto indicado no link.

Para os webmasters isso é mamão com açúcar, mas para mim foi um super achado. Posso aplicar este recurso em tutoriais extensos onde quero que a pessoa volte numa explicação sem que ela tenha que procurar. O simples fato de ter que procurar a explicação faz com que a pessoa se desinteresse de ler o tutorial e com isso não aprende.

Então vamos lá:

» Você também pode usar este recurso para indicar para voltar ao topo da página.

♦ Estas tags abaixo indicam onde você vai levar o seu leitor:
<a name="nome da Ancora">Você escreve entre estas tags.</a>
» Devem estar localizadas onde você quer que o leitor chegue.

♦ Este comando abaixo indica o link para chegar no local que você determinou anteriormente:
<a href="#nome da Ancora">Voltar para o começo</a>

♦ Vou exemplificar para você entender melhor, veja o texto abaixo:

<a name="loremipsum">1. Lorem ipsum </a>consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet <a name="minimum">minimum,</a> regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. <a href="#minimum">Clique aqui para Voltar ao Parágrafo 3</a>Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam.

<a href="#loremipsum">Clique aqui para Voltar ao 1ºParágrafo</a>


♦ Agora o texto com o recurso aplicado:

1. Lorem ipsum consequat concludaturque mea in, ei nostro convenire duo, wisi quas electram mel te. Eam cu hinc reprehendunt. Usu eu alienum euripidis, ut lorem homero civibus eum. Mei ne mazim democritum, tation sanctus suavitate in has, atqui omittantur ut vim. Disputationi consequuntur delicatissimi in sit, vitae pertinax consetetur te nec.

2. In sed ipsum deseruisse disputationi, per at sapientem philosophia. Tale delicatissimi et est, at posse utinam pro. Dicat maluisset eu nec. Cum quodsi apeirian accommodare ex, mel cu quodsi consulatu efficiantur, ex veniam mollis integre mea. Pri amet falli viderer ei, tempor option scriptorem in eos.

3. An quo stet minimum, regione tritani eligendi mel et. Qui choro essent no. Cu has rebum ullum interpretaris, et enim appareat concludaturque cum. Harum nostrud vulputate pri no, ei adhuc clita fastidii vim. Te fugit quidam pri, his dolorum suscipit facilisis ea.

4. Dictas fuisset senserit nam te, vix ut scripta facilisis posidonium, ei amet adolescens consequuntur usu. Ei eirmod vocibus temporibus eos, kasd habeo feugiat id has, decore consul feugait an nec. At vel rebum propriae imperdiet, ne iudico epicuri philosophia ius. Dicant postulant an sea, puto adhuc mea at, dicunt evertitur est no. His quis melius option at, saepe congue antiopam ei cum, his probo iusto dolore at. Alii iisque aliquip cu pro, his eu homero rationibus dissentiet.

5. Dicit noluisse splendide et ius, ei nostrud pericula persecuti quo, ea agam zzril labores eum. Populo propriae incorrupte ius ne, eam lucilius cotidieque an. Eum illud tractatos deterruisset ne, quo ea errem choro viderer. Et sed dicta commodo, meis falli sit cu, populo commune voluptaria ei per. Ne veri sale malorum pri, mea sanctus prodesset ne, adhuc congue assueverit eam eu. Unum quaeque voluptatum pri te, sonet nostro probatus usu cu, mea ludus tibique vulputate id.

6. Nec id probo quodsi incorrupte. Ius no harum lucilius contentiones. Erant nostrum et mea, sit accusam mediocrem vulputate ea, doming scriptorem mei ex. Sea elitr discere accumsan cu, in nec audiam eloquentiam. Malis omnes argumentum in eos.

7. Usu ei quod torquatos assueverit, vel eu commune persecuti. Tollit munere doctus pro id, id error gloriatur philosophia sed, deserunt explicari nec ex. Sed te iusto signiferumque, his eu iusto nostrum, partem aliquam facilisis ei ius. Clique aqui para Voltar ao Parágrafo 3Cu qui meis exerci ornatus, mel cibo modus quaestio et, ex prima quodsi habemus vis. Nec in enim primis deterruisset, pro ei quem malorum volutpat. Eu vel brute invidunt.

8. Ex velit nobis quo, no possit legimus nominati ius. Simul dissentias cum te, pericula periculis complectitur in vis. Mel malis elitr propriae ut, atqui assum nominavi est in, vim salutatus splendide et. Te est iuvaret denique lucilius, vocibus expetendis quo in, at sed decore delicata percipitur. Eum prima propriae concludaturque id, et duo tation ullamcorper. Qui alii dolorem imperdiet an, alia repudiare reprimique ea qui, dico adipisci interesset eam in. Everti instructior in qui, nec et ignota aliquyam. Clique aqui para Voltar ao 1º Parágrafo


» Note que o local onde você quer indicar deve ter o mesmo nome de Âncora para que o link funcione.Clique aqui para Voltar aos Códigos das Tags

Fonte: Aprendi esta dica no Fórum Webmasters Online

Obs: Se o blogger interpretar o link para a edição do seu post, peça para editar o post e retire o link automático do blogger.

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