Follow Us @soratemplates

quarta-feira, 4 de julho de 2012

5 Formas de Personalizar o "Leia Mais"

 Olá e boas vindas^^
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:
Atualização: mais uma imagem xD

1. Leia Mais com imagem
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.

2. Leia Mais com duas imagens
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.

3. Leia Mais automático
Nesse caso, você insere um "Leia Mais" automático, define o tamanho das imagens, define uma imagem para postagens sem imagens e o número de caracteres antes do leia mais em todas as postagens.
-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=" http://2.bp.blogspot.com/-RKrdXmPD16U/T_R9_l41yHI/AAAAAAAABJc/Vy0SwhQv3bs/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.
http://2.bp.blogspot.com/-RKrdXmPD16U/T_R9_l41yHI/AAAAAAAABJc/Vy0SwhQv3bs/s1600/tumblr_ltkjxqjTnO1qgye6qo1_400_large.jpg - imagem para quando a postagem não tiver imagem, que no caso é essa:
-Visualize e salve.


4. Leia Mais não aplicado ao primeiro post
Com exceção da primeira postagem, todas as postagens terão leia mais com imagem em miniatura. Fica legal para destacar a postagem mais recente.
-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.

5.Leia Mais "feito a mão" (não precisa expandir os modelos de widget)
E se quiser personalizar o link apenas acrescentando algumas cores, plano de fundo, algum efeito...faça assim:
-Acrescente este código acima de ]]></b:skin>
.jump-link {
float:right;
background: url(http://4.bp.blogspot.com/--Kk5-qH_pGU/T2YxVgd59RI/AAAAAAAAFwQ/Y1eIEfmnQJs/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
Créditos: 1,2,3,4,5

29 comentários:

  1. Boa dica ! :v:

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  2. Aaain obrigada Rô, ainda bem que gostou da Tag :d
    Fico muito agradecida por isso, e foi uma honra postar seu texto no meu blog porque ficou lindo!

    E só pra comentar sobre o resto do post, seu blog além de mt mt fofo está sempre dando preciosas dicas que eu amo...

    Obrigada por tudo
    :g

    ResponderExcluir
  3. :v:Caps: Muito obrigada e fico feliz que tenha gostado!!!Beijus:v:
    :v:Eu agradeço uma vez mais Dayanne :3 Fico feliz em poder ajudar!!!! Beijus:v:

    ResponderExcluir
  4. Olá Roberta! te convido para participar da 1# reunião de blogueras kawaii ^^ aki está o link:
    http://brightnessgirl.blogspot.com.br/2012/07/1-debate-das-blogueras.html
    Espero vocÊ lá! ;3

    ResponderExcluir
  5. Olá! Fiz um selinho para dar aos blogs que eu mais amo , e seu blog está entre os meus escolhidos !
    Visite o Cantinho da CAPS para poder pegar seu selinho !

    Beijos
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br

    ResponderExcluir
  6. Que fofo aqui >< post gigante, em? hahah, boas dicas, amei as imagens de leia mais, muito fofas :)

    http://www.blogmundodamoda.com/

    ResponderExcluir
  7. :v:Caps: Obrigada:3 Em breve faço uma postagem com o selinho ^^ Eu também adoro seu blog!!!Muito obrigada!!!!Beijus<3
    :v:Sabrina: Ficou um pouquinho grande neh ^^ Mas é pelos códigos :3
    Muito obrigada!!!Beijus<3

    ResponderExcluir
  8. Blog muito lindo! :b: eu ,adorei as personalizações de leia mais!
    kissus!
    http://magaligirls123.blogspot.com.br/

    ResponderExcluir
  9. ah,e fofa ,poderia postar um tutorial,de como fazer um menu igual ao seu? (tipo quando passa o mause,aparece outro menu!)
    :cat:
    kissus,
    http://magaligirls123.blogspot.com.br/

    ResponderExcluir
  10. Oi Samantha!:v:
    Fico feliz que tenha gostado ^^
    Claro, em breve faço o post com tutorial desse menu ok?
    Beijus e obrigada ^^

    ResponderExcluir
  11. de nada,okay! :d:
    http://magaligirls123.blogspot.com.br/

    ResponderExcluir
  12. Adorei o tutorial :u:
    Bjs, Van :cat:
    http://bubble-explosion.blogspot.pt

    ResponderExcluir
  13. Oi Roberta! :u: Seu blog é maravilhoso ^^

    ResponderExcluir
  14. :v:Obrigada Bianca : 3
    Beijinhus♥

    ResponderExcluir
  15. Olá roberta, eu fiz um blog para minha turma da universidade a pedido do professor.. ainda sou novato nesse universo de blogs, mas consigo fazer algumas coisas.. bom, eu editei o html, conforme descrito no seu post, para ter o resumo do post automático, acontece que em alguns posts da erro e no lugar do resumo aparece alguns códigos.. o meu blog na verdade tem vários autores (cerca de 40), foi passado para eles apenas copiarem seus artigos do word, colarem no editor do blog e publicarem. voce por gentileza poderia dar uma olhado no meu blog e ver qual é o erro? e que realmente eu não sei resolver o problema... desde já, obrigado. endereço do blog: http://direito7uerr.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tente rever os códigos ou então acesse os sites nos quais os encontrei nos links que credito ao fim do post, cada um correspondente ao número dos tutoriais.
      Eu não sei o que pode ter ocorrido :/
      Testei várias vezes aqui e nada de errado aconteceu.

      Excluir
  16. Frustradíssima... Não consegui de jeito nenhum colocar imagem no Leia Mais... Segui tudo direitinho...Acho que é o tamplete que estou usando...peguei free na net... Só consegui instalar o leia mais simples e mesmo assim não está funcionando bem... Se vc puder,dá uma olhadinha por favor, me ajuda? www.batomeavental.blogspot.com
    Beijos
    SARAH

    ResponderExcluir
    Respostas
    1. Talvez seja o template mesmo; já que ele já veio pronto, seria melhor editar pelo CSS mesmo, 5º código, para não dar problemas. Aí você pode aplicar efeitos e tal, quem sabe dá certo neh ^^
      Beijinhus...

      Excluir
  17. Meus blogs estão ficando lindos, graças às dicas e tutoriais que encontrei aqui e em outros blog. Obrigada pela paciência de fazer tutoriais para nós.

    ResponderExcluir
    Respostas
    1. Muito obrigada mesmo, de coração ^^
      Me alegra muito poder ajudar <3
      Beijinhus...

      Excluir
  18. Amei o tuto, me ajudou muito. É bem simples, e realmente o que eu estava procurando. Obriada.
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  19. aawwwhh quanta fofura Roberta,vou colocar no meu blog,ok??

    ResponderExcluir
  20. oie bom eu naõ consigo mexer em html ok mas vc explicou direitinho acho q vou da minha conta para vc fazer para min kkkk serio mesmo <3

    ResponderExcluir
    Respostas
    1. Com um pouco de paciência vc consegue :D
      Eu também não entendo muito, mais o básico mesmo ;3 Com o tempo vc vai se acostumando com códigos e fica mais simples.
      Bju <3

      Excluir
  21. Ola muitooo obriga me ajudou muito estava querendo colocar uma img faz tempo mais n conseguia aprender como kk

    ResponderExcluir
  22. Obrigada, Ro.
    Estava procurando esse tutorial na internet mas ele nunca dava certo, ou o processo era extenso de mais, você salvou minha vida com esse tutorial.
    http://collin-magodoslivros.blogspot.com.br/

    ResponderExcluir
  23. Oie Roberta amei o seu blog , to XONADA nele *-* , mas estou tendo problemas, eu não consegui fazer no meu blog, não sei porque fiz um blog de test para ver se funcionava mesmo e deu tudo certinho , mas no meu não pega chorando de raiva aqui me ajuda por favor ?

    ResponderExcluir
    Respostas
    1. Obrigada :3 Qual deles você tentou adicionar ao seu blog?

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart