Reino Kawaii

Antes de dar início a postagem quero contar para vocês uma coisa: a Dayanne publicou o texto que escrevi especialmente para a tag criada por ela em seu maravilhoso blog, And I say to the world. Eu sempre me inspiro e me alegro muito com as postagens de lá e recomendo várias visitas!!!! Caso queiram ler meu texto:

Obrigada por publicar Dayanne!!!!Acompanhem!!! Além do meu, outros textos de participantes da tag serão publicados :3Agora...o post.
Acredito que assim como eu, muitos blogueiros colocam em suas postagens o hack Leia Mais.
Acho isso legal porque ao mesmo tempo que permite ao blog carregar mais rápido, desperta certa curiosidade no leitor já que você pode fazer tipo um suspense na introdução do seu artigo ou ir direto ao ponto e caso agrade, as pessoas vão querer ler até o final.
Para ativar esse hack, existe uma ferramenta no blogger chamada Jump Break e também nela se pode aplicar alguns efeitos:

O mais simples, é aquele em que você vai até Layout, Elementos da Página, Editar Postagens e modifica o texto como da imagem abaixo, sendo possível inserir símbolos além de letras:
Outra forma simples é adicionar antes do texto que será aberto ao clicar no Leia mais isso: <!--more-->
Até aí tudo bem, mas se você quer trocá-lo por uma ou duas imagens, aplicá-lo automaticamente e até definir quantas palavras, tamanho da imagem antes dele ou não aplicar no primeiro post, entre outros, você já terá que partir para o HTML.
Vou mostrar algumas coisas que se pode fazer para vocês, lembrando que é bom salvar uma cópia do seu modelo antes de qualquer alteração e verificar se há algum código adicionado por vc em uma das áreas que podem ser modificadas. Em todos, com exceção do número 5, você deverá ir até a área de edição de html do seu blog e deixar marcado a opção Expandir Modelos de Widgets.
Mas antes de começar, algumas imagens para vocês; basta salvar (ou editar e salvar), recortar em um editor de imagens e hospedar no Picasa ou outro que prefira. Todas são em PNG (sem fundo); click para visualizar em tamanho real:
Aparece apenas uma imagem no local onde fica o link do Leia Mais.
-Encontre: <data:post.jumpText/>
-Troque por: <img src="URL da imagem"/>
-Visualize e salve.

Nesse você usa duas imagens: uma que aparece sempre em todos os posts e outra que aparece quando o mouse está no link para clicar.
-Encontre: <data:post.jumpText/>
-Troque por:
<img border='0' onmouseout='this.src=&apos;url da imagem&apos;' onmouseover='this.src=&apos;url da imagem quando passa o mouse no link&apos;; return true' src='url da imagem'/>
-Visualize e salve. Quando estiver fora da visualização, teste passando o mouse em cima da imagem, que deverá mudar.

-Encontre <data:post.body/>
-Troque por:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:12px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Note na área sublinhada que se pode trocar o tamanho da letra, alinhamento, aplicar cores, trocar a palavra leia mais por imagens (<img src=" URL da imagen " border="0" />), enfim, aplicar vários estilos...
-Agora, cole esse código antes de </head>:

<script type='text/javascript'>
summary_txt = 500;
img_thumb_width = 415;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1e9MB4bNRuUPUgZiDWjK7r0gUpdHwwSaU8bMFFq-GpK13kg_RRdUvVYua4MEh3TOB457QaLS1DgXqAUrdW9SwQiwfudi1mVtvcQkzaf-a5p3IHaGwFVaMDZl_JyOv2_RdtSDEFZBN89rn/s1600/tumblr_ltkjxqjTnO1qgye6qo1_400_large.jpg " width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Em que:
summary_txt = 500; - número de letras visualizadas antes do leia mais.
img_thumb_width = 415; - tamanho da imagem.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1e9MB4bNRuUPUgZiDWjK7r0gUpdHwwSaU8bMFFq-GpK13kg_RRdUvVYua4MEh3TOB457QaLS1DgXqAUrdW9SwQiwfudi1mVtvcQkzaf-a5p3IHaGwFVaMDZl_JyOv2_RdtSDEFZBN89rn/s1600/tumblr_ltkjxqjTnO1qgye6qo1_400_large.jpg - imagem para quando a postagem não tiver imagem, que no caso é essa:
-Visualize e salve.


-Encontre: <data:post.body/>
-Troque por:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leia mais...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

-Acima de </head> cole isso:

<script type='text/javascript'>
summary_noimg = 500;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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) {
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;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Bom, o Leia Mais já está em todos os posts. Para que o primeiro post fique sem o Leia Mais...
-Econtre: <b:include data='post' name='post'/>
-E troque por:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body entry-content'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

-Visualize e salve.

-Acrescente este código acima de ]]></b:skin>

.jump-link {
float:right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHe-gj7bEx7DrBO-WNzFSt6kprGdJKPi3UZX8LbqGkwLtD8rpCaZsw7chZDJgUloB8N4paNDtLGYSajxY4W1dLx3cok62gRtmcaZck40IaxM8R0j5rTJjuAA_kU259n0WJ9xPKvFj11E8/s1600/B12.gif) repeat;
border-radius: 4px;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.jump-link a {
color: #ffffff; /* Cor do texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #fcc; /* Cor do texto quando o mouse passa em cima */
border-radius: 4px;
text-decoration:none;
}

Uma pequena observação: nas imagens sugestivas de leia mais coloquei as palavras Open e Close, que podem ser usadas em um tipo de tutorial que permite abrir e fechar qualquer coisa sem necessidade de carregar. Veja aqui: 
Bem, é isso ^^
Espero que gostem e usem a criatividade de vcs para que o leitor sinta uma vontade enorme de clicar no link e...ler mais :3
Beijok ;D