{"id":18978,"date":"2012-03-28T09:00:21","date_gmt":"2012-03-28T12:00:21","guid":{"rendered":"https:\/\/www.criarsites.com\/?p=18978"},"modified":"2023-10-28T00:15:11","modified_gmt":"2023-10-28T00:15:11","slug":"aprenda-como-colocar-o-leia-mais-automaticamente-nas-postagens-do-blogger","status":"publish","type":"post","link":"https:\/\/www.criarsites.com\/aprenda-como-colocar-o-leia-mais-automaticamente-nas-postagens-do-blogger\/","title":{"rendered":"Aprenda como colocar o \u2018Leia mais\u2019 automaticamente nas postagens do blogger"},"content":{"rendered":"\n
\"leia<\/figure>\n\n\n\n

No artigo de hoje, vou lhes apresentar uma forma de colocar um resumo nos seus posts, onde o visitante l\u00ea um \u2018peda\u00e7o\u2019 do texto e se quiser ler o resto da mat\u00e9ria ou noticia, tem de clicar em <\/p>\n\n\n\n

\u2018Continue Lendo…\u2019 Isto \u00e9 muito \u00fatil ao criar um blog<\/a>!<\/p>\n\n\n\n

\"continue<\/figure>\n\n\n\n

Para colocar o resumo autom\u00e1tico em suas postagens e noticias de seu site ou blog, voc\u00ea dever\u00e1 adicionar uns c\u00f3digos HTML em seu tema, por isso, recomendo que voc\u00ea fa\u00e7a um Backup de seu modelo no painel do blogger.<\/p>\n\n\n\n

Para fazer o backup, fa\u00e7a o loguin no Blogger<\/a>, clique em \u2018Design\u2019 depois em \u2018Editar HTML\u2019 e por fim clique em \u2018Baixar modelo completo\u2019. Isso \u00e9 preciso porque se acontecer algo errado, voc\u00ea restaurar seu tema do jeito que era antes.<\/p>\n\n\n\n

Voc\u00ea poder\u00e1 adicionar o \u2018Leia mais\u2019 de forma manual do blogger facilmente. Quando voc\u00ea digitar sua mat\u00e9ria no campo de publica\u00e7\u00e3o, coloque o cursor do texto onde voc\u00ea que colocar o \u2018Leia mais\u2019 e clique no \u00edcone de uma folha tipo rasgada. Depois clique em \u2018Visualizar\u2019 para v\u00ea como ficou.<\/p>\n\n\n\n

Ainda acho melhor desse jeito que vou ensinar aqui, pois o resumo j\u00e1 aparece automaticamente.<\/p>\n\n\n\n

O tamanho do resumo que ficar\u00e1 vis\u00edvel na HOME de seu site e o tamanho das imagens dos artigos \u00e9 totalmente configur\u00e1vel, vou lhe ensinar como ajeitar essa parte tamb\u00e9m!<\/p>\n\n\n\n

Agora vamos ao passo a passo de como colocar o resumo de seus posts de forma autom\u00e1tica e com imagem do lado.<\/p>\n\n\n\n

Vai ficar igual o exemplo da imagem acima.<\/p>\n\n\n\n

1-      Fa\u00e7a seu loguin no blogger, clique em \u2018Design\u2019 e depois clique em \u2018Editar HTML\u2019.
2-      Fa\u00e7a o backup de seu tema clicando em \u2018Baixar modelo completo\u2019.
3-      Clique em \u2018Expandir modelos de widget\u2019, use o atalho CTRL + F e procure por: <\/head>
4-      Logo acima dele, cole esse c\u00f3digo HTML:<\/p>\n\n\n\n

<!-- Resumo autom\u00e1tico -->
\n<script type='text\/javascript'>
\nsummary_noimg<\/strong> = 330;
\nsummary_img <\/strong>= 300;
\nimg_thumb_height<\/strong> = 100;
\nimg_thumb_width<\/strong> = 100;
\n<\/script>
\n<script type='text\/javascript'>
\n\/\/<![CDATA[
\nfunction removeHtmlTag(strx,chop){
\nif(strx.indexOf(\"<\")!=-1)
\n{
\nvar s = strx.split(\"<\");
\nfor(var i=0;i<s.length;i++){
\nif(s[i].indexOf(\">\")!=-1){
\ns[i] = s[i].substring(s[i].indexOf(\">\")+1,s[i].length);
\n}
\n}
\nstrx = s.join(\"\");
\n}
\nchop = (chop < strx.length-1) ? chop : strx.length-2;
\nwhile(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
\nstrx = strx.substring(0,chop-1);
\nreturn strx+' [...]';
\n}
\nfunction createSummaryAndThumb(pID){
\nvar div = document.getElementById(pID);
\nvar imgtag = \"\";
\nvar img = div.getElementsByTagName(\"img\");
\nvar summ = summary_noimg;
\nif(img.length>=1) {
\nimgtag = '<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>';
\nsumm = summary_img;
\n}
\nvar summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '<\/div>';
\ndiv.innerHTML = summary;
\n}
\n\/\/]]>
\n<\/script>
\n<!-- Fim resumo autom\u00e1tico --><\/code><\/p>\n\n\n\n

N\u00e3o precisa mudar nada, caso voc\u00ea queira aumentar ou diminuir o tamanho do resumo do post que vai aparecer na HOME ou o tamanho da imagem, preste aten\u00e7\u00e3o abaixo:<\/p>\n\n\n\n

Mudando o tamanho do resumo e das imagens que vai ser exibido no HOME:<\/strong><\/p>\n\n\n\n

Summary_noimg \u2013 \u00c9 o n\u00famero de caracteres do resumo se n\u00e3o tiver nenhuma imagem na postagem. No c\u00f3digo acima, est\u00e1 definido por 330 caracteres.<\/p>\n\n\n\n

Summary_img \u2013 \u00c9 o n\u00famero de caracteres do resumo caso a postagem possua alguma imagem. No c\u00f3digo acima est\u00e1 definido por 300 caracteres.<\/p>\n\n\n\n

Img_thumb_height \u2013 \u00c9 a altura da imagem em pixels. No c\u00f3digo acima est\u00e1 definida para ter 100px de altura.<\/p>\n\n\n\n

Img_thumb_widthh \u2013 \u00c9 a largura da imagem em pixels. No c\u00f3digo acima est\u00e1 definida para ter 100px de largura.<\/p>\n\n\n\n

Continuando a configurar os resumos autom\u00e1ticos:<\/strong><\/p>\n\n\n\n

5-      Agora procure por: <data:post.body\/>
6-      Substitua o c\u00f3digo acima colocando o c\u00f3digo abaixo:<\/p>\n\n\n\n

<!-- Resumo autom\u00e1tico -->
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body\/>
<b:else\/>
<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body\/><\/div>
<script type='text\/javascript'>createSummaryAndThumb
("summary<data:post.id\/>");<\/script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Continue Lendo...<\/a>
<\/span><\/b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body\/><\/b:if><\/p>
<\/b:if>
<!-- Fim resumo autom\u00e1tico --><\/code><\/p>\n\n\n\n

Onde tem \u2018Continue Lendo… \u2019 no c\u00f3digo acima, voc\u00ea pode substituir por qualquer texto como, Leia Mais, Leia a mat\u00e9ria completa… Vai da criatividade de cada um.<\/p>\n\n\n\n

Por fim, clique em \u2018Visualizar\u2019, se as postagens estiverem sido resumidas, clique em \u2018Salvar modelo\u2019.<\/p>\n\n\n\n

Caso voc\u00ea ainda n\u00e3o tenha publicado nenhuma postagem em seu site\/blog, clique em \u2018Salvar modelo\u2019 e crie uma postagem grande para ver se funcionou. Caso tenha dado algo errado, fa\u00e7a o upload do arquivo XML que voc\u00ea baixou no inicio desse artigo e nos conte aqui por coment\u00e1rio para v\u00ea onde foi o erro.<\/p>\n\n\n\n

Espero que esse Guest Post seja \u00fatil para todos voc\u00eas!<\/p>\n\n\n\n

Veja Tamb\u00e9m:<\/strong><\/p>\n\n\n\n