Carregando...

Pesquisar

Resumo de posts com miniatura de imagens - "Hack"... "Leia mais"

. .
Resumo de posts com miniatura de imagens - "Hack"... "Leia mais" 


 Veja modelo aplicado clicando ►aqui◄


O presente tutorial, visa, dar orientação, de como é realizado o passo - a - passo, pois, cada pessoa, pode alterar, como melhor lhe convir, as dimensões, cores, alterar os caracteres etc.


Aqui, nesse tutorial,  é tipo um modelo "padrão"
use a sua criatividade!! !

"Hack"

 "Leia mais" 

– Resumo de posts com miniatura de imagens


O "hack" de resumo de postagens, é muito conhecido , simplesmente, como  “Leia mais”,   o que confunde muito as pessoas , quando     querem      saber como se faz.

Então,
temos, popularmente, assim, chamado:
“Leia mais” = "resumo de postagens"

  
A função do "hack" ..."Leia mais" :
Sua  função  vem a ser de "resumir 
automaticamente" 
todas as postagens do seu blog.

Esse  "hack" resume tudo, 
desde os  mais antigos posts
inclusive os  mais recentes.

O "hack" mostra  o  " resumo do post", e,  mostra  também, 01 (huma ) miniatura com a primeira imagem contida  dentro da "postagem" ="post" .

Quando a postagem , não exibir imagens?
Não será exibida miniatura da imagem, pois  a postagem não contivem  imagem, e sim somente texto!
 

Bom,vamos ao tutorial,
propriamente dito :
. Logado no painel blogger;
.no  código "html", de seu template, 
e no 
css do template.

. sendo que:
      Antes de começar as alterações ,
      é necessário que  se faça backup do seu template. 
Se der algo errado, ou o resultado  
não ficar como você pensa, 
haverá a oportunidade
de voltar tudo, como era   seu template anterior.

Prosseguindo:

Após feito  login na sua conta blogger;
Clicar em  Design >> Editar Html;
      depois:
Pressione as teclas CTRL+F 
para abrir 
a busca do navegador;
 
Procure pela tag:


]]></b:skin>
 
e ,
cole depois de

]]></b:skin>

código a seguir:



As alterações:
  • summary_noimg = 450; o valor 450 equivale ao número de caracteres que serão mostrados se o post não tiver imagens;
  • summary_img = 400; o valor 400 equivale ao número de caracteres que serão exibidos caso o post tenha imagens;
  • img_thumb_height = 100; o valor 100 equivale a altura da miniatura;
    img_thumb_width = 100; o valor 100 equivale a largura da miniatura;

Os valores numéricos, que estão citados, acima,  poderão ser modificados,  por valores que você preferir.

Após feitas  as alterações:
...visualize,
...se não houver nenhum erro;
salve!

...

Inserindo o "link":  "Leia mais"

Continuando na página "editar html". 

...abra a busca do navegador de novo = (CTRL+F) e encontre  o seguinte código:






Apague o código citado, acima,  e 
cole, o seguinte código:

  


Visualize,      

Salve! 


 Obs.: "atenção"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


...Nos templates do novo blogger,
você vai encontrar é este trecho:




ou um trecho assim:


 <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>





 o qual, será substituído por:




Observação:
Este "hack" coloca resumo das postagens em
                                                                                         seu blog automaticamente e
reduz as imagens dos posts. 
Mas atenção, ele invalida o
"  Leia mais"   (jump break) nativo do Blogger.



Agora:

Em seguida,


procure por:

<b:includable id='nextprev'>

e, ao encontrá-lo,


cole 
depois dele
o seguinte código:

<div style='clear: both;'/>

visualize

estando tudo certinho,  
salve!



...



"Leia mais"      ou    “Continue Lendo”
se refere ao "link" 
que dará acesso ao post completo.  


No momento em que uma pessoa,  clicar nessa palavra;
"leia mais" ou "continue lendo" 
será direcionado 
ao artigo completo. 


Pode usar qualquer frase , palavra, no lugar de "conrinue lendo", ou "leia mais". 
Pode-se usar, no lugar das frases e / ou palavras ditas acima, usar uma imagem!


Como também, pode-se  anexar  "uma imagem"
ao lado da palavra e/ou frase, ou adicionar  um "botão CSS"!!



Visualize,

estando  tudo certo,

salve!
 
 Daí, para frente, todas as postagens ,de seu blog 
 estarão no estilo de " resumo automático".



Nota:
É importante que se saiba, de que, 
o "hack", aqui explicado, nessa postagem,  
não interfere nas páginas estáticas do blog.


 
 
 
  Leia mais em: saibamaisaquiblogspot
. .

Clique aqui para comentários 0 comentários:

Mensagem do formulário de comentário:
!
Deixar o seu comentário

Antes de comentar pense no que vai dizer.

Lembre-se que todo o mundo vai ler o seu comentário.

Pode utilizar alguns tags HTML,
"...não permite-se comentários anônimos."
"A moderação de comentários foi activada. Todos os comentários têm de ser aprovados ."

Obrigado por seus comentários

Postagem em destaque

um logotipo é essencial se você quer crescer seu blog?

Porque um logotipo é essencial se você quer crescer seu blog Ao executar um blog é divertido e emocionante, em última anális...

"ISTO É VIRTUAL?"




"ISTO É VIRTUAL?"

"Entro apressada e com muita fome na confeitaria. Escolho uma mesa bem afastada do movimento, pois quero aproveitar a folga para comer e passar um e-mail urgente para meu editor.

Peço uma porção de fritas, um sanduíche de rosbife e um suco de laranja. Abro o laptop.

Levo um susto com aquela voz baixinha atrás de mim.

— Tia, dá um trocado?

— Não tenho, menino.

— Só uma moedinha para comprar um pão.

— Está bem, compro um para você.

Minha caixa de entrada está lotada de e-mails.

Fico distraída vendo as poesias, as formatações lindas. Ah! Essa música me leva a Londres.

— Tia, pede para colocar margarina e queijo também.

Percebo que o menino tinha ficado ali.

— Ok, vou pedir, mas depois me deixa trabalhar. Estou ocupadíssima.

Chega minha refeição e junto com ela meu constrangimento.

Faço o pedido do guri, e o garçom me pergunta se quero que mande o garoto “ir à luta”. Meus resquícios de consciência me impedem de dizer sim.

Digo que está tudo bem, que o deixe ficar e traga o pedido do menino.

— Tia, você tem internet?

— Tenho sim, essencial ao mundo de hoje.

— O que é internet?

— É um local no computador, onde podemos ver e ouvir muitas coisas, notícias, músicas, conhecer pessoas, ler, escrever, sonhar. Tem de tudo no mundo virtual.

— E o que é virtual?

Resolvo dar uma explicação simplificada, na certeza de que ele pouco vai entender e vai me liberar para comer minha deliciosa refeição, sem culpas.

— Virtual é um local que imaginamos, algo que não podemos pegar, tocar. É lá que criamos um monte de coisas que gostaríamos de fazer, criamos nossas fantasias, transformamos o mundo em quase como queríamos que ele fosse.

— Legal isso. Adoro!

— Menino, você entendeu o que é virtual?

— Sim, também vivo neste mundo virtual.

— Nossa! Você tem computador?

— Não, mas meu mundo também é desse jeito... virtual. Minha mãe trabalha, fica o dia todo fora, só chega muito tarde, quase não a vejo.

Eu fico cuidando do meu irmão pequeno que chora de fome e eu dou água para ele imaginar que é sopa. Minha irmã mais velha sai todo dia, diz que vai vender o corpo, mas não entendo pois ela sempre volta com o corpo.

Meu pai está na cadeia há muito tempo, mas sempre imagino nossa família toda junta em casa, muita comida, muitos brinquedos, ceia de Natal, e eu indo ao colégio para virar médico um dia.

Isso é virtual, não é tia?"

(Rosa Pena)

...
Virtual é um local que imaginamos, algo que não podemos pegar, tocar. É lá que criamos um monte de coisas que gostaríamos de fazer, criamos nossas fantasias, transformamos o mundo em quase como queríamos que ele fosse"

Arquivo