Não, este não é outro hack de Resumo do Post. Modifiquei o original e, na minha opinião, insubstituível até o momento, hack criado pelo Ramani do Hackosphere, para "funcionar" melhor com o editor de posts do Blogger Draft.No hack original, Ramani utilizou a tag "span" para a definição dos blocos a serem mostrados ou "escondidos". Apenas modifiquei todas as tags "span" por "div", o que pelos testes que realizei, faz com que o hack funcione melhor com o editor de posts do Blogger Draft e mesmo com o editor normal do Blogger.Este é o hack em que o resumo do post fica na página inicial e páginas "index" e ao clicar no link "Leia Mais", o leitor é direcionado para a página interna da postagem.As vantagens do hack do Hackosphere, e por isso na minha opinião ainda não fizeram outro melhor, são básicamente por possibilitar ao editor do blog:
Decidir quais posts deseja apresentar com resumo e quando não aplicar o hack, ou seja, quando não utilizar as tags correspondentes, a palavra "Leia Mais" (ou semelhante) não aparece na postagem;
Escolher o tamanho do resumo - o hack não limita caracteres.
A) JavaScript
1 - Na Guia "Layout" em "Editar HTML", baixe uma cópia de seu template, clicando em "Baixar Modelo Completo;
2 - Marque a opção "Expandir Modelos de Widgets";
3 - Localize a tag </head>. Olhe a imagem e veja como ate onde tem q chegar.
clique para ampliar
4 - Copie o código a seguir e cole ACIMA dessa tag </head>:
<!-- JavaScript Post Summary by hackosphere.blogspot.com modified by bloggersphera.blogspot.com--><b:if cond='data:blog.pageType != "item"'><script type='text/javascript'>var fade = false;function showFull(id) {var post = document.getElementById(id);var divs = post.getElementsByTagName('div');for (var i = 0; i < divs.length; i++) {if (divs[i].id == "fullpost") {if (fade) {divs[i].style.background = peekaboo_bgcolor;Effect.Appear(divs[i]);} else divs[i].style.display = 'inline';}if (divs[i].id == "showlink")divs[i].style.display = 'none';if (divs[i].id == "hidelink")divs[i].style.display = 'inline';}}function hideFull(id) {var post = document.getElementById(id);var divs = post.getElementsByTagName('div');for (var i = 0; i < divs.length; i++) {if (divs[i].id == "fullpost") {if (fade) {divs[i].style.background = peekaboo_bgcolor;Effect.Fade(divs[i]);} else divs[i].style.display = 'none';}if (divs[i].id == "showlink")divs[i].style.display = 'inline';if (divs[i].id == "hidelink")divs[i].style.display = 'none';}post.scrollIntoView(true);}function checkFull(id) {var post = document.getElementById(id);var divs = post.getElementsByTagName('div');var found = 0;for (var i = 0; i < divs.length; i++) {if (divs[i].id == "fullpost") {divs[i].style.display = 'none';found = 1;}if ((divs[i].id == "showlink") && (found == 0))divs[i].style.display = 'none';}}</script></b:if>B) Modificação do código do post
Antes de continuar fazendo as modificações, visualize seu template para checar se o código do script não contém erros;
A seguir, ainda com a caixinha "Expandir Modelos de Widgets" marcada, localize o seguinte trecho em seu template (geralmente está abaixo de <div class="'post-header-line-1'/">):
<div class='post-body'><p><data:post.body/></p><div style='clear: both;'/> <!-- clear for photos floats --></div>3 -Substitua todo esse código pelo código abaixo (copie e cole por cima do código de seu template):
<div class='post-body' expr:id='"post-" + data:post.id'><b:if cond='data:blog.pageType == "item"'><style>#fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>#fullpost{display:none;}</style><p><data:post.body/></p><div id='showlink'><a expr:href='data:post.url'> [ ... ] </a></div><script type='text/javascript'>checkFull("post-" + "<data:post.id/>");</script></b:if> <div style='clear: both;'/> <!-- clear for photos floats --></div>Visualize o template para verificar se não há erros nos códigos.
C) Personalizando o link Leia Mais
O sinal [ ... ] refere-se ao link que irá aparecer no post, na página inicial do blog, para o leitor clicar e ser direcionado à página do post. Você poderá substituir pela palavra que desejar, ou colocar outros símbolos/caracteres, ou a combinação de símbolos e caracteres. Exemplos:
Continue lendo ►
Leia Mais » Se desejar colocar uma imagem (uma seta por exemplo) na frente da palavra, substitua o sinal [ ... ] pelo código abaixo:
Ler todo o Artigo <img src='http://endereço-de-sua-imagem' vertical align='middle'/>A "id" do link está nomeada como "showlink". Podemos portanto colocar estilos para essa id na CSS.Segue uma sugestão de estilos que você poderá adicionar ACIMA da tag ]]></b:skin>
#showlink {font-size: 11px; /* escolha o tamanho da fonte para seu link */float: right; /* escolha se quer seu link flutuando à esquerda ou direita */margin-right: 30px; /* aplique margens para posicionar seu link */margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */font-weight: bold;}#showlink a {color: #CC0000; /* 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 apontado pelo mouse */}Visualize e se estiver tudo ok, salve seu template.
D) Escrevendo e editando postagens com o Hack de Resumo do Post
Você pode formatar sua janela de postagem para que as tags fiquem sempre visíveis, quando escrever posts no modo "Editar HTML".
2 -Localize quase no final da página o box de "Modelo de Postagem" e digite o seguinte: DIGITE O RESUMO DO POST<div id='fullpost'>digite o restante do post</div>
Salve suas configurações.
Colocando essas configurações, as tags estarão incluídas em sua janela de postagem, porém no modo "Escrever", você só visualiza os textos:
O ideal é que você digite seus posts na aba "Editar HTML", onde as tags aparecem:
Se você não tem muito conhecimento de tags HTML
para digitar seus posts nessa aba, eu tenho a seguinte
sugestão:
Digite todo seu post no modo "Escrever" ACIMA do texto
"DIGITE O RESUMO DO POST". Coloque seus links, listas de links,
imagens, blockquote, etc, mantendo sempre os textos do hack no final do
post.
Ao terminar de digitar e antes de publicar, mude para a aba "Editar
HTML". Recorte a tag
<div id='fullpost'> ecole abaixo do texto que você deseja que fique como resumo,
mantendo a tag
</div> nofinal.
Delete os textos "DIGITE O RESUMO DO POST" e "digite o restante do
post" e publique sua postagem.
Fonte: bloggersphera
