Tutorial Criação de Blogger

  • 1,224 views
Uploaded on

O documento é um Tutorial de Criação e Edição de Blogger.

O documento é um Tutorial de Criação e Edição de Blogger.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,224
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
60
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. TUTORIALOFICINADE Cleilton Mendes Melo Prof. Formador 6ª CREDE/Sobral Laboratório Escolar de Informática (LEI)Kelvin Duarte ÁvilaAluno do Projeto E-Jovem/6ª CREDE/SEDUCEscola Deputado Cesário Barreto Lima Sobral, maio de 2011 0
  • 2. CRIAÇÃO DE BLOG (BLOGGER)1º PASSO - você deve criar uma conta no GMAIL. Essa conta você deve usar como email seublog.Dados (LABORATÓRIO CBL ESCOLAR DE INFORMÁTICA) 1
  • 3. Pronto. Agora é aguardar e verificar seu novo E-MAIL. Depois de ativar sua conta e-mail, suapágina deve ficar dessa maneira.OBJETIVO: O objetivo de criar um e-mail pelo (GMAIL-GOOGLE) é para facilita o acesso ao blog(BLOGGER-GOOGLE) ambos são do GOOGLE. Depois apague todos os e-mails disponíveis, “Nãoé obrigado” para isso você deve fazer os seguintes comandos. 2
  • 4. Selecione todos os campos conforme mostra a figura acima, depois clique no botão EXCLUIR.Pronto, sua caixa de e-mail agora está vazia como mostra a figura abaixo.Depois de criar sua conta no GMAIL. Agora vamos clicar na opção SAIR que fica localizada naparte superior à direita. Depois de clique na opção SAIR, vamos usar a mesma conta queentrou no GMAIL para criar o Blog. Vamos lá. 3
  • 5. 2º PASSO – Criar o Blog (BLOGGER – GOOGLE).Para podemos criar o blog, primeiro acesse a página do Google e digite a seguinte palavra,BLOGGER. Como mostra a figura abaixo, acompanhe.Agora você deve clicar no primeiro link “Blogger: Create your free Blog” parainiciar a criação do seu Blog. Depois você será direcionado para página BLOGGER. Comomostra a figura abaixo. 4
  • 6. Nessa página você deve clicar o botãoAgora você será direcionado para o processo de criação do blog, preencha o formulário.Conforme a numeração abaixo; 1 2 3 4 5 6 7 8[ 5
  • 7. 1 2 3 45 67 8 Após ter digitado todos os dados corretamente, clique na opção 6
  • 8. Logo em seguida surgirá a seguinte tela, para você escolher o nome de seu Blog, veja: 1 2 3 1 Titulo do Blog: Nome que aparecera no seu painel e no seu perfil. 2 Endereço do Blog: URL (endereço) para os visitantes acessarem seu Blog. 3 Verificar disponibilidade: Verifica se sua URL (Endereço) está disponível.Depois de preencher os campo 1, 2 e 3 clique em 7
  • 9. Bem, chegamos numa das partes mais interessantes, a escolha do estilo do seu blog. Todos osdesigns que você estar vendo na imagem são disponibilizados pelo BLOGGER, caso por algummotivo você venha a não gostar dos modelos apresentado no painel. Você pode encontraroutros modelos na internet, mas isso é assunto para mais tarde.Depois de escolher seu modelo, clique novamente emParabéns. Você agora tem um blog,Depois de concluir todas as etapas acima. Você será direcionado para o PAINEL do seu blog.No PAINEL, você encontrará todas as informações como NOVA POSTAGEM, EDITARPOSTAGEM, COMENTÁRIOS, CONFIGURAÇÕES, DESIGN, GERAR RECEITA E ESTATÍSTICAS. 8
  • 10. Esses são os principais botões de acesso rápido ao seu Blog. 11 12 13 1 6 7 2 3 4 5 8 9 10 9
  • 11. 1º Foto de exibição: Exibir sua foto no perfil do seu blog.2º Exibir Perfil: Mostra seu perfil no painel e no blog.3º Editar seu perfil: Altera os dados do seu perfil.4º Editar foto: Altera foto de exibição do seu perfil.5º Editar Notificação: Manda Notificação por email; Desejo receber anúncios,avisos e outras informações para me ajudar a aproveitar todos os recursos possíveis domeu blog.6º Visualizar Blog: Visualizar blog na mesma janela.7º Nova Postagem: Você edita e publica suas postagens: Textos, Imagens, Vídeos,Links e outros.8º Design: Nessa opção você pode fazer alterações na estrutura do seu blog, comopor exemplo: adicionar e remover gadget (Dispositivos/Acessórios da janela).Exemplo: inserir calendários, links, slides, contadores de visitas e outros.9º Gerar Receita: Modo simples e gratuito dos usuários do Blogger ganharemdinheiro exibindo anúncios segmentados do Google em seus blogs.10º Estatísticas: Exibi uma visão geral das visitas realizadas pelos internautas emvários níveis: Visão Geral, Postagens, Origens de Tráfego e Público.*Visão Geral de AGORA, DIA, SEMANA, MÊS e TUDO.*Postagens – exibi relatórios das postagens mais acessadas.*Origens de tráfego – mostra de onde os usuários estão acessando o blog e aspostagens mais vistas.*Público – estatística dos usuários como: Navegador e Sistema Operacional.11º Editar Postagens: você pode reeditar as postagens e excluí-las.12º Comentários: você pode visualizar todos os comentários de usuários em umúnico lugar, você também pode responder aos comentários. 10
  • 12. 13º Configuração – Você poderá acessar as 9 guias e efetuar as alteraçõesconfigurações necessárias do seu blog, são elas: Básico, Publicação, Formatação,Comentários, Arquivamento, Site, Feed, E-mail e celular, OpenID, Permissões.Tela Configuração guia Báico Tela Configuração guia FormataçãoTela de Configuração guia Publicação Tela de Configuração guia Arquivamento 11
  • 13. Tela de Configuração guia Comentarios Tela de Configuração guia Site Feed Tela de Configuração guia E-mail e celular 12
  • 14. Tela de Configuração guia Open IDTela de Configuração guia Permissões 13
  • 15. CONHECENDO OS ELEMENTOS DA PÁGINA PARA CONFIGURAR SEU BLOG 4 12 3 5 6 7 ELEMENTOS DA PÁGINA1º DESIGN: Nessa aba você encontrará todas as ferramentas para fazer as alterações do blog.2º ELEMENTOS DA PÁGINA: Nesse momento estamos na guia ELEMENTOS DA PÁGINA, nesselocal você adiciona e organiza elementos da página, salva e visualiza as alterações.3º EDITAR HTML: Essa talvez seja uma das partes mais difícil do blog, pois essa guia édiretamente responsável pelas alterações do estilo da página do blog. Em caso de alteraçõesdo modelo/templates (estilo do blog), é nessa guia que você encontra onde fazer asmodificações.4º DESIGNER DO MODELO: Nessa guia você pode fazer modificações no blog, para quemdeseja alterar de modo fácil sua aparência, fonte, estilo, cor e etc.5º EDITA O CABEÇALHO: Aqui você pode colocar um Layout (cabeçalho) no seu blog, de modofácil e rápido.6º ADICIONAR GADGET: Você pode acrescentar objetos em seu blog. Nesse local vocêencontrará vários acessórios para personalizar seu blog.OBS: Observe que há vários GADGET espalhados na sua página, conforme você escolheu oestilo do seu blog. Em caso de alteração do Template (estilo do blog), os GADGET mudarão deposição. 14
  • 16. 7º POSTAGEM: Nesse local você estará vendo a posição das suas postagens. Nesse caso todasas postagens ficarão no canto esquerdo da página.EDITAR HTML 1 2 4 5 6 71º BAIXE MODELO COMPLETO: Nesse link você baixa o modelo de seu Template (estilo doblog) para o computador, esse link é muito útil para testarmos outros modelos de templatesou fazer alterações no HTML. Portanto, para mexer nessa configuração, personalizar, nessecaso, recomendamos para pessoas mais gabaritadas nesse assunto.2º SELECIONAR ARQUIVO: Nesse botão você colocar um novo template no seu blog. Como porexemplo: se você baixou um template de um site e deseja colocar em seu blog; primeiro vocêclica no botão SELECIONAR ARQUIVO para procurar e depois selecione o template, em seguidavocê deve clicar no botão FAZER UPLOAD. Esse botão tem como função instalar o template noblog.3º HTML DE SEU BLOG: Código do seu blog. Recomendamos alterar o HTML somente porpessoas que são mais capacitadas para o assunto.4º LIMPAR EDIÇÕES: Limpa todas as alterações feitas no blog.5º VISUALIZAÇÃO: Visualiza a página do blog com alguma alteração feita por você.6º SALVAR MODELO: Salva as modificações feitas no blog em HTML.Para personalizar seu blog visitem os sites:http://www.dicasparablogs.com.br/ ótimo site para ajudar montar um blog;http://www.dicasblogger.com.br/ esse site deve ajudar bastante;http://www.codigosblog.com.br/ código para blog, esse código geralmente são colocados nosELEMENTOS DE PÁGINAS em ADICONAR UM GADGETS/ HTML JAVA SCRIPT. 15
  • 17. http://www.ferramentasblog.com/ Esse é o melhor dos demais “na minha opinião” paraajudar a montar ou personalizar seu blog. Editar imagens do Blogger dentro do Editor de Posts com o Picnik Picnik – Editor de imagens online super simples e fácilE para facilitar ainda mais essa integração de serviços da Google no Blogger, este super editorde imagens (bem simples), está disponível dentro do editor de postagens, quando adicionamosuma nova imagem em nossos artigos.Quando você adicionar uma nova imagem dentro do seu post e clicar sobre ela para fazermodificações, aparece agora um novo link no menu da imagem: “Editar imagem”. Ao clicarnesse link você será direcionado à tela do editor do Picnik, que abre dentro do Blogger, semfechar nada. 16
  • 18. Aí é intuitivo. É bem prático e fácil de usar, pode modificar a imagem como achar melhor. Cadamenu é bem prático e já tem as ferramentas prontas para aplicar sobre a figura e produzir osefeitos desejados.O melhor de tudo é que as modificações ficam salvas no seu álbum do PicasaWeb, que é opadrão do Blogger para salvar todas as imagens que estão aplicadas em seu blog. 17
  • 19. DESIGNER DO MODELOQuando você clica na aba DESIGNER DO MODELO você será direcionado para um localpara fazer edições do blog como:*Aparência*Fonte*Cor*Cor dos links*Cor da Fonte*Plano de fundo*Ajuste da largura*Layout (Capa do blog)*Avançado – RECOMENDAMOS PARA PESSOAS MAIS EXPERIENTES. A imagem abaixo mostra a página em carregamento. 18
  • 20. Página carregada A imagem acima mostra a edição do blog TESTADOR. 111 7 823 94 104 65 1º MODELO: Como mostra a imagem acima, estamos fazendo a edição do blog TESTADOR, pois bem o botão MODELO faz a troca do template (estilo do blog). Observe o número 6, ele mostra o estilo atual do blog. Para fazer a troca de template você clica no estilo como mostra a o número 9, depois você escolhe os modelos como mostra o número 10, vamos fazer uma demonstração: 19
  • 21. 9Escolha um dos modelos do número . Agora escolha um dos modelos do 10número . Nesse caso vamos escolher o modelo como mostra abaixo.Observe que do número 9 escolhemos o número 2, e do número 10 onúmero 2. Perceba que o estilo do template foi alterado, pelo menos a aparência.2º PLANO DE FUNDO: Mude o esquema de cores do seu blog. Exemplo: 20
  • 22. Perceba que há várias cores na parte TEMAS SUGERIDAS, nesse caso vamos altera as cores, escolha as cores do plano de fundo que mais lhe agradar. Acompanhe a imagem abaixo a modificação das cores do blog. Perceba que as cores do LAYOUT (capa do blog) foram alterada para a cor AZUL. Para concluir, o botão PLANO DE FUNDO tem como função alterar as cores de fundo de seu blog. 2 3º AJUSTAR LARGURAS1 3 1º Ajustar larguras: Nesse local podemos alterar a largura do blog, tanto no local onde ficaram as postagens como os acessórios. 2º Nesse local podemos altera a largura do blog: recomendamos você colocar na largura 960, porque a visualização (tamanho) fica universal para os computadores. 21
  • 23. 3º Barra Lateral direita: nesse local podemos alterar a barra lateral da direita, percebaque a largura da barra é 260, nesse caso a modificação fica seu critério, de preferênciadeixe como está.4º LAYOUTNa parte LAYOUT podemos fazer alterações na posição dos acessórios como, porexemplo:*posição da postagem*posição do GADGET (Acessórios)Vamos fazer algumas modificações na posição do blog da postagem e dos acessórios.Observe que na parte acima, você encontrará o nome LAYOUT DO CORPO, nessecampo você encontrará 8 modelos disponíveis. Vamos escolher o último modelo. Edo campo LAYOUT DO RÓDAPE vamos escolher a terceira opção. Veja as alterações. 22
  • 24. Concluindo, na parte LAYOUT você poderá fazer alterações na posição do blog.5º AVANÇADOComo o nome sugere AVANÇADO, é fazer alterações em todo o blog como:*fonte, cor da fonte*links*Cor do titulo do blog e cores gadget e etc. 23
  • 25. Vamos fazer algumas alterações para demonstrações. Acompanhe abaixo.OK depois de fazer todas as alterações, você deve clicar na opçãoPRONTO. Seu blog esta com sua cara, ou pelo menos parecido. 24
  • 26. COMO EDITAR AS BARRAS DE MENUS NO BLOG Primeiramente devemos baixa um template que tenha um menu de preferencia na horizontal. Para baixar acesse o site: http://btemplates.com/ Nesse site você encontrará vários modelos de templates. Vamos acessa o site. A imagem abaixo mostra dentro do site.1 Vamos escolher a primeira opção de template. 1 Agora você clica na opção DOWNLOAD, escolha onde você deseja salvar, Pronto. Você acaba de baixar o template para seu blog. 25
  • 27. INSTALANDO O TEMPLATE NO BLOGAgora que você já baixou o template vamos para instalação no blog. Primeiro você deve ir àaba DESIGN, depois na guia EDITAR HTML como mostra a figura abaixo.Agora antes de instalar o template deve descompacta o arquivo baixado. Depois clica no botãoSELECIONAR ARQUIVO.Observe que há dois template. (Para identificar o que são template há duas opções: PRIMEIRA- aumente a imagem até identificar uma página com o planeta terra no meio. SEGUNDA -encoste o mouse até mostrar as características do arquivo, a extensão do arquivo e XML); detodo modo você pode observar que há dois template disponíveis, um com slide e outro sem.Para saber qual tem slide e o outro não, basta você ler o arquivo observe que um tem nocomplemento o nome SLIDESHOW, então teoricamente esse tem slide. Vamos escolhe semslide. 26
  • 28. Depois de selecionado vamos click no botão ABRIR. Depois desse processo clique na opçãoFAZER UPLOAD.Talvez quando você instalar o template ele pergunte se você deseja manter os acessóriosanteriores, se você clicar na opção MANTER WIDGETS, você irá manter os antigos acessórios,se você clicar na opção EXCLUIR WIDGETS, você excluirá os acessórios. Recomendo você clicarna opção EXCLUIR WIDGETS, porque se você manter os WIDGETS irá acumular vários objetosno blog. ENTÃO, exclua os WIDGETS. 27
  • 29. Depois desse processo termina a instalação do template. Observe a figura abaixo.OBSERVE ESSA IMAGEM essa imagem é a confirmaçãoque seu template foi instalando com sucesso. Agora clique em VISUALIZAR BLOG para ver seunovo templete. COMO EDITAR O MENU NO BLOGPara fazer a edição do menu, primeiro vamos abrir seu novo template, vamos observar omenu, seu menu deverá está assim.Esse o seu MENU mais detalhadoObserve os nomes do MENU. Agora vá em EDITAR HTML. 28
  • 30. Lembrando que você deve estar com o navegador MOZILA FIREFOX. Bem agora você devedigitar no teclado CTRL+F.Aparecerá um botão LOCALIZAR. Nele você digita a palavra que queira procura, nesse casoestamos procurando uma das palavras do MENU. Vamos procurar a palavra DOWNLOADS. 29
  • 31. Agora muita atenção nessa parte, essa é uma das partes que requer mais atenção para efetuaras mudanças no blog, VAMOS ALTERAR OS NOMES DO MENU. Depois de procurar o nomeDOWNLOADS repare que o nome está em >DOWNLOADS< apague o nome DOWNLOADS semapagar os símbolos > < agora coloque o nome que preferir, nesse caso eu irei colocar o nomeESCOLA. O botão devera fica assim >ESCOLA<. Depois de alterar, observe que o botãoDOWNLOADS tem 3 sub-botão DVD, GAMES E SOFTWARE, caso queira apaga os nomes DVD,GAMES E SOFTWARE é só apagar os nomes sem apagar os símbolos > <. Detalhe, os botões domenu estão todos juntos no código HTML, um abaixo do outro.EXEMPLO:<li><a href=#>Business</a> coloque o nome do seu botão<ul class=children><li><a href=#>Internet</a></li><li><a href=#>Market</a></li> Coloque o nome do seu sub-botão<li><a href=#>Stock</a></li></ul></li><li><a href=#>Downloads</a><ul class=children><li><a href=#>Dvd</a></li><li><a href=#>Games</a></li> Coloque o nome do seu sub-botão<li><a href=#>Software</a> 30
  • 32. <ul class=children><li><a href=#>Office</a></li></ul></li></ul></li><li><a href=#>Parent Category</a> Coloque o nome do seu sub-botão<ul class=children><li><a href=#>Child Category 1</a> Coloque o nome do seu sub-botão<ul class=children><li><a href=#>Sub Child Category 1</a></li> Coloque o nome do seu sub-botão<li><a href=#>Sub Child Category 2</a></li> Coloque o nome do seu sub-botão<li><a href=#>Sub Child Category 3</a></li> Coloque o nome do seu sub-botão</ul></li><li><a href=#>Child Category 2</a></li> Coloque o nome do seu sub-botão<li><a href=#>Child Category 3</a></li> Coloque o nome do seu sub-botão<li><a href=#>Child Category 4</a></li> Coloque o nome do seu sub-botão</ul></li><li><a href=#>Featured</a></li> coloque o nome do seu botão<li><a href=#>Health</a> coloque o nome do seu botão<ul class=children><li><a href=#>Childcare</a></li> coloque o nome do seu botão<li><a href=#>Doctors</a></li> coloque o nome do seu botão 31
  • 33. </ul></li><li><a href=#>music</a></li> coloque o nome do seu botão<li><a href=#>politics</a></li> coloque o nome do seu botão<li><a href=#>Edit</a></li> coloque o nome do seu botãoMODIFIQUE OS NOMES DOS BOTÕES SEM APAGAR OS SÍMBOLOS > < .Depois de feitas as alterações clique em .PRONTO O MENU COM OS NOMES DESEJADOS(PERSONALIZADOS) ESTÃO ALTERADOS.AGORA SEU BLOG TEM CARA DE SITE. COMO COLOCAR SLIDE DE DOCUMENTO (PREFERENCIAMENTE POWER POINT) NO BLOGPara colocar uma apresentação de slides no blog precisamos hospedar o arquivo do PowerPoint em outro site, além disso, é possível usar vários outros formatos de arquivos comomostraremos a seguir, inclusive PDF, DOC (documento do word) e vários outros. Essas sãomaneiras de usar conteúdos diferentes no seu blog além das imagens e vídeos do Youtube.Entre no site SlideShare, é necessário fazer um cadastro, mas é bem simples, após issoverifique seu email, pois receberá um email para confirmar seu cadastro. Depois disso quandofizer login no site, CLIQUE EM UPLOAD.Veja os formatos de arquivos aceitos pelo site:Apresentações: pdf, ppt, pps, pptx, ppsx, pot, potx (Powerpoint); odp (OpenOffice); key, zip(Apple Keynote). 32
  • 34. Documentos: pdf, doc, docx, rtf, xls (MSOffice); odt, ods(OpenOffice); Apple iWork Pages.Vídeos: mp4, m4v (ipod), wmv (windows media video), mpeg, avi (windows), mov (applequicktime), mpg, mkv (h.264), ogg, asf, vob, 3gp, 3g2 (mobile phones), rm, rmvb (Real), flv(Flash).Preencha como quiser os campos com as informações do seu arquivo, mas o principal É NOMENU PRIVACY (who can see this), deve USAR PUBLIC assim todos poderão ver suaapresentação de Power Point (slides) ou qualquer outro arquivo que esteja enviando.Agora para colocar no seu blog copie o código que está no campo EMBED, entre na páginaDESIGN > ADICIONAR GADGET > HTML/JAVASCRIPT e cole o código ou se preferir podepublicar os slides em uma postagem. Ainda é possível enviar para o Twitter, Facebook ouemail diretamente pelo site SlideShare.Pronto seu blog agora esta com slide. OUTRA MANEIRA DE COLOCAR UM SLIDE NO BLOG1º - Entre no site SlideShare, se preferir crie sua conta, porém não é necessário. Obs.: Usando uma conta fica mais fácil você gerenciar as suas apresentações.2º - Clique em “Upload”. 33
  • 35. 3º - Procure o arquivo a ser enviado. 4º - Preencha a ficha sobre o arquivo enviado e configure de acordo com o conteúdo: Title – Título do seu blog; Tags - Palavras relacionadas ao conteúdo do arquivo, separados por virgulas; Description – Descrição do conteúdo do arquivo; Privacy – Conteúdo aberto ou restrito; Language – Linguagem do arquivo; Allow file download – Permitir link para download; Category – Categoria do arquivo; Delete – Deletar arquivo; Publish – Publicar arquivo. 34
  • 36. 5º - Após clicar em “PUBLISH”, aparecerá uma mensagem de confirmação, clique em “HERE”para ver o seu slide.6º - Aguarde o arquivo ser processado. Quando for liberado clique sobre ele.As seguintes opções vão estar a sua disposição:7º - Para colocar o slide em sua postagem copie o código “EMBED” e cole onde quiser.8º - Pronto, seu slide está no blog. 35
  • 37. REFERÊNCIAS:MELO, Cleilton Mendes. Tutorial Oficina de Blog. Formação Continuada de Professoresda 6ª CREDE. 1ª Ed. Taperuaba/Sobral-CE, 2011.MELO, Cleilton Mendes. Banco de Imagens/Aquivos Particular de Cleilton. 1ª Ed.Taperuaba/Sobral-CE, 2011.DUARTE, Kelvin Ávila. Tutorial Oficina de Blog. Aluno do Projeto E-Jovem da 6ªCREDE/SEDUC. Escola Deputado Cesário Barreto Lima. 1ª Ed. Taperuaba/Sobral-CE,2011.Dicas de como Montar um Blogger. Disponível em: http://www.dicasparablogs.com.br.Acessado em: 03 de Maio de 2011.Códigos para colocar elementos nas páginas. Disponível em:http://www.codigosblog.com.br/. Acessado em: 02 de Maio de 2011.Como Personalizar seu Blog. Disponível em: http://www.ferramentasblog.com/.Acessado em: 04 de Maio de 2011.Modelos de Templates. Disponível em: http://btemplates.com/. Acessado em: 01 deMaio de 2011. 36