SlideShare une entreprise Scribd logo
1  sur  44
Télécharger pour lire hors ligne
FABIO BARROS NASCIMENTO




                    BLOG
UMA FORMAR FÁCIL DE CRIAR E GERENCIAR SEU BLOG




               TABOÃO DA SERRA
                    2012
Fabio Barros Nascimento




                    BLOG
UMA FORMAR FÁCIL DE CRIAR E GERENCIAR SEU BLOG




             TABOÃO DA SERRA
                  2012
Este material pertence ao autor, foi
revisado    pela     Alexandra     da
Secretaria de Educação da Prefeitura
Municipal de Taboão da Serra com
propósito de servir como norteador
para os professores da rede, portando
comercializá-lo sem autorização do
autor é crime.
4

1. DEVE-SE CRIAR UM E-MAIL:



     Para criar um blog deve-se primeiro criar um “e-mail”, recomendo que seja
da GMAIL.


1.2. Criar um e-mail:


      Site de acesso da GMAIL click no link criar uma conta, como foto abaixo:




1.3. Agora vamos preencher os dados necessários:


       Você deve preencher todos os dados pedidos para que sua conta seja aberta
pelo Gmail, assim você terá acesso aos serviços oferecidos pela GOOGLE como:
YOUTUBE, ORKUT, 4 SHARED, TRADUTOR,BLOGGER e OUTROS.
       Veja as imagens da página de cadastro para criação do seu-mail, há alguns
campos que são fundamentas para o preenchimento dos dados do formulário de
criação do seu e-mail, na segunda imagem, já preenchida, estão colocadas setas que
5

indicam os campos aqui relatados e que a maioria das pessoas esquece e não
consegue criar o seu e-mail.
6

      Depois que criamos nosso e-mail da Gmail podemos acessar os
serviços da GOOGLE, como a criação de um BLOG pelo BLOGGER.
      AVISO: Caso tenha outra conta de e-mail criada em outro site, você
também pode ser usá-la, sem necessidade de criar um e-mail no GMAIL.
7


2. CRIANDO O BLOG:

     A imagem abaixo mostra o seu e-mail do GMAIL criado, observe
que há uma faixa preta no ao alto da página onde está escrito “+tu”,
“pesquisar”, “mapas”, “gmail”, “docs”, “calendário”, “Orkut”, “traditor” e
“mais”.
     Aperte em “mais”, e abrirá outras opções, click em “BLOGGER”,
como a seta aponta na imagem:




      Surgirá uma nova janela, conforme aparece na imagem abaixo:
      Digite sua senha novamente para começar a criação do BLOG:
8


2.1. Passo a passo da Criação do seu blogger:


      Note que há dois campos para serem preenchidos inicialmente, como
aparece nas setas abaixo, logo que forem preenchidas click em continuar:




     Agora irá aparecer a página abaixo, perceba que exite um campo
nomeado “Novo Blog”, click nele.
9


       Ao clicar, surgirá uma janela, (conforme a imagem abaixo). Preencha
o título (o meu título foi: “fiz meu blog fácil”, crie o seu título), criar o
endereço do blog ( o meu endereço é: “fizmeublogfacil.blogspot.com”, crie
o seu) e observe se este endereço não está sendo usado. Aparecerá a
palavra “DISPONÍVEL”, indicando isso, depois click em “criar o blog”




      Agora abrirá essa página, click em “Iniciar postagem”:
10

2.1.1. Configurar a sua conta para melhor atender sua necessidade:

        Conforme a imagem abaixo, click no título do seu Blog: exemplo:
“Fiz Meu Blog Fácil”.




        Click na opção configurações:
11

      Para configurar o blog, deve-se passar por todas as etapas da
configuração que estão dentro do quadro que são: básico, postagens e
comentários, celular e e-mail, idioma e formatação, outros.




       Click em “Privacidade”, depois “editar”. Irão aparecer as opções
seguintes: “adicionar seu blog às nossas listagens” (caso você queira que
apareça seu blog nas busca do GOOGLE), “sim” (você concorda em
participar das listas de busca do GOOGLE), “não” (você não concorda em
participar da listas do GOOGLE). A outra opção funciona da mesma forma,
mas para a lista de pesquisa de outros sites, como: YAHOO, BING,
TERRA e OUTROS).
       Click na opção desejada, que melhor adequa a você.




      Click em “Leitor do Blog” na opção editar, lá aparecerá algumas
opções que devem ser percebidas e analisadas para melhor uso do seu blog,
por exemplo: caso queira um blog aberto com acesso por todos que estão
12

navegando na rede, click na primeira opção “qualquer pessoa”, caso queira
privacidade e que apenas colaboradores do blog tenham acesso, click na
segunda opção “somente autores do blog”, porém se quiser criar uma lista
de acesso ao seu blog, com amigos ou parceiros profissionais, click na
opção “somente esses leitores”, e acrescente os e-mails deles, separados
por vírgula.




     Depois click em “Postagens e comentários”.
     Na imagem abaixo, estão configuradas as opções recomendadas,
porém você pode configurar do seu jeito.




OPÇÕES:
Mostrar no máximo: 7 postagens;
Quem pode comentar? (*) Qualquer pessoa;
Moderação de comentários? (*) sempre.
13

      O resto das opções mantenha como está, e vamos para a primeira
postagem e personalizar seu layout de página.

2.1.2. Layout de página.

      Primeiro click em “Designer” de modelo:




      Abrirá a seguinte página:
14

      Perceba que no canto esquerdo superior da imagem, apareceram os
dizeres: “modelos”, “plano de fundo”, “ajustar largura”, “layout e
avançado”.
      Click em simples e observe as opções com as setas, explicadas em
baixo da imagem:




       Click na opção “simples”, depois click em “pano de fundo”, sugirá
essa tela:
15

      Click em “nenhum” e abrirá uma janela, você pode escolher qualquer
das opções que aparece no campo “pano de fundo” ou abrir uma imagem
do seu computador como pano de fundo. Para isso, click em “fazer upload
da imagem”, “escolha arquivo”, depois selecione uma imagem de seu
computador e click em “abrir” e “aplicar no blog” conforme as imagens
abaixo.
16




      Veja como ficou:




2.1.3. Configuração particular com Layout :

      Do lado do link “aplicar no blog”, click em “voltar para o blog”,
aperte no link “layout”,
17




      Podemos perceber que existem vários campos a serem preenchidos,
vamos começar pelo título.
      Onde está escrito Título, click em “editar” aparecerá uma janela,
com os campos, “título do blog”; “descrição do blog”; “imagem: de seu
computador”, “da cole um URL de imagem abaixo”.
      O “título” aparecerá automaticamente, na “descrição do blog”, você
pode descrever a finalidade dele.




      Caso você queira colocar uma imagem ao lado do seu “título” ou
“descrição” recomendamos que use um site auxiliar do seguinte modo:
      Escolha uma imagem do seu computador ou baixe da internet (salve
em seu computador):
18




       Depois, abra uma aba em seu
       navegador e digite o site:
       http://tinypic.com/, click em “escolher arquivo”, sugira uma janela, escolha a
imagem que você abaixou anteriormente, click em abrir e de upload em sua foto,
apertando o botão “upload now”!




       Irá surgir essa janela, digite as letras “malucas” e click em “upload
now”
19




      Existem algumas opções, copie a última casinha da HTTP//,
conforme a imagem abaixo:




       Coloque o endereço de HTTP// dentro do quadro descrição do blog:
       Depois acrescente a <img src=“endereço HTTP://”>, estas siglas que
estão de vermelho, tudo junto sem espaçamento entre as aspas e o endereço de
HTTP, caso contrário não vai funcionar. Como se vê no modelo e na foto:
       <img src="http://i39.tinypic.com/acbscx.gif"> Fiz Meu Blog Fácil, e
click em salvar:
20




        Pronto o “título”, um “gif animado” e o comentário no cabeçalho do
blog.
21

     Agora vamos adicionar os gadgets:
     Click no gadget




Aparecerá a janela acima, se olhar do seu lado esquerdo estará escrito
“noções básicas”. Embaixo dessa escrita: “destaque”, “mais comum”,
“mais gadgets”, “adicionar seu próprio”.

Vamos adicionar o mais comum deles, o “gadget de seguidor”.

                             Role a barra de rolagem de seu navegador,
                             você verá que existem várias opções de
                             gadgets a sua escolha, do lado, temos um
                             sinal de “mais”, click nela caso queira
                             adicionar o aquele gadget que se encontra na
                             frente, a escolha na imagem é do “gadget
                             dos seguidores”.

                             Click no “sinal de mais”, aperte em salvar e
                             pronto, esse gadget encontra-se postado em
                             seu blog.
22

      Como fica este gadget no blog:




      Você pode colocar “gadget de relógio”, “calendário”, “campo de
pesquisa”, entre outros, da mesma maneira e organizar estes gadgets dentro
do seu blog, arrastados pelo layout.
23




2.1.3. Postagem da primeira página.

2.1.4. Postagem de página.

Agora click em “postagem”, e em seguida “Criar uma nova postagem”.




       Abrirá a janela seguinte, digite seu texto, caso queira colocar alguma
foto click no ícone indicado pela seta.
24




       Depois aparecerá a seguinte janela, click em “escolher arquivo”,
abrirá outra janela, escolha sua imagem e click “abrir”, retonará a janela
anterior, selecione a imagem que abriu e click em “add selected”.
25




      Você pode acrescentar mais algum comentário ou continuar a
desenvolver seu tema conforme sua necessidade e assim que terminar click
em “publicar”




       Veja como ficou a primeira postagem e perceba que apareceu no
campo “Arquivo do Blog”, o primeiro link de postagem (conforme indica a
seta).
26




2.1.4.1. Como incorporar um vídeo em seu blog.

     Primeiro poste ou escolha um vídeo no youtube (forma mais
recomentada de postar vídeo em seu blog).

      Agora perceba que existe um campo abaixo da tela que é exibida o
vídeo, intitulado: “compartilhar”.




                                         Click    em    “compartilhar”,
                                         depois em “incorporar”
27

      Abrirá a seguinte tela, escolha o tamanho da tela do vídeo, que deve
aparecer no seu blog (420x315 até 960x720), selecione “usar código de
incorporação antigo” copie o endereço que em azul e cole no seu campo de
postagem e click em publicar (escreva um texto para explicar o vídeo se for
o caso).




      Para postar seu vídeo, click primeiro em “HTML”, depois cole o
endereço de incorporação do youtube (aquele que estava em azul), volte
para escrever e o vídeo estará pronto, para ser exibido em seu blog, click
em “atualizar” e “visualizar” em seu blog.
28




2.1.4.2. Como incorporar um vídeo em seu blog com autoplay.

      Auto Play é aquele vídeo ou áudio que se inicia sozinho.
      Para ter essa especificação em seu blog, você precisa acrescentar o
código: &autoplay=1 no final do endereço de incorporar.

       Porém, há um truque para funcionar corretamente:

1º você vai seguir os passos da postagem normal de um vídeo;
2º quando você voltar para “escrever”, retorne para “HTML”, e acrescente
o seguinte código em dois pontos estratégicos (os campos que estão em
destaque tem a palavra “amp” em vermelho) troque-as por autoplay=1.
Estava assim:
<object height="360" width="480"><param name="movie"
value="http://www.youtube.com/v/DnzuKKG6-AA?version=3&amp;hl=pt_BR&amp;rel=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
29

<embed src="http://www.youtube.com/v/DnzuKKG6-AA?version=3&amp;hl=pt_BR&amp;rel=0"
type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always"
allowfullscreen="true"></embed></object>

FICA ASSIM:
<object height="360" width="480"><param name="movie"
value="http://www.youtube.com/v/DnzuKKG6-AA?version=3&autoplay=1;hl=pt_BR&amp;rel=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/DnzuKKG6-
AA?version=3&autoplay=1;hl=pt_BR&amp;rel=0" type="application/x-shockwave-flash" width="480"
height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>

3ºClick em “atualizar” e “visualizar”, pronto.




Seu vídeo no blog iniciará sozinho:
30

2.1.4.3. Outra forma mais tranquila de postar um vídeo ou áudio:

      Copie o nome do vídeo do youtube, exemplo:




      Click em “insert a vídeo”




       Depois click em “From Youtube”, copie o nome do vídeo do youtube
e click em pesquisar.
31




Agora selecione seu o
vídeo e click em
“selecionar”,          e
“publicar”, está pronto,
agora você pode ver o
resultado apertando a
opção “visualizar”.
32

2.1.4.4. Postar imagem ou palavra com hiperlink:

      Vamos colocar um link em uma palavra do nosso texto de postagem,
a palavra escolhida é “BLOGGER”, selecione essa palavra e click no
“Link”.




                                     Irá abrir essa tela, no campo
                               endereço de web, cole aquele endereço de
                               web que você escolheu.




      Abra outra aba em seu navegador e entre na página web que você
quer criar o link em seu blog, há duas maneiras para serem feitas:

      1º Copie o endereço do link, conforme mostra na figura:
33

      2º Copie o endereço do site, conforme figura:




      Agora cole o “endereço de link ou do site” na janela “editar link”, no
campo indicado, marque o campo “abrir este link em outra janela” e dê
“ok”.




      Ficará desse modo seu hiperlink:




      Para criar um hiperlink na imagem, click na imagem escolhida e no
ícone “Link”, conforme apresenta esta tela:




      Surgirá a mesma janela que apareceu no link do hiperlink do texto, o
procedimento é o mesmo, escolha o “endereço de link ou site” que você
34

quer adicionar ao seu blog e click em “ok”, depois só click em “publicar” e
“visualizar”, está pronto, ficarão assim seus links:




2.1.4.5. Colocar música em autoplay:

      Aviso: os procedimentos a seguir são feitos no ícone “HTML” se
você estiver no ícone “escrever” não vai funcionar.




      Assim como se fez no vídeo, deve-se fazer no autoplay de música;
siga o procedimento de cópia o endereço do ícone “compartilhar e
incomporar” do youtube, e modifique os seguintes itens que aparecem na
imagem acima e abaixo estão de vermelho, já modificados:
35


<object       width="200"     height="30"><param        name="movie"
value="http://www.youtube.com/v/v7rXgogsqs0?version=3&amp;hl=pt_B
R&autoplay=1;rel=0"></param><param            name="allowFullScreen"
value="true"></param><param                  name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/v7rXgogsqs0?version=3&amp;hl=pt_BR
&autoplay=1;rel=0" type="application/x-shockwave-flash" width="200"
height="30"                                allowscriptaccess="always"
allowfullscreen="true"></embed></object>

Depois click em “publicar” e seu auto play de música está pronto, aperte
em “visualizar” para conferir.

Veja como ficou:




      Autoplay de música tocando.
