Tutorial Primeiras Blogadas

TUTORI@L Primeiras blogadas Como acessar o editor HTML do Blogger/Blospot? & Linque “Leia Mais” ou “Continue lendo...” Eu participo

LIRA DUTRA E-MAIL:

[email protected]

BLOGUES: http//:granjaceara.blogspot.com http//:liradutra.blogspot.com Granja-Ceará-Brasil 2009

Sumário Como acessar o editor HTML do Blogger/Blogspot?..........................................................................2 Linque “Leia Mais” ou “Continue lendo...”.........................................................................................4 Considerações finais.............................................................................................................................6

Apresentação Esta tutorial foi preparada para o(a) blogueiro(a) iniciante que quer personalizar seu blogue hospedado no servidor blogspot.com do Blogger. Depois de ter apanhado um bocado procurando e testando código de como colocar um linque do tipo “Leia mais” ou “continue lendo” nas postagens de meu blogue, descobri que alguns amigos blogueiros estavam na mesma empreitada. Como os tutoriais que eu encontrei estavam um tanto fragmentados pesquisei mais e montei esse tutorial. Que estava guardadinho no HD e só agora motivado pelo Movimento Blog Voluntário (http://www.blogvoluntario.org.br) é que decidi 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 código “Leia Mais...”

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

Como acessar o editor HTML do Blogger? Antes de começar você precisa acessar o editor HTML do Blogger. Não sabe com fazer isso? Não se preocupe, irei mostrar passa-a-passo. Mas deixamos de conversa e vamos logo ao que interessa! 1- Faça seu login e no painel de administração do seu blogue clique na opção Layout para acessar a área de edição. 2- No menu Layout temos as opções Elementos da página, Fontes e cores, Editar HTML, Escolher novo modelo e Gerar Receita. Selecione com um clique a opção Editar HTML.

3- É aqui onde está o código CSS e HTML do seu blogue, preste atenção quando for alterar 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 trabalhar por muito e muito tempo de blogosfera. Isso é se você pretende continuar blogando e personalizando seu blogue.

É na área de edição que faremos a personalização do blogue, através da modificação no códigos CSS ou HTML original do modelo de seu blogue. Atenção

Quando terminar de modificar o código do blogue clique no botão VISUALIZAR antes de clicar no botão SALVA MODELO. Isso evita que você salve alterações indesejadas e caso tenho algum erro o sistema informará e o blogue não carregará no navegador. Veja a imagem:

É recomendado que você faça um teste em um blogue de teste, caso não tenha certeza.

Linque “Leia Mais” ou “Continue lendo...” Agora você já sabe onde editar o código-fonte do seu blogue, então vamos personalizar. O código “Leia Mais” para Blogger/Blogspot é bem útil para suas postagens maiores, cria resumo e deixar o visual do blogue mais dinâmico. Antes de começar marque a caixinha Expandir modelo de widgets. 1º- Primeiro vamos adicionar o código abaixo antes da tag . Localize a tag , que geralmente está localizada acima da tag , e cole o código abaixo: <style> span.fullpost {display:inline;} span.fullpost {display:none;} Ficará igual na imagem abaixo:

Clique em Visualizar e, se não aparecer mensagem de erro, continue. Ainda não deverá aparecer o linque Leia mais no seu blogue. Dic@: Salve seu modelo de blogue (templete) antes de começar. Clique em Baixar modelo completo e salve uma cópia no seu computador, caso algo saia errado ou você queira seu modelo antigo é só fazer um upload clicando no botão Arquivo e depois no botão Fazer Upload. 2º- Agora localize a seguinte linha no código de seu blogue: