Tutorial Primeiras Blogadas

8/14/2019 Tutorial Primeiras Blogadas

1/6

TUTORI@LPrimeiras blogadas

Como acessar o editor HTML do Blogger/Blospot?

&

Linque Leia Mais ou Continue lendo...

Eu participoLIRA DUTRA

E-MAIL: [email protected]

BLOGUES:http//:granjaceara.blogspot.com

http//:liradutra.blogspot.com

Granja-Cear-Brasil 2009

Sumrio

Como acessar o editor HTML do Blogger/Blogspot?..........................................................................2

Linque Leia Mais ou Continue lendo............................................................................................4

Consideraes finais.............................................................................................................................6

Apresentao

Esta tutorial foi preparada para o(a) blogueiro(a) iniciante que quer personalizar seublogue hospedado no servidor blogspot.com do Blogger. Depois de ter apanhado umbocado procurando e testando cdigo de como colocar um linque do tipo Leia maisoucontinue lendonas postagens de meu blogue, descobri que alguns amigos blogueirosestavam na mesma empreitada. Como os tutoriais que eu encontrei estavam um tantofragmentados pesquisei mais e montei esse tutorial. Que estava guardadinho no HD e sagora motivado pelo Movimento Blog Voluntrio (http://www.blogvoluntario.org.br) quedecidi publicar.

O tutorial est dividido em duas partes. A primeira mostra como acessar o editor HTML

do Blogger. Se voc j sabe com fazer, passe para a segunda parte, onde est o cdigo

Leia Mais...

TUTORI@L Primeiras blogadas Lira Dutra www.granjaceara.com.br

8/14/2019 Tutorial Primeiras Blogadas

2/6

Como acessar o editor HTML do Blogger?

Antes de comear voc precisa acessar o editor HTML do Blogger. No sabe com fazerisso? No se preocupe, irei mostrar passa-a-passo. Mas deixamos de conversa e vamoslogo ao que interessa!

1- Faa seu login e no painel de administrao do seu blogue clique na opo Layoutpara acessar a rea de edio.

2- No menu Layouttemos as opes Elementos da pgina, Fontes e cores, EditarHTML, Escolher novo modelo e Gerar Receita. Selecione com um clique a opo Editar

HTML.

3- aqui onde est o cdigo CSS e HTML do seu blogue, preste ateno quando foralterar alguma coisa nele. Veja a figura abaixo como a rea do editor HTML est dividida. recomendado que voc se familiarize com essa tela, pois aqui onde iremos trabalharpor muito e muito tempo de blogosfera. Isso se voc pretende continuar blogando epersonalizando seu blogue.

8/14/2019 Tutorial Primeiras Blogadas

3/6

na rea de edio que faremos a personalizao do blogue, atravs da modificaono cdigos CSS ou HTML original do modelo de seu blogue.

Quando terminar de modificar o cdigo do blogue clique no botoVISUALIZAR antes de clicar no boto SALVA MODELO. Isso evita quevoc salve alteraes indesejadas e caso tenho algum erro o sistema

informar e o blogue no carregar no navegador. Veja a imagem:

Ateno

recomendadoque voc faa umteste em um

blogue de teste,caso no tenhacerteza.

8/14/2019 Tutorial Primeiras Blogadas

4/6

Linque Leia Mais ou Continue lendo...

Agora voc j sabe onde editar o cdigo-fonte do seu blogue, ento vamospersonalizar. O cdigo Leia Mais para Blogger/Blogspot bem til para suas postagensmaiores, cria resumo e deixar o visual do blogue mais dinmico. Antes de comearmarque a caixinha Expandir modelo de widgets.

1- Primeiro vamos adicionar o cdigo abaixo antes da tag . Localize a tag, que geralmente est localizada acima da tag , e cole o cdigo abaixo:

span.fullpost {display:inline;} span.fullpost {display:none;}

Ficar igual na imagem abaixo:

Clique em Visualizar e, se no aparecer mensagem de erro, continue. Ainda nodever aparecer o linque Leia mais no seu blogue.

2- Agora localize a seguinte linha no cdigo de seu blogue:

3- Abaixo da linha acima cole as linhas abaixo:[Leia mais]

Veja como fica na imagem abaixo:

Dic@:

Salve seu modelo de blogue (templete) antes de comear. Clique em Baixar modelocompleto e salve uma cpia no seu computador, caso algo saia errado ou voc queira seu

modelo antigo s fazer um uploadclicando no botoArquivo e depois no boto FazerUpload.

8/14/2019 Tutorial Primeiras Blogadas

5/6

Clique em Visualizar e, se no aparecer mensagem de erro, clique no boto Salvarmodelo. Ainda no dever aparecer o linque Leia mais no seu blogue.

4- Agora vamos para a etapa final. Aps salvar as alteraes feitas no modelo doblogue, clique em Configurao Formatao, desa com a barra de rolagem at a baseda tela, copie (Ctrl + C) e cole (Ctrl + V) o cdigo abaixo na caixa Modelo de postagem.Clique em Salvar configuraes.

digite o resumo da postagem aqui

digite o restante da postagem aqui (se d erro: apagar as tag div

do post)

Veja imagem abaixo:

Pronto, toda vez que voc criar um novo post, ele mostrar exatamente onde digitar o

Dic@

Hack foi testado na ltima verso do Mozilla Firefox, veja exemplo nos blogueshttp://liradutra.blogspot.com e http://granjaceara.blogspot.com. Alguma dvida ou casode sucesso envie e-mail para [email protected] .

8/14/2019 Tutorial Primeiras Blogadas

6/6

resumo e onde ler o restante da postagem. Para facilitar escreva os posts no modo ediode HTML da caixa de postagem do Blogger. Como na imagem abaixo:

Consideraes finais

Encontrei vrios exemplos de cdigo Leia mais ou Continue lendo e na minhaopinio esse o melhor para o(a) blogueiro(a) que est comeando agora a mexer nocdigo-fonte do blogue sem conhecimento de CSS e HTML. Digo isso por ser uminiciante. O que sei sobre CSS e HTML s dar para eu sobreviverna blogosfera, mas opouco que sei quero compartilhar com os companheiros e espero ter ajudado.

Agradeo aos blogueiros postam, incansavelmente, fortalecendo a partilha, a rede desolidariedade digital na blogosfera brasileira. Sou grato, tambm, as pessoas que sedisponha a melhorar essa tutorial.

Fontes/crditosO cdigo Leia maispode ser encontrado nas fontes seguintes:

ONLYTUTORIAIS,http://www.onlytutorials.com.br/2008/11/29/colocando-link-de-leia-mais-no-blogger/ TEMPLETESPARAVOC, http://templatesparavoce.blogspot.com/2009/01/hack-leia-

mais.html TEMPLETESNOVOBLOGGER,

http://templatesparanovoblogger.blogspot.com/2009/03/resumo-na-pagina-inicial-com-posts-de.html