Inicio Sobre o Blog Contato Inscreva-se Design Responsivo Pro Developer Indice Gerador de Cores Tutoriais SEO Slides Menus Widgets Fazer Uma Busca... Home Tutoriais Resumo Automático de Postagens com Imagem no Blogger Resumo Automático de Postagens com Imagem no Blogger TK Azevedo 7/30/2013 110 Comentarios Tutoriais Limite o tamanho de suas postagens na página inicial e organize seu blog de maneira profissional. O resumo das postagens do seu blog além de deixá-lo esteticamente mais apreciável aos olhos de seus visitantes deixa também mais organizado e fácil de ser carregado, pois, não mostrará a postagem inteira na página inicial. Fazendo esse processo seu blog ficará com um estilo profissional e além disso você poderá personalizar para combinar com o design dele, pois, aqui também mostraremos como substituir o link "Leia Mais" por uma imagem de sua preferência. Então, veja a seguir como fazer: Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog. COLOCANDO O HACK "LEIA MAIS" Acesse seu blogger, vá em "Modelo" e depois "Editar HTML". 1º Passo: Incluindo o Javascript. Clique no código de seu template, pressione "CTRL+F" e pesquise por Logo ACIMA da tag encontrada cole o seguinte código: Atenção para as partes destacadas: Em summary_noimg = 330; - Representa o número de caracteres do resumo para as postagens que não contenham imagens. Em summary_img = 300; - Representa o número de caracteres do resumo pra as postagens com imagens. Em img_thumb_height = 130; - Representa a altura da imagem. Em img_thumb_width = 130; - Representa a largura da imagem. 2º Passo: Incluindo o código no HTML. Pesquise agora por Observação: Você irá encontrar três trechos como esse, opte pelo segundo. Substitua a tag encontrada pelo seguinte código:

Lei* Caso deseje colocar uma imagem no lugar do "Leia Mais", siga o passo 3. Caso prefirae ocupe o lugar do link "Leia Mais". 4º Passo: Salvando. Clique em "Visualizar", caso não encontre nenhum erro clique em "Salvar Modelo". Gostou? Comente. O seu comentário é a motivação para nosso trabalho. CompartilharCurtirG+Tweet TK Azevedo Aficcionado por tecnologia em geral, trabalha na área de TI desde 2008 e blogueiro nas horas vagas. Fã de música e de prog
ramação html. Criador e editor do blog ProDeveloper. Recomendamos que leia também ... Como Colocar Emoticons Facemoods nos Comentários do Blogger Como Colocar Emoticons Facemoods nos Comentários do Blogger Como Adicionar uma Imagem ao Lado dos Títulos dos Posts do Blogger Como Adicionar uma Imagem ao Lado dos Títulos dos Posts do Blogger Páginas de Navegação Numeradas Flat Coloridas para Blogger Páginas de Navegação Numeradas Flat Coloridas para Blogger Postagens Relacionadas Estilo Lista no Blogger Postagens Relacionadas Estilo Lista no Blogger Como Alterar o Cursor do Mouse no Blogger Como Alterar o Cursor do Mouse no Blogger Como Usar o Breadcrumb no Blogger Como Usar o Breadcrumb no Blogger BLOGGER COMENTARIOSFACEBOOK COMENTARIOS 110 comentários: Dalmir Reis Jr.8 de setembro de 2013 20:04 Espertacular! Obrigado por compartilhar esta função. Será que temos um "map" para a imagem para que ela seja publicada sem que fique "achatada"? Conseguiremos colocar uma pequena borda na imagem? Lembro de ter acompanhado em outro blog que recomendam alterar o CSS. Abraços! Responder Respostas TK Azevedo9 de setembro de 2013 11:42 Olá Dalmir, fico feliz que você tenha gostado. Sobre suas perguntas, o ideal na nova formatação padrão Html5 é que os etilos sejam feitos por CSS. Caso você optou por usar imagem, personalize com um editor de imagens de sua preferência e deixe-a no formato ideal para uso. Se você optou por usar o link, você citará dentro do código html de seu template a class .reslink e dará a ela atributos como background, border, color e outros que possibilitem personalizá-lo de acordo como mais lhe agradar. Obrigado pela visita e pelo comentário. Gih Alves5 de outubro de 2013 20:19 Olá! Esse tutorial foi muito útil e consegui fazer o que estava planejando há algum tempo, mas o texto fica um tanto "bagunçado". Tem algum jeito de deixar o texto resumido justificado, para que não fique todo desalinhado na página inicial? Muito obrigada! Responder Respostas TK Azevedo5 de outubro de 2013 20:45 Olá Gih, tem sim. No código do Passo 2 você acrescenta style="text-align:justify" antes de expr:id='"summary&quot ficando assim:
e logo ABAIXO cole o seguinte código e depois salve. Obrigado pela visita. Cláudio - blog da lotofácil24 de novembro de 2014 17:15 Muito obrigado TK Azevedo.. funciona perfeitamente.. Agora posso personalizar como vai mostra a imagem no resumo. O melhor que nenhum estilo aplicado aparece quando a postagem esta aberto, muito bom mesmo. Responder Cláudio - blog da lotofácil24 de novembro de 2014 17:26 Olá mais um pedido, percebi que esse código não tem a opção que aparece uma imagem no resumo quando o post não contém uma imagem.. Teria como coloca essa função também ? Responder Respostas TK Azevedo25 de novembro de 2014 10:32 Olá Cláudio, infelizmente esse script é o mais simples possível para gerar um resumo e não há essa opção. Obrigado pela visita. Maria da Luz Branca19 de dezembro de 2014 20:42 Boa noite adorei o seu post, ele resultou muito bem no meu blog de teste mas quando tempo passar o templayte para o blog as postagens ficam normais, ja tentei passar o "código há mão" mas mesmo assim não dá Pode ajudar-me Obrigado Maria Luz Responder Respostas TK Azevedo20 de dezembro de 2014 14:58 Olá Maria, sim já aconteceu um probleminha parecido outra vez, primeiro teste o tutorial em um blog de testes como você fez para conferir se o processo está sendo feito corretamente (lembrando que o template usado no blog de testes deve ser o mesmo que você utiliza no blog principal), depois, é preciso fazer diretamente no blog desejado com muita atenção principalmente no segundo passo que podem conter três trechos iguais e é preciso utilizar no segundo. Atenção: Em alguns templates personalizados não é possível utilizar esse tutorial para fazer o procedimento. Obrigado pela visita. JOHN LENNON16 de janeiro de 2015 20:08 nao to conseguindo fazer no meu blog. nao consigo personalizar o nome Responder Respostas TK Azevedo17 de janeiro de 2015 11:26 Olá John Lennon, se você está se referindo a não conseguir personalizar o link "Leia Mais", essa é a parte mais fácil do processo. Se você desejar do modo simples, basta que mude o nome "Leia Mais" no trecho destacado em vermelho do passo 2. Se preferir uma imagem, primeiro precisará criá-la ou procurar na web uma que lhe agrade, hospedá-la para utilizar o link e seguir como informado no passo 3. Obrigado pela visita. Carolina21 de janeiro de 2015 00:20 Obrigada pelo código, tudo deu certo! Mas como eu faço para a página inicial ter um tamanho de coluna principal e as páginas específicas dos posts terem outro? Queria uma página grande para as colunas e menor para os textos. Tentando fui destruindo meu layout, hehe. Responder Respostas TK Azevedo22 de janeiro de 2015 14:48 Olá Carolina, isso varia de um template para o outro e por isso não tenho como te passar uma receita pronta. Por exemplo, em meu blog a área de postagens pode ter um id #centro com um width de 600px e no seu já ser uma formatação diferente, mas tem que descobrir dessa maneira: O nome (id) da área desejada e ajustar a largura (width) da mesma. Obrigado pela visita. Aline Carvalho4 de março de 2015 14:22 Até que enfim consegui, parabéns pelo tutorial. Ajuda de mais! Responder Respostas TK Azevedo5 de março de 2015 21:05 Olá Aline, fico muito feliz por você ter conseguido. Obrigado pela visita. Mod Júnior Gameplays10 de março de 2015 23:35 Olá TK Azevedo, por gentileza teria como colocar mais postagens em cada página? Pois fiz tudo certinho, sendo que se eu configurar "Número de postagens na página principal" igual 8, 9, 10 e etc... o restante das páginas, só aparecem 5 postagens, eu queria aumentar, teria como fazer isso? Agradeço desde de já e obrigado! Responder Respostas TK Azevedo12 de março de 2015 13:34 Olá, infelizmente não da pra ajustar esse número através do código do tutorial, somente no painel de configurações do Blogger. Porém, se você está ajustando lá e está tendo problemas, há algum conflito dentro de seu template que está gerando esse problema, nesse caso pode acontecer esses tipos de inconvenientes devido a várias personalizações existentes em templates que não sejam padrões do Blogger. Obrigado pela visita. Mod Júnior Gameplays12 de março de 2015 20:17 Olá TK, eu já resolvi isso, não é problema do template, pois criei um template só para testar certo?! Sobre ficar a numeração em todas elas, eu adicionei um código referente à Páginas Numeradas e configurei pelo código, daí todas as páginas ficam 10 postagens (exemplo) por página ou qualquer outro número que você queira. Muito obrigado pelo seu feedback! Misael Jefte21 de março de 2015 11:37 Fiz todo o procedimento, mas nao aconteceu nada..... Responder Misael Jefte21 de março de 2015 11:55 Ja resolvi......tive que trocar pelo terceiro e nao pelo segundo... VLW Responder Respostas TK Azevedo23 de março de 2015 13:53 Olá Misael, fico muito feliz por você ter conseguido e agradeço por compartilhar a experiência aqui com a gente. Obrigado pela visita. Lucas tamachida28 de março de 2015 15:55 cara me ajuda quando eu cliko em salva modelo aparece uma frase q diz assim Erro ao analisar XML, linha 2190, coluna 183: The reference to entity "Download.png" must end with the ';' delimiter. Responder Respostas TK Azevedo30 de março de 2015 13:39 Olá Lucas, esse erro acontece quando está faltando algum trecho de código ou quando é colocado no local errado. Obrigado pela visita. Alex F. Kegler26 de junho de 2015 19:46 Caramba cara, não esta funcionando, já tentei umas 10 vezes, acho que estou errando no 2º Passo, procuro as outra opções mas não encontro. Responder Respostas TK Azevedo29 de junho de 2015 20:27 Olá Alex, pode ser que você esteja errando, mas também depende muito do template que você esteja usando seja incompatível para poder usar esse tutorial. Obrigado pela visita. ROSA MARIA14 de julho de 2015 11:48 consegui resumir as postagens, porem logo abaixo aparecem as mesmas postagens e completas, o que deixa o blog feio, como tirar? é algum código? Responder Respostas TK Azevedo19 de julho de 2015 13:28 Olá Rosa, isso pode estar acontecendo por causa de conflitos em seu template. Para tirar sua dúvida, faça o procedimento em um blog de testes com template padrão (para verificar se você está fazendo corretamente), caso tenha resultado

