Este documento fornece instruções sobre como personalizar a aparência de um blog no WordPress, incluindo: 1) Explorar os temas disponíveis e ativar um novo tema 2) Adicionar e editar complementos como caixas de texto 3) Configurar opções como imagem de cabeçalho, cores e esconder links

1. segundo dia

2. Ementa Primeiro dia: Introdução e visão geral Segundo dia: Template Terceiro dia: Blogando Quarto dia: Criando páginas e Links Quinto dia: Gerenciando e Comentando

3. Neste dia Templates Conhecer e aplicar os Temas disponíveis Aplicar Complementos Alterar opções

4. Acesse sua conta Acesse a sua conta no WordPress: www.wordpress.com . Caso contrário deverá fazer o login com seu nome de usuário e senha, não o nome do blog, o seu nome de usuário e sua senha. Caso você tenha ativado a caixa “Lembrar minha senha” (Remember me) sua entrada será automática.

5. Acesse sua conta Altere o idioma para “Português do Brasil”.

6. Acesse a área administrativa do Blog Clique em “Meu painel de controle” para ter acesso às ferramentas de administração do seu blog.

7. Acesse a área de controle da aparência Clique em “Aparência” para ter acesso às opções que alteram a forma como o seu Blog é exibido.

8. Conhecendo os temas disponíveis Nesta etapa você irá conhecer os Templates disponíveis, navegará entre as opções prontas, ativará algumas e reconhecerá as diferenças entre elas. Páginas com mais temas disponíveis. Tema atual e suas possibilidades de edição.

9. Ativando um tema disponível Localize o tema “Benevolence”, na página 1, e dê um clique na imagem para abrir a imagem de ativação. Clique na imagem ou no nome do tema para abrir a ampliação e poder ativar. Descrição do tema. Filtros de pesquisa.

10. Ativando um tema disponível Observe o botão de fechar o tema sem ativar. Dê um clique no link “Ativar “Benevolence””. Botão para fechar o tema sem ativá-lo.

11. Ativando um tema disponível O tema é selecionado e a página retorna automaticamente para a área administrativa, indicando o sucesso da operação. Observe as opções de edição automática que este tema disponibiliza.

12. Ativando um tema disponível Localize a opção “DePo Masthead”, ative-a e observe que suas opções de edição são diferentes.

13. Dica: layout e conteúdo Você poderá repetir este procedimento sempre que desejar, sem perder o conteúdo do seu Blog: Layout e conteúdo são independentes no WordPress.

14. Dica: buscar por um layout específico Se desejar buscar algum layout mais específico, clique na seta da caixa “mostrar todos os temas”, observe as opções disponíveis com a barra de rolagem, clique na opção desejada e em seguida, clique no botão “Filter”.

15. Ativando o tema utilizado no curso Dê um clique na seta da caixa “mostrar todos os temas”. Clique na opção “Blue” e em seguida clique no botão “Filter”. Localize a opção “Contempt” e ative-a.

16. Ativando Complementos Dê um clique na opção “Complementos”. Esta seção mostra os assessórios que estão disponíveis e os utilizados em seu layout. Nome do complemento. Link de ativação do complemento. Descrição do complemento.

17. Ativando Complementos Ative os Complementos indicados acima. Localize o nome do Complemento a ser ativado e clique no respectivo link “Adicionar”. Ao final, clique no botão “Salvar Mudanças”

18. Editando um complemento: Text Dê um clique no botão “Edit” do complemento “Text”.

19. Editando um complemento: Text Digite o texto acima, não é necessário mudar de linha, digite na sequência. Em seguida, clique no botão “Alterar” <a href=&quot;http://internetnaeducacao.blogspot.com/&quot; target=&quot;_blank“><img src=&quot;http://photos1.blogger.com/blogger/4323/2700/1600/seloComunidade.jpg&quot; alt=&quot;selo da comunidade Blogs Educativos&quot; width=&quot;180&quot; height=&quot;158&quot; /></a>

20. Editando um complemento: Text Dê um clique no botão “Salvar alterações” para salvar sua alteração. Em seguida clique em “ver o site”.

21. Editando um complemento: Text Este é o resultado, a imagem está inserida e, se clicada, levará você ao site da comunidade Blogs Educativos. Não é necessário clicar. Volte à página anterior utilizando a seta do navegador, conforme indicado na imagem acima. ou firefox 3.0 internet explorer 7.0 Resultado da caixa de texto alterada

