0

TUTORIAL

OFICINA

DE

Cleilton Mendes Melo

Prof. Formador 6ª CREDE/Sobral

Laboratório Escolar de Informática (LEI)

Kelvin Duarte Ávila

Aluno do Projeto E-Jovem/6ª CREDE/SEDUC

Escola Deputado Cesário Barreto Lima

Sobral, maio de 2011

1

CRIAÇÃO DE BLOG (BLOGGER)

1º PASSO - você deve criar uma conta no GMAIL. Essa conta você deve usar como email seu

blog.

Dados (LABORATÓRIO CBL ESCOLAR DE INFORMÁTICA)

2

Pronto. Agora é aguardar e verificar seu novo E-MAIL. Depois de ativar sua conta e-mail, sua

pá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.

3

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 na

parte superior à direita. Depois de clique na opção SAIR, vamos usar a mesma conta que

entrou no GMAIL para criar o Blog. Vamos lá.

4

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” para

iniciar a criação do seu Blog. Depois você será direcionado para página BLOGGER. Como

mostra a figura abaixo.

5

Nessa página você deve clicar o botão

Agora 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

6

Após ter digitado todos os dados corretamente, clique na opção

3

5

6

7

8

1

2

4

7

Logo em seguida surgirá a seguinte tela, para você escolher o nome de seu Blog, veja:

Titulo do Blog: Nome que aparecera no seu painel e no seu perfil.

Endereço do Blog: URL (endereço) para os visitantes acessarem seu Blog.

Verificar disponibilidade: Verifica se sua URL (Endereço) está disponível.

Depois de preencher os campo 1, 2 e 3 clique em

1

2

1

2

3

3

8

Bem, chegamos numa das partes mais interessantes, a escolha do estilo do seu blog. Todos os

designs que você estar vendo na imagem são disponibilizados pelo BLOGGER, caso por algum

motivo você venha a não gostar dos modelos apresentado no painel. Você pode encontrar

outros modelos na internet, mas isso é assunto para mais tarde.

Depois de escolher seu modelo, clique novamente em

Parabé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, EDITAR

POSTAGEM, COMENTÁRIOS, CONFIGURAÇÕES, DESIGN, GERAR RECEITA E ESTATÍSTICAS.

9

Esses são os principais botões de acesso rápido ao seu Blog.

1

3

4

5

6

7

8 9 10

11 12

13

2

10

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 do

meu 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, como

por 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 ganharem

dinheiro exibindo anúncios segmentados do Google em seus blogs.

10º Estatísticas: Exibi uma visão geral das visitas realizadas pelos internautas em

vá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 as

postagens 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.

11

13º Configuração – Você poderá acessar as 9 guias e efetuar as alterações

configuraçõ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ção

Tela de Configuração guia Publicação Tela de Configuração guia Arquivamento

12

Tela de Configuração guia Comentarios Tela de Configuração guia Site Feed

Tela de Configuração guia E-mail e celular

13

Tela de Configuração guia Open ID

Tela de Configuração guia Permissões

14

CONHECENDO OS ELEMENTOS DA PÁGINA PARA CONFIGURAR

SEU BLOG

ELEMENTOS DA PÁGINA

1º 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, nesse

local 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ções

do modelo/templates (estilo do blog), é nessa guia que você encontra onde fazer as

modificações.

4º DESIGNER DO MODELO: Nessa guia você pode fazer modificações no blog, para quem

deseja 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 modo

fá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 o

estilo do seu blog. Em caso de alteração do Template (estilo do blog), os GADGET mudarão de

posição.

2 3

5

6

7

1

4

15

7º POSTAGEM: Nesse local você estará vendo a posição das suas postagens. Nesse caso todas

as postagens ficarão no canto esquerdo da página.

EDITAR HTML

1º BAIXE MODELO COMPLETO: Nesse link você baixa o modelo de seu Template (estilo do

blog) para o computador, esse link é muito útil para testarmos outros modelos de templates

ou fazer alterações no HTML. Portanto, para mexer nessa configuração, personalizar, nesse

caso, recomendamos para pessoas mais gabaritadas nesse assunto.

2º SELECIONAR ARQUIVO: Nesse botão você colocar um novo template no seu blog. Como por

exemplo: 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 seguida

você deve clicar no botão FAZER UPLOAD. Esse botão tem como função instalar o template no

blog.

3º HTML DE SEU BLOG: Código do seu blog. Recomendamos alterar o HTML somente por

pessoas 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 nos

ELEMENTOS DE PÁGINAS em ADICONAR UM GADGETS/ HTML JAVA SCRIPT.

1 2

4

5 6 7

16

http://www.ferramentasblog.com/ Esse é o melhor dos demais “na minha opinião” para

ajudar 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ácil

E para facilitar ainda mais essa integração de serviços da Google no Blogger, este super editor de imagens (bem simples), está disponível dentro do editor de postagens, quando adicionamos uma nova imagem em nossos artigos.

Quando você adicionar uma nova imagem dentro do seu post e clicar sobre ela para fazer modificações, aparece agora um novo link no menu da imagem: “Editar imagem”. Ao clicar nesse link você será direcionado à tela do editor do Picnik, que abre dentro do Blogger, sem fechar nada.

17

Aí é intuitivo. É bem prático e fácil de usar, pode modificar a imagem como achar melhor. Cada menu é bem prático e já tem as ferramentas prontas para aplicar sobre a figura e produzir os efeitos desejados.

O melhor de tudo é que as modificações ficam salvas no seu álbum do PicasaWeb, que é o padrão do Blogger para salvar todas as imagens que estão aplicadas em seu blog.

18

DESIGNER DO MODELO

Quando você clica na aba DESIGNER DO MODELO você será direcionado para um local

para 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.

19

Página carregada

A imagem acima mostra a edição do blog TESTADOR.

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:

1

2

3

4

4 5

6

9

10

7 8 11

20

Escolha um dos modelos do número . Agora escolha um dos modelos do

número . Nesse caso vamos escolher o modelo como mostra abaixo.

Observe que do número escolhemos o número 2, e do número o

nú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:

9

10

9 10

21

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.

3º AJUSTAR LARGURAS

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.

3

2

1

22

3º Barra Lateral direita: nesse local podemos alterar a barra lateral da direita, perceba

que a largura da barra é 260, nesse caso a modificação fica seu critério, de preferência

deixe como está.

4º LAYOUT

Na parte LAYOUT podemos fazer alterações na posição dos acessórios como, por

exemplo:

*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, nesse

campo você encontrará 8 modelos disponíveis. Vamos escolher o último modelo. E

do campo LAYOUT DO RÓDAPE vamos escolher a terceira opção. Veja as alterações.

23

Concluindo, na parte LAYOUT você poderá fazer alterações na posição do blog.

5º AVANÇADO

Como 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.

24

Vamos fazer algumas alterações para demonstrações. Acompanhe abaixo.

OK depois de fazer todas as alterações, você deve clicar na opção

PRONTO. Seu blog esta com sua cara, ou pelo menos parecido.

25

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.

Vamos escolher a primeira opção de template.

Agora você clica na opção DOWNLOAD, escolha onde você deseja salvar, Pronto. Você acaba

de baixar o template para seu blog.

1

1

26

INSTALANDO O TEMPLATE NO BLOG

Agora 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ão

SELECIONAR 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); de

todo 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 no

complemento o nome SLIDESHOW, então teoricamente esse tem slide. Vamos escolhe sem

slide.

27

Depois de selecionado vamos click no botão ABRIR. Depois desse processo clique na opção

FAZER UPLOAD.

Talvez quando você instalar o template ele pergunte se você deseja manter os acessórios

anteriores, 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ê clicar

na opção EXCLUIR WIDGETS, porque se você manter os WIDGETS irá acumular vários objetos

no blog. ENTÃO, exclua os WIDGETS.

28

Depois desse processo termina a instalação do template. Observe a figura abaixo.

OBSERVE ESSA IMAGEM essa imagem é a confirmação

que seu template foi instalando com sucesso. Agora clique em VISUALIZAR BLOG para ver seu

novo templete.

COMO EDITAR O MENU NO BLOG

Para fazer a edição do menu, primeiro vamos abrir seu novo template, vamos observar o

menu, seu menu deverá está assim.

Esse o seu MENU mais detalhado

Observe os nomes do MENU. Agora vá em EDITAR HTML.

29

Lembrando que você deve estar com o navegador MOZILA FIREFOX. Bem agora você deve

digitar no teclado CTRL+F.

Aparecerá um botão LOCALIZAR. Nele você digita a palavra que queira procura, nesse caso

estamos procurando uma das palavras do MENU. Vamos procurar a palavra DOWNLOADS.

30

Agora muita atenção nessa parte, essa é uma das partes que requer mais atenção para efetuar

as mudanças no blog, VAMOS ALTERAR OS NOMES DO MENU. Depois de procurar o nome

DOWNLOADS repare que o nome está em >DOWNLOADS< apague o nome DOWNLOADS sem

apagar os símbolos > < agora coloque o nome que preferir, nesse caso eu irei colocar o nome

ESCOLA. O botão devera fica assim >ESCOLA<. Depois de alterar, observe que o botão

DOWNLOADS 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 do

menu 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>

31

<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

32

</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ão

MODIFIQUE 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 BLOG

Para colocar uma apresentação de slides no blog precisamos hospedar o arquivo do Power

Point em outro site, além disso, é possível usar vários outros formatos de arquivos como

mostraremos a seguir, inclusive PDF, DOC (documento do word) e vários outros. Essas são

maneiras 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 isso

verifique seu email, pois receberá um email para confirmar seu cadastro. Depois disso quando

fizer 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).

33

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 (apple

quicktime), 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 É NO

MENU PRIVACY (who can see this), deve USAR PUBLIC assim todos poderão ver sua

apresentaçã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ágina

DESIGN > ADICIONAR GADGET > HTML/JAVASCRIPT e cole o código ou se preferir pode

publicar os slides em uma postagem. Ainda é possível enviar para o Twitter, Facebook ou

email diretamente pelo site SlideShare.

Pronto seu blog agora esta com slide.

OUTRA MANEIRA DE COLOCAR UM SLIDE NO BLOG

1º - 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”.

34

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.

35

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.

36

REFERÊNCIAS:

MELO, Cleilton Mendes. Tutorial Oficina de Blog. Formação Continuada de Professores da 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 de

Maio de 2011.