positivo, o problema pode estar mesmo em seu template. Obrigado pela visita. Postagem mais recente Postagem mais antiga Página inicial Super Menu com Miniaturas das Postagens no Blogger O menu que você sempre sonhou em ter em seu blog, personalizando a seu ... leia mais Aug 10 2015 Botões Redes Sociais Ícones Retina no Final das Postagens do Blog Coloque em seu blog botões para compartilhar nas redes sociais no final das ... leia mais Mar 31 2015 Widget Postagens mais Comentadas Estilo Colorido no Blogger Widget que exibe as postagens mais comentadas de seu blog em duas versões para ... leia mais Feb 24 2015 Como Adicionar um RSS Feed de Notícias no Blogger Mantenha os visitantes do blog sempre bem informados de suas postagens com um ... leia mais Feb 02 2015 Como Colocar uma Barra de Rolagem Automática no Blogger Faça com que a barra de rolagem do blog se desloque automaticamente gerando um ... leia mais Jan 05 2015 Anúncios Redes Sociais Inicio Sobre o Blog Privacidade Termos de Uso Contato Inscreva-se Copyright © 2013-2015 Pro Developer - Todos os Direitos Reservados DMCA.com Protection Status Assine Nossa Newsletter Registe-se com o seu endereço de e-mail para receber notícias e atualizações direto na sua caixa de entrada. Coloque Seu Email Inscreva-se

jmhjmhjmhjm

fgfghbfgfgnb

kkkkkkk