Tutorial do blog

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&hl=pt_BR&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&hl=pt_BR&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&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&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&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&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 != ""'>
<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”

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/

Tutorial do blog

Mais conteúdo relacionado

Mais procurados (18)

Semelhante a Tutorial do blog (20)

Tutorial do blog