Como criar posts expansíveis no Blogger sem javascript

Compartilhar

Aprenda como criar posts que apresentam um resumo do post na página principal do blog e mostram o conteúdo completo em uma página separada c...

Aprenda como criar posts que apresentam um resumo do post na página principal do blog e mostram o conteúdo completo em uma página separada clicando em um link tipo: "Leia mais...". Dica para o Blogger. Primeiramente é necessário fazer backup de seu template pois vão ser necessárias pequenas alterações e se algo der errado você terá como recuperar o estado original do seu blog.

Vá em Layout >> Clique em Editar HTML e depois em Baixar Modelo Completo para salvar o seu template.

Agora que a brincadeira começa:

Ainda em Editar HTML marque a opção Expandir modelos de widgets e espere até seu template ser totalmente expandido. Depois procure esta linha de código:

<div class="'post-body'">

E logo em seguida coloque (cole) as seguinte linhas de código.

<!-- Inicio do Codigo -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- Fim do Codigo -->

em seguida busque essa linha de código, deve estar logo em seguida ao código que você postou no passo anterior:

<p><data:post.body/></p>

E coloque mais estas linha imediatamente após:

<!-- Inicio do Codigo -->
<a expr:href='data:post.url'>Clique para ler mais...</a>
</b:if>
<!-- Fim do Codigo -->

No final, esse trecho de código deve estar parecido com isto:

<div class='post-body'>
<!-- Inicio do Codigo -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- Fim do Codigo -->

<p><data:post.body/></p>
<!-- Inicio do Codigo -->
<a expr:href='data:post.url'>Clique para ler mais...</a>
</b:if>
<!-- Fim do Codigo -->

<div style='clear: both;'/> <!-- clear for photos floats --></div>

Sendo que a parte em preto é o que já deveria estar no template e em verde são as linhas de código inseridas.

O que você deverá fazer quando editar seu post:

Você deverá colocar o resumo (que aparecerá na página principal do blog. O resto do post deverá ficar entre as tags:
<span class="fullpost">
e
</span>

Assim seu post terá a seguinte estrutura:

Digite seu resumo aqui.
<span class="fullpost">
Digite o resto do post aqui.
</span>

Qualquer dúvida basta comentar.


Traduzido de Blogger Tips and Tricks.

Comentários

BLOGGER: 17
  1. cara tu resolveu meu problema.
    valeu!!!

    ResponderExcluir
  2. Fiz tudo como vocÊ disse, mas da o erro:

    "Mais de um item encontrado com o id: LinkList1. Os IDs de itens devem ser únicos e exclusivos."

    ResponderExcluir
  3. Não consigo aplicar isso para Post já existentes... só funciona nos novos Posts... Se alguém souber como fazer isso funcionar para os demais, por favor me avise...

    ResponderExcluir
  4. João Carlos. Infelizmente você terá que colocar as tags:
    < span class="fullpost">
    e
    < /span>

    manualmente nos post antigos. Assim, o que estiver entre as tags sumirá e o que tiver antes será mostrado na página principal. ;-D

    ResponderExcluir
  5. estou com problema... quando faço tudo,e crio uma no postagem ñ aparece a postagem... como eu faço?

    ResponderExcluir
  6. este codigo primeiro para rocurar isso não tem aqui o.O

    ResponderExcluir
  7. Só funciona na capa do blog, é possível fazer isso dentro das próprias páginas de cada post?

    http://muitolegalblog.blogspot.com

    ResponderExcluir
  8. Como assim? Você quer que, ao clicar no título do post na página principal, o post venha em uma única página ainda como um resumo e depois faça o quê?

    ResponderExcluir
  9. funcionou perfeitamente,pena que o link clik para ler mais aparece em todas as postagens,não tem como esse link aparecer só nas postagens grandes??

    ResponderExcluir
  10. Estou vendo se há outra forma simples de fazer isso. Mas a forma mais rápida é fazer manualmente.
    Tira-se o link Click para ler mais do template (aí ele não aparece para nenhum post).
    E quando houver mais para se ler coloca-se o código HTML no final da mensagem (com o endereço do título do post).
    Se você achar que dá para fazer assim e tiver dificuldade eu te mostro como fazer.

    ResponderExcluir
  11. cara
    alguns dos meus posts ficam com o continue lendo só no final dele.
    Eu coloco:

    O que vai aparecer na página inicial aqui
    < span class="fullpost" > (sem espaços)
    O resto que vai aparecer só depois de clicar o botão "Continue Lendo".
    < /span > (sem espaços)

    aí na página inicial fica:

    O que vai aparecer na página inicial aqui
    O resto que vai aparecer só depois de clicar o botão "Continue Lendo".
    Clique aqui pra continuar lendo...q saco eu não sei o q eu faço mais.
    e o pior é q são vários tutoriais diferentes mandando colocar códigos diferentes e coisas diferentes fora alguns códigos que não tem eu alguns posts, por exemplo, o meu tem:
    < div class='post-body entry-content' > (sem espaços)
    em vez de só
    < div class='post-body' > (sem espaços)
    e tem
    < data:post.body/ > (sem espaços)
    em vez de
    < p > < data:post.body/ > < /p > (sem espaços)

    ajuda!

    ResponderExcluir
  12. Rapaz, vc foi uma luz no fim do túnel! Tentei vários hacks, mas nenhum estava dando certo com meu template.
    Com sua dica, deu certo de primeira!
    Valeu mesmo!
    Parabéns pelo blog!

    ResponderExcluir
  13. Olha Gostei muito do post e tentei instalá-lo gostei do resultado mas tem um pequeno problema não quero que o leia mais.. apareça em todas as postagens.. queria ele apenas nas postagens extensas do meu blog teria como vc me explicar como eu faço isso.. é pq esse java script q to usando eu quero trocá-lo pois está impedindo a galeria animada de funcionar por isso gostaria muito q esse seu hack funcionasse pra minha galeria funcionar tbm.. dai seria uma dupla ajuda q vc estaria me dando.. obrigado este blog está realmente bem feito..

    ResponderExcluir
  14. Meu amigo estou com duvida em relação ao resumo do post faço tudo mais não aparecer o resumo e sim o post todo e em baixo a palavra leia mais.

    o que eu estou errado
    Obrigada por sua gentileza
    Abraços
    Deusa

    ResponderExcluir
  15. Olha, vou tentar.Se eu conseguir é pq a dica é boa mesmo..rs sou quase analfabyte. Te dou retorno. Valeu.

    ResponderExcluir
Comente aqui...

$show=mobile

Nuvem de Categorias

Nome

#existepesquisanobrasil,2,Abelha,3,Acessibilidade,25,Acessórios,2,Acidente,52,Acústica,16,Adestramento,5,Administração,45,Aerodinâmica,4,Aeronáutica,9,África,7,Agência Bori,1,Agência Brasil,25,Agência FAPESP,5,Agência Fiocruz,6,Agência Porvir,1,Agência Senado,2,Agência USP,5,Agnotologia,1,Agricultura,7,Agropecuária,4,AirBNB,1,Albert Einstein,1,Alcoolismo,9,Alemanha,10,Alemão,4,Alerta,2,Algoritmo,8,Alimento,1,Alzheimer,4,Amazon,5,Amazônia,5,América Latina,1,Análise Combinatória,1,Análise de Texto,2,Anatomia,8,Android,3,Angola,1,Animação,52,Animais de Estimação,6,Animal,2,Antropologia,14,Apicultura,9,App,9,Apple,5,Apresentação,4,aquário,1,Argentina,4,Armamento,1,Arqueologia,6,arquitetura,33,Arte,172,Astrobiologia,3,Astrofísica,4,Astronomia,34,Ativismo,34,Áudio,3,Audio FX,2,Áustria,1,Autismo,2,Auto-ajuda,10,Automobilismo,16,Automóvel,22,aventura,3,Aviação,5,Aviônica,8,Bahia,2,Balonismo,3,Banco Central,1,Banco de Dados,5,Beber e Dirigir,1,biblioteconomia,6,Bicicleta,1,Biografia,18,Biologia,174,Biologia Marinha,15,bioquímica,7,Biotecnologia,25,Bitcoin,2,Blog,29,Blogger,33,Boato,6,Bomba,1,Botânica,6,BRASA,1,BRASA Leads,1,Brasil,41,Brasília,16,BRIC,1,Browser,11,Bugs,3,CAD,3,Calor,2,Caltech,1,Câmera lenta,1,Campanha,47,Canadá,1,cardiologia,16,Carnaval,2,carreira,3,Cartografia,3,Casemods,1,Caso Isabella Nardoni,1,Caso Snowden,1,Ceará,1,Celebridades,6,celular,24,Células-Tronco,5,Cérebro,2,Charge,22,ChatGPT,2,China,22,Cibercultura,3,Ciclovia,1,Cidadania,40,Ciência,220,Cinema,69,Climatologia,3,Clip,1,Cliparts,1,Cloud computing,4,Coaching,12,Comédia,2,competência,2,Complemento de dois,1,Comportamento,273,Computação,87,Computação em grade,5,Computação forense,3,Computação Gráfica,140,Computação Móvel,1,Computação Quântica,1,Comunicação e Marketing,151,Concurso,2,Concurso Cultural de Natal,1,Concursos Público,2,Concursos Públicos,4,Conectômica,1,Conferência,1,Congresso em Foco,1,Conspiração,2,Consumidor,7,Consumismo,3,contabilidade,2,Contos,55,Copa do Mundo,26,Cordel,3,Coreia do Norte,1,Coreia do Sul,1,Corpo,2,Coruja,1,cosmética,3,Cosmologia,21,Covid-19,99,Crash Course,1,Criança,1,Criatividade,4,Crime,49,Crime Digital,9,crise,11,crise econômica,8,Croácia,1,crônica,6,crônicas,5,Cronologia,1,CSS,3,Cuba,4,Culinária,8,Cultura,18,Curiosidades,113,custos fixo,1,custos variáveis,1,Dale Dougherty,2,Dança,6,DAO,1,Darwin,12,Davos,1,Debate,3,Decoração,1,demência,1,Demografia,3,Denúncia,12,Dermatologia,6,Desastre Natural,14,Descoberta,2,Desenho instrucional,19,Desenvolvimento de jogos,17,Desenvolvimento Pessoal,1,Design,33,Design Instrucional,18,Destaque,9,Dia das Mães,1,Dia do professor,1,diabetes,6,Dicas,66,Didática,1,Dieta,4,Dinamarca,1,diplomacia,3,Direito,188,Direito Eleitoral,2,Direito Internacional,30,Direito Militar,1,Direito Trabalhista,1,Direito Tributário,2,Direitos Autorais,4,Direitos Humanos,39,Disney,8,Distrito Federal,4,Documentário,71,Doutorado,1,download,3,Drogas,7,Drone,3,Dubai,1,e-Book,2,e-governo,2,EBC,1,Ecologia,89,Economia,118,Editoração Eletrônica,1,Educação,415,Educação a Distância,188,Educação Corporativa,6,educação física,19,Educação sexual,6,Efeitos Sonoros,4,Egiptologia,2,Eleições,30,Eleições 2014,12,Eleições 2018,5,Eleições 2020,2,Eleições 2022,1,Eletricidade,10,eletrônica,4,Elon Musk,1,Em Operários,1,Embrapa,4,empreendedorismo,7,enciclopédia,1,endocrinologia,6,Enem,3,Energia,17,Energia Alternativa,18,Energia Nuclear,12,Enfermagem,1,Engenharia,68,Engenharia Agrícola,1,Engenharia Civil,6,Engenharia de materiais,17,Engenharia de Software,5,Engenharia Genética,32,Engenharia Mecânica,2,Enretenimento,1,Ensino a Distância,11,Ensino Superior,5,Entomologia,7,Entretenimento,46,Entrevista,91,Entrevista.,1,Epidemiologia,70,Epistemologia,1,Equador,1,Escândalo,6,Escritório,1,ESMPU,1,Espaço,72,Espanha,1,Espanhol,2,Espeleologia,1,Espetáculo,8,Espionagem,20,Esporte,43,Estação,1,Estágio,2,Estatísticas,40,estrutura de dados,1,Ética,32,EUA,20,Europa,2,Evento,59,Evolução,5,Exercícios físicos,2,Exobiologia,3,experiência,43,fábulas,3,Facebook,20,Família,1,Farmacologia,24,Favo,1,Feminismo,1,Férias,1,Ferramentas,14,FIFA,2,Filantropia,4,Filmes,20,Filosofia,50,Finep,2,Finlândia,3,Fintech,1,Firefox,1,Física,119,Física Quântica,4,Fisiologia,10,Fisioterapia,6,Flagrante,2,Flamengo,1,Folclore,3,Fome,1,Fomento,1,Fonética,1,Fonoaudiologia,7,Fotografia,46,Fotos em 360 graus,6,França,10,Francês,4,Frase,3,Fraude,5,Freeware,75,Futebol,38,Futurologia,94,gadget,87,gadgets,1,Gafe,2,Gamificação,7,Gastroenterologia,5,Gastronomia,2,Geek,2,Genética,45,Geofísica,1,Geografia,57,Geologia,11,Geometria,6,geopolítica,21,Gerenciamento do Tempo,2,Geriatria,12,Gestão de Competências,3,Gestão de Configuração,2,Gestão de Pessoas,11,Gestão de Projetos,23,Gestão do conhecimento,7,Ginecologia,3,Glass,1,Golpe de Estado,1,Google,81,Governo,4,GPS,1,Gradiente,1,gramática,15,Gravidez,1,Grécia,1,Grécia Antiga,2,Guerra,42,Guerra Civil,2,Guinness,1,H2,2,Haiti,3,hardware,38,Henry Ford,1,História,216,HIV,1,Hololens,2,homenagem,46,Horologia,1,HPV,1,HTML,6,Humor,213,Humor Negro,9,IBGE,3,IBM,4,ICIJ,2,Idioma,57,IESB,2,IHC,8,ilo,29,ilusão,36,ilusionismo,5,Imagem 3D,16,Imagens,7,Imagine Cup,1,Império Romano,8,Imprensa,34,Impressora 3D,22,Imunologia,8,Incêndio,2,Inclusão digital,8,Índia,4,Índios,1,Infectologia,36,Infográfico,57,Informática,38,Inglaterra,4,Inglês,26,Inovação,205,Inspiração,1,Inteligência Artificial,160,intercâmbio,1,Interface,205,Interfaces Hápticas,24,Internacional,23,Internacionalização da Amazônia,3,Internet,166,Internet das Coisas,2,Inundação,2,Invenção,20,Inventos,6,iPad,1,IPEA,1,iphone,3,Irã,3,Iraque,1,Israel,7,Itália,2,Japão,5,Java,2,Java.,2,jogos,11,Jogos de Tabuleiro,5,Jogos educativos,19,Jogos Olímpicos,10,Jornalismo,72,José Saramago,1,Justiça,4,Ken Robinson,1,Kinect,10,Le Monde Diplomatique Brasil,9,Le Monde Diplomatique Brasil,1,Letras,2,Lexicografia,5,Liderança,4,Life Hacking,20,línguas estrangeiras,3,Linguística,11,Literatura,58,Livro,72,Lógica,26,Logística,4,Loterias,4,Lua,1,Maçonaria,4,Malásia,2,Malvinas,2,Malware,1,Mapa,96,Mário Sérgio Conti,1,Marte,4,Mastologia,1,Matemática,84,Matemática Financeira,1,maternidade,1,MEC,1,Mecânica,8,Mecânica dos Fluidos,2,Mecatrônica,47,Medalha Fields,1,Medicina,564,Medicina Esportiva,2,Medicina Veterinária,4,Meio Ambiente,130,Mel,1,melanoma,1,Memória,5,memorização,4,Mente,4,Mercado de Trabalho,85,mercosul,1,Mestrado,4,Metaverso,2,meteorologia,12,Metodologia Científica,58,México,1,Microbiologia,4,Microsoft,16,Mídia Social,60,Militar,16,Mineralogia,1,Mistério,3,MIT,15,Mitologia,2,Mobilidade,1,Mobilidade Urbana,9,Moçambique,1,Moda,1,MonaVie,1,Montanhismo,1,Moodle,7,Mossad,1,Motivação,1,Movimento Maker,3,MSF,1,Mudança Climática,30,Mulher,4,Multimídia,14,museu,16,Música,90,MVC,1,Nanotecnologia,36,Nasa,19,Natação,2,Natal,17,Natureza,2,Nefrologia,1,Negócios,31,Netflix,1,Neurociência,96,Neurologia,80,Nicolelis,1,Nordeste,2,Noruega,2,notícias,8,Novidades,18,Novo Enem,2,Números,2,Nutrição,72,Obama,1,Obesidade,11,Observatório da Imprensa,27,Obstetrícia,4,OCDE,1,Oceanografia,7,odontologia,10,Offshore Leaks,2,oftalmologia,11,Olimpíadas,9,oncologia,50,ONU,10,OpenAI,1,Opinião,107,Óptica,17,Oracle,1,Oriente Médio,5,Orkut,2,Ornitologia,1,ortografia,3,Ortopedia,4,Ótica,9,Otorrinolaringologia,2,Oxfam,3,Pacifismo,1,Paginadores,1,paleontologia,4,Palestina,1,Paquistão,1,Pará,2,Paraguai,2,parkinson,2,Passeio virtual,1,Patinação,1,Paulo Freire,1,Pedagogia,7,Pediatria,6,Pensamentos,3,performance,3,Periférico,1,Pesca,2,Pesquisa,260,Petição,1,Petrobrás,10,Petróleo,13,Photoshop,5,Pirataria,7,planilha de custo,1,Playstation 3,2,Plebiscito,3,Pneumologia,1,Podcast,7,Poesia,29,Política,322,Polônia,1,Portugal,9,português,20,Pós-graduação,2,Pré-sal,5,Prêmio Nobel,7,primatologia,1,Primeira Guerra Mundial,2,privacidade,25,produtividade,8,professor Hamilton Alves,2,Programa Gratuito,4,Programação,59,Projeção Mapeada,1,Projeto Truco,2,Promoção,1,Propaganda,5,Psicanálise,1,Psicologia,283,Psicologia Animal,25,Psiquiatria,17,Pública,14,publicidade,19,Publieditorial,6,PUC Minas,1,Quadrinhos,11,Quads,5,Qualidade,3,Qualidade de Vida,11,química,34,REA,2,realidade aumentada,47,realidade diminuída,2,Realidade Misturada,5,Realidade Virtual,50,Reconhecimento de imagem,12,Reconhecimento de voz,3,Recorde,1,Recoverit,1,Recuperar vídeos,1,Redação,1,redes,12,Referência,5,Referendo,1,Reforma Política,3,Reino Unido,2,Relacionamento,2,Relações Internacionais,41,Religião,43,Responsabilidade Social,4,Retrospectiva,1,Review,15,Rio 2016,6,Rio de Janeiro,3,Rio Grande do Norte,1,Rio Grande do Sul,1,Robert Oppenheimer,3,Robô,49,robótica,52,Roda Viva,49,Roma,6,roteiro,1,RSA,1,RTP,1,Rússia,6,Samsung,1,Sanitarismo,5,Santa Catarina,1,São Paulo,5,Saúde,621,Savant,1,Segunda Guerra Mundial,26,Segurança,128,Segurança da Informação,69,Seleção Natural,3,Séries,2,serviço,1,Serviço Online,1,Sexologia,2,sexualidade,5,Show,7,SIGGRAPH,1,Simulação,36,Singularity University,1,Síria,3,Sismologia,2,Sistema operacional,4,Sistemas de Numeração,1,Sites de Busca,22,Sociedade,5,Sociologia,54,Software,34,Software Livre,24,Sol,2,Sono,4,Sony,3,SOPA,2,Star Wars,1,Startup,2,Steve Cutts,1,Steve Jobs,1,Suécia,3,Sugestão de presentes,67,Sun,1,supercomputadores,2,Sustentabilidade,5,Tabagismo,6,Taiwan,1,Talento precoce,1,Taxas Equivalentes,1,Taxidermia,1,Teatro,26,Técnicas de Estudo,3,Tecnologia,599,Tecnologia da Informação,29,TED,446,TED-Ed,48,TedMed,2,TEDx,5,TEDx Rio+20,1,TEDxAmazônia,1,TEDxAsaSul,1,Telefonia,61,Televisão,43,Temas,1,Tempo,2,Tendências,13,Teologia,6,teoria das supercordas,1,Teoria dos Jogos,1,Terremoto,9,Terrorismo,15,Tesla,1,Testes,17,ticker,2,TikTok,1,Tipologia,8,Tomada de Decisão,1,tradução,5,Trânsito,12,transporte,59,Tributo,3,Trigonometria,1,Tubarão,2,Tunísia,1,Turismo,28,Tutorial,23,Twitter,10,Uber,7,Ucrânia,11,UFC,1,UFES,1,UFG,2,UFMG,1,ufologia,5,UFRJ,3,UFSC,1,UNB,1,UNESCO,1,Unicamp,4,UNIFESP,1,UNIP,1,universidade,6,Universidade Corporativa,1,Universidade da Califórnica,1,Universidade da Geórgia,1,Universidade da Pensilvânia,1,Universidade de Brasília,1,Universidade de Cambridge,2,Universidade de Chicago,1,Universidade de Columbia,1,Universidade de Michigan,1,Universidade de Princeton,1,Universidade de Rochester,1,Universidade de Washington,3,University College London,1,Urbanismo,26,Urologia,2,URSS,1,User Experience,1,USP,11,Utilidade Pública,4,Utilitário,3,Vale,1,Vaticano,1,Veículo Autônomo,9,Venezuela,1,Ventriloquismo,2,Verão,1,vestibular,3,Vestimenta,1,Vida Digital,7,Vida Moderna,18,Vida Selvagem,10,Videogame,119,Vídeos,988,Vídeos 360,1,Vietnã,1,Violência,5,Vírus,18,Visão Computacional,10,Vôlei,1,Vulcanologia,8,Watergate Política,1,WCIT 2016,2,WCIT 2017,1,Web,1,Web 2.0,29,Web Application,160,Web Semântica,2,Web Seminar,1,webdesign,13,Webinar,2,widget,2,WikiLeaks,37,Wikipedia,4,Windows,5,Xadrez,2,YouTube,6,Zika,1,Zimbábue,1,Zoologia,59,
ltr
item
Brasil Acadêmico: Como criar posts expansíveis no Blogger sem javascript
Como criar posts expansíveis no Blogger sem javascript
Brasil Acadêmico
http://blog.brasilacademico.com/2008/08/como-criar-posts-expansveis-no-blogger.html
http://blog.brasilacademico.com/
http://blog.brasilacademico.com/
http://blog.brasilacademico.com/2008/08/como-criar-posts-expansveis-no-blogger.html
true
3049085869098582068
UTF-8
Todos os posts carregados Nenhum post encontrado Ver todos Saiba mais Responder Cancelar resposta Apagar Por Início Páginas POSTS Ver todos Especialmente para você Categoria Arquivo Busca Todos os posts Nenhum post coincide com sua busca Início Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez Agora 1 minuto atrás $$1$$ minutos atrás 1 hora atrás $$1$$ horas atrás Ontem $$1$$ dias atrás $$1$$ semanas atrás Mais de 5 semanas atrás Seguidores Seguir Conteúdo PREMIUM fechado Passo 1: Compartilhar com a rede social Passo 2: Clique no link da sua rede social Copiar todo código Selecionar todo código Todos os código copiados para a memória Não posso copiar o código / textos, favor teclar [CTRL]+[C] (ou CMD+C no Mac) para copiar Tabela de Conteúdo