Onde e como BAIXAR um TEMPLATE para seu BLOG.

Iaí povão!!! Agora eu vou mostrar de uma maneira bem fácil como e onde baixar um modelo de template para deixar seu BLOG fashion!!

Primeiro de tudo, vou deixar aqui uma pequena lista de sites para download e visualização de templates para seu BLOG, lembre de deixar o BLOG com a cara da sua EMPRESA, um bom BLOG ajuda a expandir sua EMPRESA com um custo baixo ou nulo e um grande retorno!

http://maistemplate.blogspot.com.br/

http://btemplates.com/

http://www.mundoblogger.com.br/templates-gratuitos

http://www.siteparaempresas.com.br/blog/?p=4343

http://www.btemplates4u.com/

http://www.dhetemplate.com/

http://www.temasblogspot.com/

http://www.template-para-blog.com/

No caso, para nossa aula, vamos utilizar o http://maistemplate.blogspot.com.br/, de simples uso e com a opção de demonstração do TEMPLATE, podemos visualizar como vai ficar o BLOG da sua EMPRESA antes mesmo de aplicá-lo.

Ao acessar o http://maistemplate.blogspot.com.br/, nos deparamos com a tela inicial, escolha qual modelo chama mais atenção ou combina mais com a sua EMPRESA, após isso, clique no modelo escolhido:

Após a escolha do modelo, na nova página temos a opção de DOWNLOAD e DEMONSTRAÇÃO, clique em DEMONSTRAÇÃO para visualizar o TEMPLATE. Gostou? Confira todos os detalhes.

Depois de visualizar e escolher o modelo, vamos baixá-lo no nosso micro, como faz? Volte para para a página do TEMPLATE e clique na opção DOWNLOAD.

O arquivo agora vai ser salvo, observem os próximos passos:

Continue seguindo a ordem:

Escolha o local para extrair o TEMPLATE da sua EMPRESA:

Confira se o arquivo foi extraído com sucesso:

Galera ROCHEDA, para aplicar esse template escolhido, siga o passo a passo da aula
COMO ALTERAR O TEMPLATE DO SEU BLOG!

Como alterar o TEMPLATE do seu Blog!

Hoje vou mostrar como trocar o template de seu Blog na Nova Interface do Blogger.


1- Entre em sua Conta Blogger

2- Clique no menu lateral na opção Modelo

3 - Neste mesma página no canto  direito da sua tela clique na opção fazer backup/restaurar

4 - Clique na janela que irá se abrir na aba escolher arquivo

5 - Procure dentro  do seu computador o arquivo do novo template ( xml)

6- Clique sobre o arquivo e mande abrir carregar - fazer upload do arquivo

7 - Salve e mande visualizar, pronto seu novo template já está instalado em seu Blog.

8 - Observem como ficou meu BLOG, lógico que ainda existem edições a serem feitas! :D

CORES E CÓDIGOS - HTML

Tabela de cores em inglês

Amaranth		#E52B50
Amber		#FFBF00
Aquamarine		#7FFFD4
Azure		#007FFF
Beige		#F5F5DC
Black		#000000
Blue		#0000FF
Blue-green		#0095B6
Blue-violet		#8A2BE2
Brown		#A52A2A
Byzantium		#702963
Carmine		#960018
Cerise		#DE3163
Cerulean		#007BA7
Champagne		#F7E7CE
Chartreuse green		#7FFF00
Coral		#F88379
Crimson		#DC143C
Cyan		#00FFFF
Electric blue		#7DF9FF
Erin		#00FF3F
Gold		#FFD700
Gray		#808080
Green		#00CC00
Harlequin		#3FFF00
Indigo		#4B0082
Ivory		#FFFFF0
Jade		#00A86B
Lavender		#B57EDC
Lilac		#C8A2C8
Lime		#BFFF00
Magenta		#FF00FF
Magenta rose		#FF00AF
Maroon		#800000
Mauve		#E0B0FF
Navy blue		#000080
Olive		#808000
Orange		#FFA500
Orange-red		#FF4500
Peach		#FFE5B4
Persian blue		#1C39BB
Pink		#FFC0CB
Plum		#8E4585
Prussian blue		#003153
Pumpkin		#FF7518
Purple		#800080
Raspberry		#E30B5C
Red		#FF0000
Red-violet		#C71585
Rose		#FF007F
Salmon		#FA8072
Scarlet		#FF2400
Silver		#C0C0C0
Slate gray		#708090
Spring green		#00FF7F
Taupe		#483C32
Teal		#008080
Turquoise		#40E0D0
Violet		#EE82EE
Viridian		#40826D
White		#FFFFFF
Yellow		#FFFF00

Exercício HTML - REFERENCIAS - IMAGENS E VÍDEOS

Siga as imagens para a perfeita execução do exercício:

2:

3:

SALVE OS ARQUIVOS DENTRO DA SUA PASTA E MOSTRE AO SEU QUERIDO E AMADO PROFESSOR! 

:D

Aula 03 - HTML

Nessa aula iremos adicionar imagens ao cabeçalho do site, siga o exemplo da imagem mostrada:

Continue o código na imagem seguinte:

Terminando essa primeira página, ela estará assim :

APÓS O TÉRMINO DA PÁGINA INICIAL,SALVE E  COPIE E COLE ELA MAIS DUAS VEZES PARA QUE POSSAMOS UTILIZAR O CORPO DA PÁGINA INDEX NAS PÁGINAS"IMAGEM" E "VIDEOS". SIGA O EXEMPLO PARA A PÁGINA IMAGEM:

