Hack de Resumo de Post

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 != &quot;item&quot;'>

<script type='text/javascript'>

var fade = false;

function showFull(id) {

var post = document.getElementById(id);

var divs = post.getElementsByTagName(&#39;div&#39;);

for (var i = 0; i &lt; divs.length; i++) {

if (divs[i].id == &quot;fullpost&quot;) {

if (fade) {

divs[i].style.background = peekaboo_bgcolor;

Effect.Appear(divs[i]);

} else divs[i].style.display = &#39;inline&#39;;

}

if (divs[i].id == &quot;showlink&quot;)

divs[i].style.display = &#39;none&#39;;

if (divs[i].id == &quot;hidelink&quot;)

divs[i].style.display = &#39;inline&#39;;

}

}

function hideFull(id) {

var post = document.getElementById(id);

var divs = post.getElementsByTagName(&#39;div&#39;);

for (var i = 0; i &lt; divs.length; i++) {

if (divs[i].id == &quot;fullpost&quot;) {

if (fade) {

divs[i].style.background = peekaboo_bgcolor;

Effect.Fade(divs[i]);

} else divs[i].style.display = &#39;none&#39;;

}

if (divs[i].id == &quot;showlink&quot;)

divs[i].style.display = &#39;inline&#39;;

if (divs[i].id == &quot;hidelink&quot;)

divs[i].style.display = &#39;none&#39;;

}

post.scrollIntoView(true);

}

function checkFull(id) {

var post = document.getElementById(id);

var divs = post.getElementsByTagName(&#39;div&#39;);

var found = 0;

for (var i = 0; i &lt; divs.length; i++) {

if (divs[i].id == &quot;fullpost&quot;) {

divs[i].style.display = &#39;none&#39;;

found = 1;

}

if ((divs[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))

divs[i].style.display = &#39;none&#39;;

}

}

</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='&quot;post-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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(&quot;post-&quot; + &quot;<data:post.id/>&quot;);

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

**********************************************************************

 

Posted in: HTML