sejam bem vindos e voltem sempre aqui!
AAAMORRR

CM





DCM- digital customizando modelos

https://digitalcustomizandomodelos.blogspot.com.br/

Seguidores

MENU

Pesquisar

Saiba Como Se Faz:..."Hack 'Leia Mais' Resumo de Postagem Automático com imagens na Página Inicial "





Saiba Como Se Faz:..."Hack 'Leia Mais' Resumo de Postagem Automático com imagens na Página Inicial "



"A maioria dos blogs  aparecem somente um resumo da postagem na página inicial, onde no final aparece escrito "Leia Mais", ou "Continue Lendo", e quando clicamos aparece a postagem completa."

..." dá uma estetica melhor à pagina inicialevitando que a home fica extensa demais, o que causa, muitas vezes, um certo desconforto na busca dos conteudos em certas páginas."

..."como incluir este 'hack' no seu blog."

"Com estes recurso suas postagens se resumirão automaticamente na sua página inicialA cada postagem, irá aparecer um breve resumo do conteúdo da postagemjuntamente com uma miniatura da imagem utilizada no post."

"Antes de tudo faça um backup do seu Template para evitar transtornos, se algo sair errado."

"ATUALIZAÇÕES:
1)" Muitos leitores relataram dificuldades em hospedar o script para Hack "Leia Mais" em um servidor externo ao Blogger.
Para evitar problemas na dependência com algum servidor externo, é preferível que instale o script diretamente no template, razão pela qual este artigo foi atualizado, com a disponibilização do script na integra para instalçao diretamente no HTML do template."

2)" Atualizei o código do 2º passo, tendo em vista a implementação de Páginas Estáticas no blogger. No código a seguir, o hack "Leia Mais" não se aplicará nas Páginas Estáticas, as postagens só aparecerão resumidas na página inicial,marcadores e arquivos.


1º passo incluir o script no template:


Entre na página 'Layout' → 'editar html'(não precisa clicar em 'expandir modelo de widget') e procure pela tag </head> e cole esse código abaixo ANTES dessa tag:

<!-- JavaScript Resumo do Post -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 400;
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>
<!-- JavaScript Resumo do Post - Fim-->


"Caso tenha dificuldades em copiar o código acima, copie o conteúdo deste arquivo.txt e cole-o ANTES da tag </head>."


"Como este script mostra uma miniatura da imagem do post junto com o resumo do texto, você pode personalizar a quantidade de caracteres que aparecerão no resumo e o tamanho da miniatura da imagem do post, desta forma:

Em summary_noimg → é aqui que você vai indicar a quantidade de caracteres para os resumos se o texto não contiver imagem.

summary_img → Indique o número de caracteres do resumo para o texto que contiver imagens

img_thumb_height → Indique a altura da imagem

img_thumb_width → Indique a largura da imagem"


"Visualize e Salve!"


Agora vamos a 2ª etapa.                                                     

2º passo edição no html:


Volte á pagina de 'layout→ 'Editar html', clique em 'expandir modelos de widgetse procure por:

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


Apague tudo substitua por:

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


"A palavra "Leia Maisse refere ao texto do link que aparecerá no postna sua página inicialé onde o leitor ao clicaré direcionado à página do post completoÉ neste espaço que você coloca o texto que preferir (Ex.: Continue Lendo, Ler Todo Artigo, Leia Mais, Ver Conteúdo etc)."

..." pode também personalizar o link "leia mais", de diversas maneirassubstituindo o texto por uma imagem, ou acrescentar uma imagem ao texto do linkcom uma setapor exemplo."

veja como logo abaixo:                                                                                                                                                                   

3º passo - Personalizando o Link 'Leia Mais':


Para substituir o texto por uma imagem, procure por este trecho:

<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►

E substitua o texto 'Leia Mais' por:

<span id='showlink'><a expr:href='data:post.url'>
<img src="URL-DA-SUA-IMAGEM" />


Para incluir uma imagem ao texto 'Leia Mais', acrescente logo em seguida a ele:

<img src='ENDEREÇO-DA-SUA-IMAGEM'/>


4º passo - aplicar estilos CSS:


Se você quiser, poderá também personalizar estilos para o link 'Leia Mais', para isto, basta incluir o seguinte código logo ACIMA da tag]]></b:skin> :

#showlink {
font-size: 11px; /* escolha o tamanho da fonte para o link */
float: right; /* escolha se quer link flutuando à esquerda ou direita */
margin-right: 30px; /* aplique margens para posicionar link */
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */
font-weight: bold;
}

#showlink a {
color: #ffffff;  /* escolha a cor de seu link */
}

#showlink a:visited {
color: #cccccc;  /* escolha a cor de seu link quando visitado */
}

#showlink a:hover {
color: #000000;  /* escolha a cor de seu link quando passa o mouse em cima */
}


"Confira o artigo:Criando estilos para o Hack 'Leia Mais' de postagem resumida e veja como aplicar estilos para os resumos e como personalizar os posts apenas na página inicial."

fonte e créditos:                                                                                               
 http://www.mundodarkness.com/2009/08/postagem-resumida-na-pagina-inicial_12.html#ixzz0xMUCiJJz                                                                       




http://customizandomodelos.blogspot.com

0 comentários:

Postar um comentário


Mensagem do formulário de comentário:

Postagens populares

 
|http://customizandomodelos6.blogspot.com|