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 inicial, evitando 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 inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem, juntamente 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 íntegra 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:
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 = "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-->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 widgets' e procure por:
Apague tudo e substitua por:
<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>
A palavra " Leia Mais" se refere ao texto do link que aparecerá no post, na 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 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:
<span id='showlink'><a expr:href='data:post.url'>
<img src="URL-DA-SUA-IMAGEM" />
<img src='ENDEREÇO-DA-SUA-IMAGEM'/>" 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."
você está em: http://noticiashoje3x.blogspot.com
.ico "EDIHITT"){kind=small}
{if(document.pnctLoadStarted)return;var%20d=document.createElement('div');d.setAttribute('id','pnctPreloader');d.setAttribute('style','position:fixed;top:0;bottom:0;left:0;right:0;z-index:100501;background-color:rgba(255,255,255,.9);padding:20px;text-align:center;font-family:helvetica;font-size:20px;font-weight:bold;');d.innerHTML='%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0...<a%20id="pnctCancelBtn"%20href="#"%20style="float:right;width:24px;height:24px;text-decoration:none;border:1px%20solid%20#ccc;border-radius:5px"><img%20src="//postila.ru/images/window_close.png"%20alt="x"/></a>';document.body.appendChild(d);document.pnctLoadStarted=(new%20Date()).getTime();document.pnctCnclLoad=function(){document.pnctLoadStarted=0;pl=document.getElementById('pnctPreloader');if(pl)pl.parentNode.removeChild(pl)};document.getElementById('pnctCancelBtn').addEventListener('click',function(e){e.preventDefault();document.pnctCnclLoad()});setTimeout(function(){var%20st=document.pnctLoadStarted;if(st>0&&((new%20Date()).getTime()-st>=14000)){document.pnctCnclLoad();alert('%D0%9A+%D1%81%D0%BE%D0%B6%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D1%8E%2C+%D0%BF%D0%BE%D0%B8%D1%81%D0%BA+%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA+%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B5%D0%BD.')}},15000);var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//postila.ru/post.js?ver=1&m=b&rnd='+Math.random()*99999999);document.body.appendChild(e)})());)
Nenhum comentário:
Postar um comentário
Mensagem do formulário de comentário: