10 de abr de 2013

Leia mais nas postagens com miniatura de imagens




Este código está adaptado para o novo Blogger, 2013

Para ter um template com uma estrutura de layout melhor sou adepta dessa maneira de apresentar a página inicial do blog. Fica harmonioso, organizado, facilita a navegação para o leitor e ainda economiza espaço no template. Depois de mais uma mudança no Blogger, a maneira de implementar este hack deu uma modificada, mas é possível, com um pouquinho mais de ateção implementa-la perfeitamente.


Vá até o modelo de seu blog, clique em "Editar HTML"






Procure por <b:skin>...</b:skin> que está logo acima no código.








Abaixo dele, cole o código abaixo

<style>
/*Botão leia mais-----------------------------------------------------------*/
#showlink{
float: right;
background: #C0C0C0;
margin: 6px 3px 8px 0;
padding:4px 3px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
#showlink a:hover{
background: #fff;
padding:4px 3px;
font-size: 16px;
}

#showlink a {
color: #000;
}
</style>


Agora  novamente, depois de


<b:skin>...</b:skin>



Copie um dos códigos dos modelos abaixo e cole depois dele.



Modelo 1










<b:if cond='data:blog.pageType != "item"'><style>
.date-header {display:none;}
.post-footer{display:none}
</style></b:if>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 460;
summary_img = 460;
img_thumb_height = 280;
img_thumb_width = 280;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }
strx = s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>



Modelo 2








<b:if cond='data:blog.pageType != "item"'><style>
.date-header {display:none;}
.post-footer{display:none}
</style></b:if>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 460;
summary_img = 460;
img_thumb_height = 300;
img_thumb_width = 560;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }
strx = s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>



Modelo 3







<b:if cond='data:blog.pageType != "item"'><style>
.date-header {display:none;}
.post-footer{display:none}
</style></b:if>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 460;
summary_img = 460;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }
strx = s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>



Modelo 4







<b:if cond='data:blog.pageType != "item"'><style>
.date-header {display:none;}
.post-footer{display:none}
</style></b:if>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 280;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }
strx = s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:right; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>

Salve.



Agora procure pelo seguinte trecho:

<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>




Troque-o então por:


<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'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<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>
Salve e está pronto

42 comentários:

  1. Obrigada ... muito obrigada! Suas dicas estão sendo super válidas, principalmente para leigos como eu!!!

    Abraço!!!
    twitter.com/valeriaberriel

    ResponderExcluir
  2. lixo naum ajudou em nada ! tudo errado

    ResponderExcluir
    Respostas
    1. Você é uma pessoa de extremo mau gosto, péssimo, um ser pequeno, insignificantemente, um lixo, a escoria.Tudo que o mundo não precisa e sabe por que você não entendeu nada????
      Por que você é burro, simplesmente um burro em tudo...

      Excluir
  3. Powerguido, lixo é você que provavelmente também não serve para nada.

    ResponderExcluir
  4. meu irmao foi uma das melhores dicas que ja consegui .. continue fazendo esse otimo trabalho ...

    ResponderExcluir
  5. Muiito obrigada mesmo, eu estava procurando a dias um jeito de deixar meu blog com aparência mais limpa.
    Deu super certo.
    Sucesso e Feliz Natal.
    Abraços

    ResponderExcluir
  6. Nossa muito obrigado, eu não estava achando um código que prestasse no meu blogger. Eu coloquei um template pronto e nada funcionava.

    Bjkas. Se quiser conferir.
    http://companisbooks.blospot.com/

    =)

    ResponderExcluir
  7. PARABEEEEEEEEEEEEEEEEEENS agora ke deu certo aqui sei onde achar coisas boas vlw msmoo PARABENS

    ResponderExcluir
  8. eu ja tinha emplementado em meu outro blog mais n esta funcionando nesse ele n modifica nada

    ResponderExcluir
  9. olá gostaria de saber como faço para colocar a miniatira da imagem em cima e o resumo do post em baixo da imagem

    ResponderExcluir
  10. Elke di Barros, boa noite e obrigado por tudo, quando comecei nesse mundo dos blogs não sabia nada e aqui eu aprendi muito, muito mesmo.
    felicidades pra senhora e toda sua família.
    Feliz natal.

    ResponderExcluir
  11. Mano tá dando erro em uma das linhas e não estou conseguindo resolver. Justamente no último procedimento. Pode me ajudar?

    Quando substituo aparece isto como erro:
    Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 1676, coluna 37: The element type "div" must be terminated by the matching end-tag div


    mimimimiimi snif.

    ResponderExcluir
  12. Orra mano eu consegui :D:D:D:D:D Faltou só a tag de fechamento div no último código ;)

    ResponderExcluir
    Respostas
    1. Verdade, obrigada pela dica, já está consertado. Abraços.

      Excluir
  13. Bom dia ELKE!
    Estas alterações
    sãO VALIDAS PARA O NOVO MODELO EDITOR DE HTML?
    Você está refazendo os outros tutoriais teus daqui, de antes?
    Eles não servem mais (os tutoriais antigos teus)?

    A gente vai ter de refazer sempre do modo novo?
    Parece que é isto que está fazendo, é?

    Ai
    ai
    qtas duvidas!!!!!

    ResponderExcluir
    Respostas
    1. Oi Edilene. São sim. Mudaram a forma de apresentação do código mas o código é o mesmo, prém, é necessário fazer modificações nas minhas tutoriais pois agora os códigos ficam divididos e ocultos. Abraço.

      Excluir
  14. Suas dicas para estilizar os blogs são perfeitas, obrigado, recentemente coloquei em um blog meu esse hack, instalou perfeito, mais os botões de compartilhamento sumiram.. alguma dica? xeiruuuuuuu

    ResponderExcluir
  15. Olá, estou utilizando as dicas, ficou perfeito! Fiquei com uma pequena dúvida: a imagem quando está em outra proporção, fica achatada/esticada na miniatura. É possível fazer um "crop" no centro da imagem, por exemplo?

    ResponderExcluir
  16. Muito bem explicado , ainda bem que tem blogs como o seu para ajudar agente iniciante ;)

    ResponderExcluir
  17. Cara!! Muitíssimo obrigada funcionou!!! Valeu mesmo!!!
    Só uma perguntinha, queria muito que o texto resumido ficasse justificado. Você sabe que alteração no código eu faço?!

    ResponderExcluir
  18. Cara muitooooo obrigada mesmo! funcionou!! Valeu.
    Só uma perguntinha, eu queria muito que o texto do resumo ficasse justificado. Você sabe se tem como eu mudar para ficar assim no código? obrigada!!

    ResponderExcluir
  19. olá gostaria de saber como faço para criar postagens em cada categoria. por axemplo: das categoria .Policia ,politica. Noticia. quero aber como faço para fazer isso..assunto relasionado a policia, quero colocar todas na categoria Policia.. me ajudem por favou

    ResponderExcluir
  20. olá gostaria de saber como faço para criar postagens em cada categoria. por axemplo: das categoria .Policia ,politica. Noticia. quero aber como faço para fazer isso..assunto relasionado a policia, quero colocar todas na categoria Policia.. me ajudem por favou

    ResponderExcluir
  21. Por favor me ajuda! :/ estava todo bem, mas de repente o ler mais saio do blog, e mesmo fazendo todo de novo ele não aparece! me ajuda

    ResponderExcluir
  22. http://idjarrury.blogspot.com.br/search?updated-max=2013-08-01T21%3A26%3A00-07%3A00&max-results=3#PageNo=5

    Queria entender porque meus posts ficaram com essa mensagem na miniatura: ''Normal 0 21 false false false PT-BR X-NONE X-NONE ...''

    Ja tentei algumas coisas que sei mas não resolveu, tem muitos posts assim, poderia me dar uma luz, por favor, obrigado!

    Alias, ta mto show teu post, parabens mesmo!

    ResponderExcluir
  23. Valeu, ajudou muito, o único código q funcionou!!

    ResponderExcluir
  24. Só está mostrando 4 posts na página inicial. O problema maior é que não está mais dando pra ver POSTAGENS MAIS ANTIGAS, se recarregar a página dá pra ver que aparece, mas some rápido e é substituído pelo número 1. Porém, são 5 posts, então era pra aparecer o 1 e o 2, pra poder ver as mais antigas, mas não vai. Me ajude, por favor!

    ResponderExcluir
  25. Cara daria pra mi dizer como que eu faço pra miniatura linka Também ???

    ResponderExcluir
  26. FINALMENTEEEEEEE Busquei em vários sites, tentei, tentei e nada. Muito obrigado pelo Post!!!!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube