44
FABIO BARROS NASCIMENTO BLOG UMA FORMAR FÁCIL DE CRIAR E GERENCIAR SEU BLOG TABOÃO DA SERRA 2012

Tutorial do blog

Embed Size (px)

Citation preview

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/