Mensagens

Criar um Menu

Imagem
Olá a todos, a pedido de um visitante do blog, hoje vou ensinar a criar um menu desde o início. Não é difícil, apenas precisas de ter um pouco de atenção e criatividade.
Primeiro, vai a design → editar html → aperta F3 e procura pela tag: ]] ></b:skin>. Depois de a encontrares, cola ANTES dela o seguinte código. .NOMEdoMENU {
  font-family: TIPO DE LETRA;
  font-size: TAMANHO DO TIPO DE LETRApx;
  color: #COR DO TIPO DE LETRA;
  text-transform: TRANSFORMAÇÃO DO TEXTO;
  letter-spacing: ESPAÇAMENTO DAS LETRASpx;
  text-align: ALINHAMENTO DO TEXTO;
  font-weight: bold;
  margin: ESPAÇO ENTRE OS LINKS DO MENUpx;
  line-height: ALTURA DA LINHApx;
  padding: ESPAÇO ENTRE O TEXTO E A MARGEMpx;
  width: LARGURA DO MENUpx;
  height: ALTURA DO MENUpx;
  float: FLUTUAÇÃO DO MENU;
  border-radius: ARREDONDAMENTO DAS BORDASpx;
}
.NOMEdoMENU:hover {
  background: #COR DE FUNDO DO MENU EM HOVER;
  border-radius: ARREDONDAMENTO DAS BORDAS EM HOVERpx;
}
Tipo de Letra (font-family) Define o t…

Fazer Cópia de Segurança do Design e Conteúdo do Blog

Imagem
Olá, neste tutorial-dica vou ensinar como guardar todos os posts do blog e o design (codificação html), no vosso computador. Para caso aconteça alguma coisa com o vosso blog, não perderem tudo o que tinham lá. 
Guardar Parte do Design (Codificação) Ora bem, para guardar a parte do HTML do blog, basta aceder a Tema > Efetuar Cópia de Segurança/Restaurar > Transferir Tema. E pronto, a parte do HTML está salva no computador.
Guardar Posts e Páginas do Blog Para guardar o conteúdo do blog, basta ir a Definições > Outros > Criar cópia de segurança de conteúdo. Desta vez o que ficou salvo no teu computador, foi todo o conteúdo do teu blog.
Deves fazer download da codificação e do conteúdo do blog, pelo menos uma vez por mês, para não acontecer nenhum desastre e perderes tudo o que tinhas lá.

Editar e Aplicar Tema PSD - Parte 3

Imagem
Olá novamente, nesta última parte deste Big Tutorial sobre editar e aplicar no blog um Tema PSD, vamos fazer as últimas alterações na codificação do Tema PSD.
Nesta última parte do big tutorial, vou disponibilizar o Menu PSD, ensinar a alterá-lo, ensinar a mapeá-lo e ensinar a posicioná-lo no blog, com CSS. Eu sei que há outras formas de mapear o menu, mas eu vou ensinar, da forma que eu acho mais simples, e para não ser tão confuso, vou disponibilizar todos os códigos, e ensinar a colocá-los.

Editar e Aplicar Tema PSD - Parte 2

Imagem
Olá, aqui estou eu novamente com a segunda parte do Big Tutorial sobre editar e aplicar no blog um Tema PSD. Nesta parte, vou explicar toda a Codificação do Tema HTML, que eu disponibilizei na primeira parte.

Para isso, precisas de estar muito atento, para não apagares nenhum código que seja necessário ao teu tema. Para ficar tudo explicadinho, eu nesta parte (a parte da codificação e alteração dos códigos do tema), resolvi tirar prints a todo o HTML da personalização do blog e explicar os vários códigos. Claro que me deu trabalho, mas sem dúvida, vocês merecem.

Neste momento, o aspeto do teu blog ainda é este (print). Aquela parte, da descrição do blog, vou ensinar mais para a frente.

Agora de acordo com os prints que eu vou disponibilizar e com as explicações, vais começar a alterar a personalização do teu blog.

Todos os prints, que eu vou disponibilizar, têm várias explicações, peço-te que as leias. Mesmo assim, vou explicar o que acho mais importante também aqui no post.
Então v…

Editar e Aplicar Tema PSD - Parte 1

Imagem
Hey pessoal, como falei neste post estive a preparar um Big Tutorial de três partes, sobre editar e aplicar no blog um Tema PSD. Neste big tutorial, vou disponibilizar um Tema PSD, feito por mim e um Tema Base HTML, codificado por mim, com ajuda de outros blogs. Vou explicar tudo sobre o que têm de fazer, para o aplicar no tema que eu disponibilizo e como alterá-lo no Photoshop.

Este big tutorial foi adaptado de um que elaborei há três anos para um blog que tinha na altura, o Blog Html e Css (html-e-css.blogspot.com), daí todos os prints terem esse link. Atualmente, o blog não existe mais e o link redireciona para este meu novo blog, o Pedro's Designs.
••Download do Tema PSD
••Download dos Materiais Utilizados (Paleta de Cores e Fontes)
••Download do Tema HTML

Ora bem, para começar com o big tutorial, tens de fazer download do Tema HTML, que eu disponibilizo acima. Depois para o aplicares no blog, vai a Modelo → Efetuar Cópia de Segurança / Restaurar → Escolher Ficheiro e seleciona…

Criar Um Tema Em L

Imagem
Olá, hoje vou postar o Big Tutorial #02 (só de uma parte), de como Criar Um Tema Em L.

Neste post, vou utilizar vários prints, para vocês perceberem melhor como fazer todos os passos. Como devem calcular, o post vai ser um pouco extenso, mas peço-vos que o leiam até ao final, sem preguiça.

Neste post só irei ensinar a criar o tema no Photoshop; a codificação terá de ser feita por vocês, com orientação do Big Tutorial #03: Editar e Codificar um Tema PSD, que irei postar brevemente aqui no blog.
Primeiro, abre o teu photoshop, e cria um novo arquivo, com o nome "Tema Em L", com 850px de largura, 700px de altura e com plano de fundo transparente (print).

Agora, para ser mais fácil trabalhar no tema, define quatro guias (guides) iniciais, para isso vai a Visualizar > Nova Guia, e traça as seguintes guias (uma de cada vez):
Vertical > Posição: 10px .Vertical > Posição: 840px .Horizontal > Posição: 10px .Horizontal > Posição: 690px . Depois de teres marcado as qua…

Como Fazer um Template - Parte 4

Imagem
Olá a todos, esta é a última parte do big tutorial Como Fazer um Template, espero que tenham gostado de todo o tutorial e que o aproveitem. Se tiverem dúvidas, não hesitem em perguntar nos comentários.

Para terminares de fazer o teu template, faltam apenas alguns pequenos ajustes. Agora vamos personalizar a cor dos link (hiperligações) do blog.

Personalizar os Links dos PostsNo painel, vai a design → editar html → aperta F3 e procura pela seguinte tag: 
a:link {
text-decoration:none;
color: #ff9900;
}
a:visited {
text-decoration:none;
color: #b87209;
}
a:hover {
text-decoration:underline;
color: #ff9900;
} Depois de achares a tag acima, substitui-a pela tag abaixo, e altera-a conforme os comentários à frente de cada linha de código.
a:link {
text-decoration:none; /*transformação do texto*/
color: #ff9900; /*cor do link em estado normal*/
}
a:visited {
text-decoration:none;  /*transformação do texto*/
color: #b87209; /*cor do link visitado*/
}
a:hover {
text-decoration:none; /*transfor…