Hack de Resumo do Post - Leia Mais
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> . Copie o código a seguir e cole ACIMA dessa tag:
**********************************************************************
<!-- JavaScript Post Summary by ColdFire-->
<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
1- Antes de continuar fazendo as modificações, visualize seu template para checar se o código do script não contém erros;
2- 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'>
<br><a expr:href='data:post.url'><b>Continue Lendo...</b></a></br>
</div>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
**********************************************************************
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:
D) Adicionando o “CSS”
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;
float: right;
margin-right: 30px;
margin-top: -8px;
font-weight: bold;
}
#showlink a {
color: #CC0000;
}
#showlink a:visited {
color: #CCCCCC;
}
#showlink a:hover {
color: #000000;
}
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".
Para isso, siga o procedimento:
1 - Vá até a Guia de "Configurações" de seu blog e clique na aba "Formatação"
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>
**********************************************************************
08:43
Glaucio Gonçalves
deixe para enfeita o seu vodigo mais tarde<br /><br />depois de fizer toda a postagem copie o codigo abaixo e cole na barra de navegação(la onde fica o endereço do blogspot,onde você digita o endereço dos sites)<br />e aperta enter,automaticamente todos os caracteres com < e > vao ser substituidos por < e ></div>
<script type='text/javascript'>createSummaryAndThumb()
