Resumo de posts automático com imagem
segunda-feira, 3 de janeiro de 2011
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 -->Caso tenha dificuldades em copiar o código acima, copie o conteúdo deste arquivo.txt e cole-o ANTES da tag </head>.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
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-->
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.Visualize e Salve!
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
Agora vamos a 2ª etapa.
2º passo - edição no html
Volte á pagina de 'layout' → 'Editar html', clique em 'expandir modelos de widgets' e procure por:
<data:post.body/>Apague tudo e substitua por:
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
A palavra "Leia Mais" se refere ao texto do link que aparecerá no post, na sua página inicial, é onde o leitor ao clicar,e 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 Conteudo etc).<div class='post-body entry-content'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if><div style='clear: both;'/> <!-- clear for photos floats --></div>
Você pode também personalizar o link "leia mais", de diversas maneiras,substituindo o texto por uma imagem, ou acrescentar uma imagem ao texto do link, com uma seta, por 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:
Para incluir uma imagem ao texto 'Leia Mais', acrescente logo em seguida a ele:<span id='showlink'><a expr:href='data:post.url'><img src="URL-DA-SUA-IMAGEM" />
<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 */
}
Fonte: Desconhecido
Veja materias relacionadas
9 comentários:
Olá!
Muito bom esse post! Já tinha tentado outros hacks, mas não deram certo. Há alguma maneira de justificar o texto do resumo automático?
Parabéns pelo blog!
Abraços!
Olá! No momento estou apenas te seguindo, mas prometo voltar e comentar em breve suas postagens!Agradeceria se seguisse o meu blog, assim criamos um vínculo que facilite a divulgação de ambos os blogs! passa lá?
http://medicinepractises.blogspot.com/
Boa tarde! Fiz um blog de vendas pela internet, no blogspot. Há muito tempo atrás tinha conta na blogger, e tinha vários blogs, um deles eu fazia layouts e disponibilizava os códigos HTML, e agora estou tomando uma surra porque não lembro como mexe, ainda mais nesse blogspot que é TAO diferente. Gostaria de saber se vc teria como fazer só o código pra mim, pra eu poder aprender, e ir trocando cores, e tal, pq com o código é mais fácil. Já fiz a arte toda, só falta o código mesmo, e não to conseguindo fazer. Se puder comenta lá no meu blog com a resposta. MUITO OBRIGADA!!
opa....gostei do blog...sou estudante de programaçao e fiquei muito interessado no seu blog...vou dar uma bisbilhotada...
ok??
Desculpe estar comentando isso aqui mais será que vc pode ir lá no post de como trocar imagem de fundo do blog e responder uma dúvida que deixei por comentário? Preciso muito, por favor.
Ass: -Gabii-
muitoooo bom... vou tentar colocá-lo no meu blog...
vlw por seguir... Deus te abençoe...
Olá! Sou administrador do blog http://contos-do-senna.blogspot.com e gostaria de saber se existe como justificar o texto dos resumos.
E muito obrigado pela dica. Me ajudou bastante. Até mais!
Muito obrigada pela dica, funcionou no meu blog perfeitamente.
Abraços
http://www.estudanteminimalista.com
Brigadão Jhonny só você pra fazer isso pra nois mesmo
tava doido atrás desse código!
Postar um comentário