Tutorialdeblogs 110505222146-phpapp02

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>
<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
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Parent Category</a> Coloque o nome do seu sub-botão
<li><a href='#'>Child Category 1</a> Coloque o nome do seu sub-botão
<li><a href='#'>Sub Child Category 1</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
</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
<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.

Tutorialdeblogs 110505222146-phpapp02

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Tutorialdeblogs 110505222146-phpapp02

Similar a Tutorialdeblogs 110505222146-phpapp02 (20)

Tutorialdeblogs 110505222146-phpapp02