22. Dica: edição de complementos Para editar um complemento (widget), basta ativá-lo e clicar no link “editar”. Cada controle possui suas próprias opções de edição. Para que a mudança tenha efeito, você deve clicar novamente no botão “Salvar mudanças”.

23. Dica: edição de caixa de texto Código HTML/XHTML pode ser inserido em caixas de texto. Códigos mais complexos, como por exemplo <object> de vídeo do Youtube, não deram resultado. Na dúvida: faça o teste. Coloque o código que deseja testar, salve, visualize no navegador o resultado. Para saber mais sobre HTML/XHTML, visite: http://www.w3schools.com/xhtml/default.asp

24. Configurando opções Extras Dê um clique na opção “Extras”. Deixe as caixas conforme indicado na figura e clique no botão “Atualizar extras”.

25. Dica: Snap Shot Snap Shots são pequeno quadros que se abrem em todos os seus links, para que o visitante tenha uma pré-visualização do conteúdo do link Resultado obtido nos links do seu Blog com a opção “Snap Shot” ativa.

26. Dica: Esconder links relacionados Quando ativa, esta opção faz com que seus Posts não possam ser visíveis em outros blogs, impossibilitando que terceiros obtenham tráfego com suas postagens.

27. Configurando a imagem de cabeçalho Dê um clique na opção “Imagem de Cabeçalho Personalizada”. Nesta seção, você pode trocar a imagem de cabeçalho além de outras edições. Pré-visualização da imagem atual. Opções de edição simples. Opções para o carregamento de uma nova imagem.

28. Configurando a imagem de cabeçalho Este é o resultado da imagem de cabeçalho com as configurações originais do tema escolhido.

29. Configurando a imagem de cabeçalho Dê um clique no botão “Selecione uma Cor de Texto”. Clique na cor da janela e observe o resultado (repita o procedimento se desejar outra cor). Em seguida clique novamente no botão “Selecione uma Cor de Texto” para fechar a janela de cores.

30. Dica: salvando a cor do texto alterada Você pode salvar a mudança clicando no botão “Salvar Mudança”, mesmo que a janela de cores ainda esteja aberta.

31. Configurando a imagem de cabeçalho Dê um clique no botão “Esconder texto” e observe o resultado. Em seguida clique no botão “Salvar mudanças”.

32. Dica: para voltar o texto escondido Se quiser que o texto original apareça novamente, dê um clique no botão “Mostrar texto”.

33. Configurando a imagem de cabeçalho Dê um clique no botão “Escolher arquivo”, escolha o arquivo “imagem_superior_texto_az.jpg”. Em seguida clique no botão “Enviar”.

34. Configurando a imagem de cabeçalho Aguarde até que a imagem tenha sido enviada. Dê um clique com o botão direito do mouse no botão “Visite o Site” para visualizar o Blog em uma nova guia, aba ou página, conforme o seu navegador. Chrome FireFox 3 Internet Explorer 7

35. Configurando a imagem de cabeçalho Este é o resultado obtido das configurações feitas neste segundo dia.

36. Dica: observe o tamanho da imagem Cada Tema possui um tamanho diferente de imagem de cabeçalho.

37. Dica: trabalhar com abas (ou guias) Procure trabalhar com guias (ou abas) do seu navegador. Mantenha uma aba do navegador com a página administrativa do seu Blog e outra aba com o Blog propriamente dito. Faça suas alterações na área administrativa, clique na aba do Blog e pressione a tecla F5 (ou o comando de atualizar janela equivalente). Alguns navegadores que possuem navegação por abas: Chrome FireFox Internet Explorer 7 Uma alternativa é trabalhar com 2 janelas abertas de navegador, uma com a área administrativa e outra com o blog. Altere na área de administração, clique na janela do Blog e atualize a visualização (F5).

38. Dica: para promover novas alterações Clique novamente na opção “Imagem de Cabeçalho Personalizada”. Envie uma nova imagem ou clique no botão “Restaurar cabeçalho original” para começar do modelo original do tema.

39. Lembrete: botão “Salvar mudanças” Lembre-se de clicar no botão “Salvar mudanças” para poder registrar as alterações realizadas.

40. Dica: programa grátis e online de edição de imagens Um programa free, online e profissional de edição de imagens: https://www.photoshop.com/express

41. Próximo encontro Dar a sua cara ao blog é extremamente importante. A próxima etapa será inserir o seu conteúdo. Este será o tema do próximo encontro!! até lá!!