PARA INSERIR O VÍDEO LEMBRE-SE DE INCORPORAR O VÍDEO DIRETO DO YOUTUBE, SIGA O TUTORIAL SEGUINTE:

PARTE 02:

PARTE 03:

NO FINAL COPIE O CÓDIGO GERADO PELO YOUTUBE E COLE NA SUA PÁGINA, SIGA O EXEMPLO NA IMAGEM ABAIXO:

TESTE AS REFERENCIAS NO FINAL DA SUA PÁGINA, VEJA SE NO MOMENTO EM QUE VOCÊ CLICAR NAS REFERÊNCIAS AS PÁGINAS SERÃO ALTERADAS.

EXERCÍCIO 04 - HTML - SITE BÁSICO

Exercício 03 HTML - Criando um Site do Zero! Inserindo Imagens, músicas e incorporando vídeos diretamente do youtube.


Para melhor organização crie uma pasta com o nome AULA HTML 03 e salve todos os seus arquivos e suas páginas na pasta.

PARTE 01
Página Inicial, falando um pouco sobre o HTML e suas funções. Vale lembrar que o assunto pode ser alterado no momento que você quiser, basta apenas substituir o texto existente pelo escolhido por você, deixe sua imaginação fluir e agir!

PARTE 02
Página destinada a Falar um pouco da empresa da qual o site fala, lembrando que no exercício nós falaremos como exemplo da nossa escola de cursos Educx.

PARTE 03
Página onde inserimos um áudio utilizando da TAG <embed SRC>, onde com a utilização correta nos proporciona resultados efetivos no site, qualquer dúvida contate por meio de comentários. Vale citar que como primeira postagem de áudio utilizaremos de um PLAYER simples, com o passar dos exercícios trabalharemos com recursos mais avançados referente á áudio e players.

PARTE 04
Nesta ultima página vamos incorporar um vídeo diretamente do site youtube.com, para incorporar basta seguir o tutorial a seguir:

1° Acesse a página youtube.com
2° Escolha o vídeo para incorporar ao site, após isso siga as imagens:

COLE O RESULTADO DE ACORDO COM O EXEMPLO:

No final salve e teste sua página no navegador, lembre-se das posições center, left e right. Escolha a melhor posição para o seu vídeo no site. Para melhor organização crie uma pasta com o nome AULA HTML 03 e salve todos os seus arquivos e suas páginas na pasta.

ARQUIVOS NECESSÁRIOS DO SITE MEDIAFIRE.

AULA 5 - LISTAS

Objetivo:

O objetivo deste tutoria a criar lista ordenas e lista de definição  sempre de uma forma bem objetiva , tudo mostrado através das telas.

Pré-requisito:

Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do
de informática básica e Parte 1, Parte 2, Parte 3 , Parte 4 e Parte 5 do tutorial html básico.

Nota:

Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.

Vamos  aprender a criar listas ordenadas, então crie uma página em branco  com o nome de “lista.hml”:

<html>

<head><title>Listas</title>

<body>

<center><h1>Listas</h></center>

</body>

</html>

Tela 001

Sua criação é simples e para cria-las utilizamos as etiquetas <ol></ol> sendo que cada um dos elementos fica citado por outra etiqueta   <li></li> sendo assim as memas ficaram:

<ol>

<li> Internet</li>

<li> Computador</li>

<li> Site</li>

</ol>

Tela 002

Tela 003

Também podemos definir o tipo de estilo utilizado pela lista como números ou até mesmo utilizar letras (A, B, C) para isso utilizamos mais um atributo que é o “type” que deve ser incluido dentro da etiqueta <ol>  sendo que o mesmo ficaria assim:

<ol type=”a”>

Iremos ver os  cada  um desses tipos lista ,copie  e cole no bloco de notas a lista abaixo, salve e depois atualize a página:

<ul type="a">

<li> Internet</li>

<li> Computador</li>

<li> Site</li>

</ul>

Tela 004(Por letra)

Tela 005

Agora iremos aprender a criar lista d definição o processo é semelhante ao que acabamos de aprender, portanto, para criar a a lista utilizamos as etiquetas <dl></dl> sem do utilizarenmos duas etiquetas para definição <dt></dt> e <dd></dd>, então ficaria assim:

<dl>

<dt>Html</dt>

<dd> Html Basico</dd>

<dt> Aprender</dt>

</dl>

Ou poderiamos definir da seguinte maneira:

<dl>

 <dd>Aprender

 <dl>

 <dd>Html

 <dl>

 <dd> Sempre

 </dl>

</dl>

</dl>

Veja como fica na página com o primeiro e segundo código, para isso,copie e cole no bloco de notas, salve para visulizar no brauser.

Tela 006

Tela 007

Segundo código:

Tela 008

Tela 009

Conclusão

Ensinei a utilizar a criar listar ordenadas e listas de definição , tudo de uma  forma objetiva e mostrado através das telas para que você tenha uma melhor compreensão, na próxima parte continuaremos o nosso aprendizado sobre html.Bons Estudos.

Aula 06 HTML - PÁGINA INDEX "PRINCIPAL"

Siga o HTML para gerar a sua página principal , esse é a primeira página de 5 , onde após o término você terá criado seu primeiro site completo, siga com atenção:

O meu exemplo ficou assim, use sua criatividade ou até mesmo as TAGS as utilizadas nas aulas passadas!

AULA 8.1 - PAGINA INICIAL - CRIANDO SITE DO ZERO

Galera ai está a primeira parte do tutorial CRIANDO UM SITE DO ZERO , segue em HTML para a edição do Layout, tabelas e referências na segunda aula! Espero que gostem!

No final meu exemplo fica assim:

Lembrando que tudo depende da sua criatividade! :D