36




3. Outras ferramentas para o blog:

3.1. Cursor animado (a setinha do mouse com figuras animadas)

      Para ficar mais fácil nossa nova empreitada, vamos usar a versão
antiga do “BLOGGER”, click em “ferramentas”, “interface antiga do
BLOGGER”




Volta a ser assim:
37




Click em “Design”, depois editar “HTML”,




      Aparecerá essa janela, note os códigos “HTML”, eles que
proporcionam seu cursor animado, aguarde para retornar com o código.
38




     Abra uma nova aba em seu navegador e digite:

                       http://www.cursors-4u.com/




    Escolha qualquer modelo de cursor e click, copie o endereço
“HTLM” e volte para a outra aba que está com editor de “HTML” aberto:
39




      Copie na parte depois de </b:if> e antes de <b:skin><![CDATA[/*
no início do código “HTML”, conforme modelo e imagem e click em
“salvar modelo”.


      <?xml version="1.0" encoding="UTF-8" ?>
      <!DOCTYPE html>
      <html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
       <head>
        <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
        <b:if cond='data:blog.isMobile'>
          <meta content='width=device-width,initial-scale=1.0,minimum-
scale=1.0,maximum-scale=1.0' name='viewport'/>
        <b:else/>
          <meta content='width=1100' name='viewport'/>
        </b:if>
        <b:include data='blog' name='all-head-content'/>
        <title><data:blog.pageTitle/></title>
        <b:if cond='data:blog.metaDescription != &quot;&quot;'>
          <meta                   expr:content='data:blog.metaDescription'
name='description'/>
        </b:if>

       <style type='text/css'>body, a:hover {cursor: url(http://cur.cursors-
4u.net/people/peo-9/peo1021.cur),       progress       !important;}</style><a
href='http://www.cursors-4u.com/cursor/2012/01/28/mockingjay.html'
target='_blank' title='Mockingjay'><img alt='Mockingjay' border='0'
src='http://cur.cursors-4u.net/cursor.png' style='position:absolute; top: 0px;
right: 0px;'/></a>


         <b:skin><![CDATA[/*
      -----------------------------------------------
      Blogger Template Style
      Name: Simple
      Designer: Josh Peterson
      URL:       www.noaesthetic.com
40

     ----------------------------------------------- */




      O cursor animado se encontrará disponível em seu blog, para
conferir, click em “visualizar”.
41

3.2. Criar outros blogs dentro do seu blog.

      Click em “painel”, depois “criar um blog”.




      Faça exatamente como fez quando começou a criar seu blog, a partir
da imagem abaixo:
42

      Depois de pronto, você pode convidar outros autores para postar,
pode ser seus professores ou alunos da U.E, com configuração restrita,
sendo você o administrador do blog.




      Coloque o endereço de e-mail e click em convidar:




      Observe que para seu professor ou aluno fazer parte do seu blog, ele
tem que ter uma conta no “GOOGLE”
43
44

Dicas de site:

http://fizmeublogefacil.blogspot.com

http://www.flickr.com/

https://mail.google.com

http://www.cursors-4u.com/

http://youtube.com.br

http://tinypic.com/

https://sites.google.com/?hl=pt-BR

http://realplayer.softonic.com.br/

http://www.slideshare.net/

Contenu connexe

Tendances

Tutorial blogger elyene_fabricia
Tutorial blogger elyene_fabriciaTutorial blogger elyene_fabricia
Tutorial blogger elyene_fabricia
tatyeduca
 
Blog Educacional
Blog EducacionalBlog Educacional
Blog Educacional
vivianelima
 
Como criar um blog no blogspot
Como criar um blog no blogspotComo criar um blog no blogspot
Como criar um blog no blogspot
Lucikelly Oliveira
 

Tendances (18)

Apostila como criar um blog
Apostila como criar um blogApostila como criar um blog
Apostila como criar um blog
 
555
555555
555
 
AIAI
AIAIAIAI
AIAI
 
Tutorial do blog do PIBID UNEAL Geografia Campus I
Tutorial do blog do PIBID UNEAL Geografia Campus ITutorial do blog do PIBID UNEAL Geografia Campus I
Tutorial do blog do PIBID UNEAL Geografia Campus I
 
Como criar um blog
Como criar um blogComo criar um blog
Como criar um blog
 
Tutorial blogger elyene_fabricia
Tutorial blogger elyene_fabriciaTutorial blogger elyene_fabricia
Tutorial blogger elyene_fabricia
 
Oficina Criando Um Blog
Oficina Criando Um BlogOficina Criando Um Blog
Oficina Criando Um Blog
 
Criar um blog
Criar um blogCriar um blog
Criar um blog
 
Blog Educacional
Blog EducacionalBlog Educacional
Blog Educacional
 
Módulo II
Módulo IIMódulo II
Módulo II
 
Como criar um blog no BLOGSPOT?
Como criar um blog no BLOGSPOT?Como criar um blog no BLOGSPOT?
Como criar um blog no BLOGSPOT?
 
Criar blog
Criar blogCriar blog
Criar blog
 
Manual pratico word press
Manual pratico word pressManual pratico word press
Manual pratico word press
 
Guia basico -blogger-interface_atualizado
Guia basico -blogger-interface_atualizadoGuia basico -blogger-interface_atualizado
Guia basico -blogger-interface_atualizado
 
Blogger Tutorial
Blogger TutorialBlogger Tutorial
Blogger Tutorial
 
Como criar um blog no blogspot
Como criar um blog no blogspotComo criar um blog no blogspot
Como criar um blog no blogspot
 
Apostila como criar um blog
Apostila como criar um blogApostila como criar um blog
Apostila como criar um blog
 
[WORDPRESS] Manual do Usuário
[WORDPRESS] Manual do Usuário[WORDPRESS] Manual do Usuário
[WORDPRESS] Manual do Usuário
 

Similaire à Tutorial do blog (20)

Criar um blog
Criar um blogCriar um blog
Criar um blog
 
Blog educacional
Blog educacionalBlog educacional
Blog educacional
 
Apostila conceitos web 2.0 - parte iii
Apostila   conceitos web 2.0 - parte iiiApostila   conceitos web 2.0 - parte iii
Apostila conceitos web 2.0 - parte iii
 
Apostila conceitos web 2.0 - parte iii
Apostila   conceitos web 2.0 - parte iiiApostila   conceitos web 2.0 - parte iii
Apostila conceitos web 2.0 - parte iii
 
Apostila conceitos web 2.0 - parte iii
Apostila   conceitos web 2.0 - parte iiiApostila   conceitos web 2.0 - parte iii
Apostila conceitos web 2.0 - parte iii
 
calendario
calendariocalendario
calendario
 
Apostila-conceitos web 2.0 - parte III
Apostila-conceitos web 2.0 - parte IIIApostila-conceitos web 2.0 - parte III
Apostila-conceitos web 2.0 - parte III
 
novidades do momento
novidades do momentonovidades do momento
novidades do momento
 
Tutorial blog - Portal Educacional
Tutorial blog - Portal EducacionalTutorial blog - Portal Educacional
Tutorial blog - Portal Educacional
 
Mayer criando um blog
Mayer criando um blogMayer criando um blog
Mayer criando um blog
 
Como criar um blog
Como criar um blogComo criar um blog
Como criar um blog
 
Como fazer um blog parte 1
Como fazer um blog parte 1Como fazer um blog parte 1
Como fazer um blog parte 1
 
Como Criar Um Blog
Como Criar Um BlogComo Criar Um Blog
Como Criar Um Blog
 
Guia BáSico 3
Guia BáSico 3Guia BáSico 3
Guia BáSico 3
 
Como criar um blog
Como criar um blogComo criar um blog
Como criar um blog
 
Blogger Tutorial
Blogger TutorialBlogger Tutorial
Blogger Tutorial
 
Criar blog no Blogger
Criar blog no Blogger Criar blog no Blogger
Criar blog no Blogger
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
Criando Blog Ste
Criando Blog SteCriando Blog Ste
Criando Blog Ste
 
Tutorial Blogger
Tutorial BloggerTutorial Blogger
Tutorial Blogger
 

Tutorial do blog

  • 1. FABIO BARROS NASCIMENTO BLOG UMA FORMAR FÁCIL DE CRIAR E GERENCIAR SEU BLOG TABOÃO DA SERRA 2012
  • 2. Fabio Barros Nascimento BLOG UMA FORMAR FÁCIL DE CRIAR E GERENCIAR SEU BLOG TABOÃO DA SERRA 2012
  • 3. Este material pertence ao autor, foi revisado pela Alexandra da Secretaria de Educação da Prefeitura Municipal de Taboão da Serra com propósito de servir como norteador para os professores da rede, portando comercializá-lo sem autorização do autor é crime.
  • 4. 4 1. DEVE-SE CRIAR UM E-MAIL: Para criar um blog deve-se primeiro criar um “e-mail”, recomendo que seja da GMAIL. 1.2. Criar um e-mail: Site de acesso da GMAIL click no link criar uma conta, como foto abaixo: 1.3. Agora vamos preencher os dados necessários: Você deve preencher todos os dados pedidos para que sua conta seja aberta pelo Gmail, assim você terá acesso aos serviços oferecidos pela GOOGLE como: YOUTUBE, ORKUT, 4 SHARED, TRADUTOR,BLOGGER e OUTROS. Veja as imagens da página de cadastro para criação do seu-mail, há alguns campos que são fundamentas para o preenchimento dos dados do formulário de criação do seu e-mail, na segunda imagem, já preenchida, estão colocadas setas que
  • 5. 5 indicam os campos aqui relatados e que a maioria das pessoas esquece e não consegue criar o seu e-mail.
  • 6. 6 Depois que criamos nosso e-mail da Gmail podemos acessar os serviços da GOOGLE, como a criação de um BLOG pelo BLOGGER. AVISO: Caso tenha outra conta de e-mail criada em outro site, você também pode ser usá-la, sem necessidade de criar um e-mail no GMAIL.
  • 7. 7 2. CRIANDO O BLOG: A imagem abaixo mostra o seu e-mail do GMAIL criado, observe que há uma faixa preta no ao alto da página onde está escrito “+tu”, “pesquisar”, “mapas”, “gmail”, “docs”, “calendário”, “Orkut”, “traditor” e “mais”. Aperte em “mais”, e abrirá outras opções, click em “BLOGGER”, como a seta aponta na imagem: Surgirá uma nova janela, conforme aparece na imagem abaixo: Digite sua senha novamente para começar a criação do BLOG:
  • 8. 8 2.1. Passo a passo da Criação do seu blogger: Note que há dois campos para serem preenchidos inicialmente, como aparece nas setas abaixo, logo que forem preenchidas click em continuar: Agora irá aparecer a página abaixo, perceba que exite um campo nomeado “Novo Blog”, click nele.
  • 9. 9 Ao clicar, surgirá uma janela, (conforme a imagem abaixo). Preencha o título (o meu título foi: “fiz meu blog fácil”, crie o seu título), criar o endereço do blog ( o meu endereço é: “fizmeublogfacil.blogspot.com”, crie o seu) e observe se este endereço não está sendo usado. Aparecerá a palavra “DISPONÍVEL”, indicando isso, depois click em “criar o blog” Agora abrirá essa página, click em “Iniciar postagem”:
  • 10. 10 2.1.1. Configurar a sua conta para melhor atender sua necessidade: Conforme a imagem abaixo, click no título do seu Blog: exemplo: “Fiz Meu Blog Fácil”. Click na opção configurações:
  • 11. 11 Para configurar o blog, deve-se passar por todas as etapas da configuração que estão dentro do quadro que são: básico, postagens e comentários, celular e e-mail, idioma e formatação, outros. Click em “Privacidade”, depois “editar”. Irão aparecer as opções seguintes: “adicionar seu blog às nossas listagens” (caso você queira que apareça seu blog nas busca do GOOGLE), “sim” (você concorda em participar das listas de busca do GOOGLE), “não” (você não concorda em participar da listas do GOOGLE). A outra opção funciona da mesma forma, mas para a lista de pesquisa de outros sites, como: YAHOO, BING, TERRA e OUTROS). Click na opção desejada, que melhor adequa a você. Click em “Leitor do Blog” na opção editar, lá aparecerá algumas opções que devem ser percebidas e analisadas para melhor uso do seu blog, por exemplo: caso queira um blog aberto com acesso por todos que estão
  • 12. 12 navegando na rede, click na primeira opção “qualquer pessoa”, caso queira privacidade e que apenas colaboradores do blog tenham acesso, click na segunda opção “somente autores do blog”, porém se quiser criar uma lista de acesso ao seu blog, com amigos ou parceiros profissionais, click na opção “somente esses leitores”, e acrescente os e-mails deles, separados por vírgula. Depois click em “Postagens e comentários”. Na imagem abaixo, estão configuradas as opções recomendadas, porém você pode configurar do seu jeito. OPÇÕES: Mostrar no máximo: 7 postagens; Quem pode comentar? (*) Qualquer pessoa; Moderação de comentários? (*) sempre.
  • 13. 13 O resto das opções mantenha como está, e vamos para a primeira postagem e personalizar seu layout de página. 2.1.2. Layout de página. Primeiro click em “Designer” de modelo: Abrirá a seguinte página:
  • 14. 14 Perceba que no canto esquerdo superior da imagem, apareceram os dizeres: “modelos”, “plano de fundo”, “ajustar largura”, “layout e avançado”. Click em simples e observe as opções com as setas, explicadas em baixo da imagem: Click na opção “simples”, depois click em “pano de fundo”, sugirá essa tela:
  • 15. 15 Click em “nenhum” e abrirá uma janela, você pode escolher qualquer das opções que aparece no campo “pano de fundo” ou abrir uma imagem do seu computador como pano de fundo. Para isso, click em “fazer upload da imagem”, “escolha arquivo”, depois selecione uma imagem de seu computador e click em “abrir” e “aplicar no blog” conforme as imagens abaixo.
  • 16. 16 Veja como ficou: 2.1.3. Configuração particular com Layout : Do lado do link “aplicar no blog”, click em “voltar para o blog”, aperte no link “layout”,
  • 17. 17 Podemos perceber que existem vários campos a serem preenchidos, vamos começar pelo título. Onde está escrito Título, click em “editar” aparecerá uma janela, com os campos, “título do blog”; “descrição do blog”; “imagem: de seu computador”, “da cole um URL de imagem abaixo”. O “título” aparecerá automaticamente, na “descrição do blog”, você pode descrever a finalidade dele. Caso você queira colocar uma imagem ao lado do seu “título” ou “descrição” recomendamos que use um site auxiliar do seguinte modo: Escolha uma imagem do seu computador ou baixe da internet (salve em seu computador):
  • 18. 18 Depois, abra uma aba em seu navegador e digite o site: http://tinypic.com/, click em “escolher arquivo”, sugira uma janela, escolha a imagem que você abaixou anteriormente, click em abrir e de upload em sua foto, apertando o botão “upload now”! Irá surgir essa janela, digite as letras “malucas” e click em “upload now”
  • 19. 19 Existem algumas opções, copie a última casinha da HTTP//, conforme a imagem abaixo: Coloque o endereço de HTTP// dentro do quadro descrição do blog: Depois acrescente a <img src=“endereço HTTP://”>, estas siglas que estão de vermelho, tudo junto sem espaçamento entre as aspas e o endereço de HTTP, caso contrário não vai funcionar. Como se vê no modelo e na foto: <img src="http://i39.tinypic.com/acbscx.gif"> Fiz Meu Blog Fácil, e click em salvar:
  • 20. 20 Pronto o “título”, um “gif animado” e o comentário no cabeçalho do blog.
  • 21. 21 Agora vamos adicionar os gadgets: Click no gadget Aparecerá a janela acima, se olhar do seu lado esquerdo estará escrito “noções básicas”. Embaixo dessa escrita: “destaque”, “mais comum”, “mais gadgets”, “adicionar seu próprio”. Vamos adicionar o mais comum deles, o “gadget de seguidor”. Role a barra de rolagem de seu navegador, você verá que existem várias opções de gadgets a sua escolha, do lado, temos um sinal de “mais”, click nela caso queira adicionar o aquele gadget que se encontra na frente, a escolha na imagem é do “gadget dos seguidores”. Click no “sinal de mais”, aperte em salvar e pronto, esse gadget encontra-se postado em seu blog.
  • 22. 22 Como fica este gadget no blog: Você pode colocar “gadget de relógio”, “calendário”, “campo de pesquisa”, entre outros, da mesma maneira e organizar estes gadgets dentro do seu blog, arrastados pelo layout.
  • 23. 23 2.1.3. Postagem da primeira página. 2.1.4. Postagem de página. Agora click em “postagem”, e em seguida “Criar uma nova postagem”. Abrirá a janela seguinte, digite seu texto, caso queira colocar alguma foto click no ícone indicado pela seta.
  • 24. 24 Depois aparecerá a seguinte janela, click em “escolher arquivo”, abrirá outra janela, escolha sua imagem e click “abrir”, retonará a janela anterior, selecione a imagem que abriu e click em “add selected”.
  • 25. 25 Você pode acrescentar mais algum comentário ou continuar a desenvolver seu tema conforme sua necessidade e assim que terminar click em “publicar” Veja como ficou a primeira postagem e perceba que apareceu no campo “Arquivo do Blog”, o primeiro link de postagem (conforme indica a seta).
  • 26. 26 2.1.4.1. Como incorporar um vídeo em seu blog. Primeiro poste ou escolha um vídeo no youtube (forma mais recomentada de postar vídeo em seu blog). Agora perceba que existe um campo abaixo da tela que é exibida o vídeo, intitulado: “compartilhar”. Click em “compartilhar”, depois em “incorporar”
  • 27. 27 Abrirá a seguinte tela, escolha o tamanho da tela do vídeo, que deve aparecer no seu blog (420x315 até 960x720), selecione “usar código de incorporação antigo” copie o endereço que em azul e cole no seu campo de postagem e click em publicar (escreva um texto para explicar o vídeo se for o caso). Para postar seu vídeo, click primeiro em “HTML”, depois cole o endereço de incorporação do youtube (aquele que estava em azul), volte para escrever e o vídeo estará pronto, para ser exibido em seu blog, click em “atualizar” e “visualizar” em seu blog.
  • 28. 28 2.1.4.2. Como incorporar um vídeo em seu blog com autoplay. Auto Play é aquele vídeo ou áudio que se inicia sozinho. Para ter essa especificação em seu blog, você precisa acrescentar o código: &autoplay=1 no final do endereço de incorporar. Porém, há um truque para funcionar corretamente: 1º você vai seguir os passos da postagem normal de um vídeo; 2º quando você voltar para “escrever”, retorne para “HTML”, e acrescente o seguinte código em dois pontos estratégicos (os campos que estão em destaque tem a palavra “amp” em vermelho) troque-as por autoplay=1. Estava assim: <object height="360" width="480"><param name="movie" value="http://www.youtube.com/v/DnzuKKG6-AA?version=3&amp;hl=pt_BR&amp;rel=0"> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param>
  • 29. 29 <embed src="http://www.youtube.com/v/DnzuKKG6-AA?version=3&amp;hl=pt_BR&amp;rel=0" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object> FICA ASSIM: <object height="360" width="480"><param name="movie" value="http://www.youtube.com/v/DnzuKKG6-AA?version=3&autoplay=1;hl=pt_BR&amp;rel=0"> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param> <embed src="http://www.youtube.com/v/DnzuKKG6- AA?version=3&autoplay=1;hl=pt_BR&amp;rel=0" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object> 3ºClick em “atualizar” e “visualizar”, pronto. Seu vídeo no blog iniciará sozinho:
  • 30. 30 2.1.4.3. Outra forma mais tranquila de postar um vídeo ou áudio: Copie o nome do vídeo do youtube, exemplo: Click em “insert a vídeo” Depois click em “From Youtube”, copie o nome do vídeo do youtube e click em pesquisar.
  • 31. 31 Agora selecione seu o vídeo e click em “selecionar”, e “publicar”, está pronto, agora você pode ver o resultado apertando a opção “visualizar”.
  • 32. 32 2.1.4.4. Postar imagem ou palavra com hiperlink: Vamos colocar um link em uma palavra do nosso texto de postagem, a palavra escolhida é “BLOGGER”, selecione essa palavra e click no “Link”. Irá abrir essa tela, no campo endereço de web, cole aquele endereço de web que você escolheu. Abra outra aba em seu navegador e entre na página web que você quer criar o link em seu blog, há duas maneiras para serem feitas: 1º Copie o endereço do link, conforme mostra na figura:
  • 33. 33 2º Copie o endereço do site, conforme figura: Agora cole o “endereço de link ou do site” na janela “editar link”, no campo indicado, marque o campo “abrir este link em outra janela” e dê “ok”. Ficará desse modo seu hiperlink: Para criar um hiperlink na imagem, click na imagem escolhida e no ícone “Link”, conforme apresenta esta tela: Surgirá a mesma janela que apareceu no link do hiperlink do texto, o procedimento é o mesmo, escolha o “endereço de link ou site” que você
  • 34. 34 quer adicionar ao seu blog e click em “ok”, depois só click em “publicar” e “visualizar”, está pronto, ficarão assim seus links: 2.1.4.5. Colocar música em autoplay: Aviso: os procedimentos a seguir são feitos no ícone “HTML” se você estiver no ícone “escrever” não vai funcionar. Assim como se fez no vídeo, deve-se fazer no autoplay de música; siga o procedimento de cópia o endereço do ícone “compartilhar e incomporar” do youtube, e modifique os seguintes itens que aparecem na imagem acima e abaixo estão de vermelho, já modificados:
  • 35. 35 <object width="200" height="30"><param name="movie" value="http://www.youtube.com/v/v7rXgogsqs0?version=3&amp;hl=pt_B R&autoplay=1;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/v7rXgogsqs0?version=3&amp;hl=pt_BR &autoplay=1;rel=0" type="application/x-shockwave-flash" width="200" height="30" allowscriptaccess="always" allowfullscreen="true"></embed></object> Depois click em “publicar” e seu auto play de música está pronto, aperte em “visualizar” para conferir. Veja como ficou: Autoplay de música tocando.
  • 36. 36 3. Outras ferramentas para o blog: 3.1. Cursor animado (a setinha do mouse com figuras animadas) Para ficar mais fácil nossa nova empreitada, vamos usar a versão antiga do “BLOGGER”, click em “ferramentas”, “interface antiga do BLOGGER” Volta a ser assim:
  • 37. 37 Click em “Design”, depois editar “HTML”, Aparecerá essa janela, note os códigos “HTML”, eles que proporcionam seu cursor animado, aguarde para retornar com o código.
  • 38. 38 Abra uma nova aba em seu navegador e digite: http://www.cursors-4u.com/ Escolha qualquer modelo de cursor e click, copie o endereço “HTLM” e volte para a outra aba que está com editor de “HTML” aberto:
  • 39. 39 Copie na parte depois de </b:if> e antes de <b:skin><![CDATA[/* no início do código “HTML”, conforme modelo e imagem e click em “salvar modelo”. <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum- scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:if cond='data:blog.metaDescription != &quot;&quot;'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if> <style type='text/css'>body, a:hover {cursor: url(http://cur.cursors- 4u.net/people/peo-9/peo1021.cur), progress !important;}</style><a href='http://www.cursors-4u.com/cursor/2012/01/28/mockingjay.html' target='_blank' title='Mockingjay'><img alt='Mockingjay' border='0' src='http://cur.cursors-4u.net/cursor.png' style='position:absolute; top: 0px; right: 0px;'/></a> <b:skin><![CDATA[/* ----------------------------------------------- Blogger Template Style Name: Simple Designer: Josh Peterson URL: www.noaesthetic.com
  • 40. 40 ----------------------------------------------- */ O cursor animado se encontrará disponível em seu blog, para conferir, click em “visualizar”.
  • 41. 41 3.2. Criar outros blogs dentro do seu blog. Click em “painel”, depois “criar um blog”. Faça exatamente como fez quando começou a criar seu blog, a partir da imagem abaixo:
  • 42. 42 Depois de pronto, você pode convidar outros autores para postar, pode ser seus professores ou alunos da U.E, com configuração restrita, sendo você o administrador do blog. Coloque o endereço de e-mail e click em convidar: Observe que para seu professor ou aluno fazer parte do seu blog, ele tem que ter uma conta no “GOOGLE”
  • 43. 43