» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Como Ativar o Leia Mais Automático sem Javascript com Thumbnails




Já ensinei aqui no TPV como ativar o Recurso Leia Mais do Blogger. Neste recurso você tem que definir onde o seu post ficará partido dando um pouco de trabalho.

Este hack que estou ensinando hoje é diferente porque ativa o leia mais automaticamente e é muito simples de ser implementado.

A única desvantagem que vejo em relação aos outros recursos é que não é possível definir a quantidade de caracteres que aparecem no resumo do post da página inicial.

Mesmo assim é muito legal porque não precisamos usar javascripts, auxiliando no tempo de carregamento do blog.

Veja no blog de testes: Demoplate 2010
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
1º Passo: Aplicar o Leia mais Automático com Miniaturas
Entre no seu blog: Vá em ModeloEditar HTML → Marque a caixinha Expandir modelos de widgets

» Procure pela linha:
<data:post.body/>

» Substitua esta linha pelo código abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observações Importantes:

1- Se você usa um template personalizado ou modelo 2006:
♥ Deverá substituir a primeira linha <data:post.body/> que encontrar.
♥ Quando você aplica o código original (dos sites onde aprendi este tutorial) as páginas estáticas podem ficar resumidas e não funcionar ou não. Mas encontrei uma solução para isto. Por isso o código acima já está modificado para que as páginas estáticas funcionem corretamente.

2- Se você usa um template do blogger 2010:
♥ Provavelmente irá encontrar a ocorrência de 3 linhas <data:post.body/>, substitua a 1ª linha clique em Visualizar se os seus posts não ficarem resumidos, desfaça a 1ª tentatica e substitua a 2ª linnha <data:post.body/>. Uma delas vai dar certo.

Resumidos automatico

♥Minha experiência: Durante os meus testes no Blog de Demonstração 2010: Demoplate 2010
quando substitui a 1ª linha não deu certo e na 2ª deu certo, mas tentei novamente em outro blog de testes 2010, deu certo quando substitui a 1ª linha.

♥ Com relação às páginas estáticas elas funcionam corretamente mesmo com o código original (dos sites onde aprendi este tutorial).

2º Passo: Configurar o CSS do post Resumido
» Encontre a linha ]]></b:skin>

» Cole este código acima da linha ]]></b:skin> para configurar o link do Leia Mais.
.jump-link{ 
background: #F4F4F4;/*Cor do fundo do botão*/
display: inline;
border: 1px solid #DDD;
padding: 1px 10px 2px 10px;
float: right;/*Onde o botão se localiza-Pode colocar left se quiser que fique à esquerda*/
border-radius: 13px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
}
.jump-link a {
color: #666666; /*Cor do link Leia mais*/
text-shadow:0 1px 0 #FFF;
font-size: 10px;/*Tamanho da fonte*/
text-transform: uppercase;/*Define o texto todo em maiúsculo*/
font-weight: bold;
}
.jump-link:hover { /*botão leia mais quando o mouse passa sobre ele*/
background: #F1F1F1;
display: inline;
border: 1px solid #B1B1B1;
}
.jump-link a:hover, .jump-link:hover a {
text-decoration: none;
color: pink;/*Cor do texto quando passa o mouse sobre*/
}
.thumb img {float: left; margin: 0 10px 10px 0;}

→ O tamanho da miniatura (thumbnail) da imagem original é de 72px X 72px, mas você pode alterá-lo na linha .thumb img {float: left; margin: 0 10px 10px 0; } do código CSS acrescentando os comandos width: 80px; e height:80px;. Bem como o lado onde você quer que fique a imagem: left=esquerda, right=direita.

O botão Leia mais do seu blog ficará assim:

Leia Mais automático Blogger04

Veja no Demoplate 2006-1
3º Passo: Configurar o Texto do Link Leia Mais
Para alterar o texto do leia mais vá em Layout » em Postagens no blog » Clique em Editar » Altere o texto do link como a imagem abaixo▼

Leia Mais automático Blogger01

Neste exemplo coloquei: “Continue Lendo”, mas você pode editar o texto da maneira que quiser.



Fontes – Tradução e adaptação dos posts:
♦ Auto Read More Without Requiring JavaScript
♦ Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!
Sumarios Automáticos sin javascripti para blogger

Como aumentar a Visibilidade do seu Site!





Durante as pesquisas que fiz sobre mídias sociais para aprimorar o meu artigo anterior a este – O que é Social Bookmarking - encontrei um artigo divulgando o E-book: “Tire o máximo partido do seu conteúdo” criado pela equipe do Google que visa ajudar os editores da Web a melhorar a visibilidade dos sites, ensina também como o Google indexa os Web sites, etc.

Este e-book é uma excelente forma de aprendermos técnicas de SEO e assim nos tornarmos mais visíveis aos sites de buscas e ao Google que é o maior site de buscas da internet.
Seguindo este raciocínio aumentamos nossas visitas e podemos ganhar dinheiro com nossos blogs. O que imagino ser a aspiração de um grande número de blogueiros na Web.

Aqui está o E-book, você pode salvá-lo em seu computador a partir deste pdf ▼ ou clique no botão do link abaixo:



Download do e-book: Tire o máximo partido do seu conteúdo

Tenho estudado bastante sobre SEO e pretendo publicar aqui no TPV o que estou aprendendo, sempre que possível.

Fonte: Encontrei esta informação neste link

O que é Social Bookmarking




Ao ler este post você verá no fim alguns ícones muito simpáticos iguais aos da imagem ao abaixo.

Estes ícones sugerem que você compartilhe o post lido caso tenha gostado do conteúdo

Agora você me pergunta: Para que isso? O que são estes ícones? O que significa "ShareThis"? Porque usá-los?

Na verdade esta foi a pergunta que eu me fiz e dediquei este artigo para responder para mim e para os leitores do TPV.

O que é Social Bookmarking?

De acordo com a Wikipédia= O Social Bookmarking, resumidamente, é um sistema de bookmarks (também conhecido como favoritos ou marcadores) online, público e gratuíto, que tem por finalidade disponibilizar seus favoritos na internet para o seu fácil acesso e para compartilhar com os usuários deste tipo de serviço. Pode ser classificado como parte do conceito que é chamado de Web 2.0.
[Bookmark = Marcar]
[Social bookmarking = Marcador social]
Quando o seu leitor se interessa pelo conteúdo do seu post e o considera relevante ele pode adicionar ou "favoritar" o seu post ou site em mecanismos de Social Bookmarking para que possa acessar de qualquer computador. O usuário do site de social bookmarking pode compartilhar ou não o conteúdo da página adicionada com outros internautas tornando seus favoritos públicos ou não.

Para facilitar a vida do seu leitor você coloca os ícones dos principais sites de social bookmarking ao final (no rodapé) dos seus posts. Aí ele clica sobre um dos ícones que o direciona ao site respectivo e o inclui, na lista dos seus links favoritos (bookmarks), atribuindo a ele uma palavra-chave (tag). Para isso o leitor deve ser cadastrado no site em questão.

Esta é uma maneira muito boa de DIVULGAR o conteúdo do seu site pela internet, ganhar visibilidade na rede e, consequentemente, AUMENTAR OS ACESSOS À SUA PÁGINA. Quanto mais links, mais acessos e mais visibilidade nos sites de busca. Pode-se considerar que usar os sites de bookmarking para divulgar o seu site é uma técnica de SEO.

Uma forma muito interessante de entender os sites de social bookmarking foi dita no blog Antisocial (cujo link não está mais disponível).
"...O fato de você poder ter a chance de popularizar aquilo que você acha relevante é o máximo. Os usuários acabam “levantando um bandeira” quando adicionam um post, um conteúdo qualquer em seu bookmarking, isso é muito mais que popularidade, isso gera relevância por terceiros! Não são mecanismos determinando o que é relevante sobre determinado assunto, é “Nós gerando relevância” para web! Democratizar a classificação do conteúdo na web é manter a web evoluindo, porque dando o direito ao usuário de “votar” naquilo que considera interessante para determinado assunto é garantir a todos o direito de mostrar ao mundo o que é realmente interessante para “mim” usuário...."

Quais são os sites de Social Bookmarking?

Estes sites também podem receber outros nomes como Agregadores de Conteúdo como o Marcos Lemos (autor do Ferramentas Blog) os chama em Usando Agregadores de Conteúdo para atrair visitas. Porém de acordo com os meus estudos a essência de todos é a mesma. Me corrija se estiver enganada. Estamos aqui para aprender.

Vou enumerar os sites que encontrei e as classificações encontradas na internet sobre eles.

Links
(Usados para Favoritar links na web)

deliciousdel.icio.us - O mais popular serviço de social bookmarking atualmente.

stumbleuponStumbleUpon – Considerado um social discovery, visa facilitar pesquisas de determinadas áreas.

favotitUsFavoritUs.com.br - Guardar seus links favoritos. Monte uma página inicial com seus links e seus ícones.

blinklist_32BlinkList

blogmarks_32Blogmarks.net

connotea_32Connotea - Essencialmente dedicado a bookmarks da área academica.(cientistas e pesquisadores).

buffer_32Buffer – É um serviço de agendamento de publicações em redes sociais.

diigo_32diigo – Oferece múltiplos serviços integrados como salvar links, criar tags, criar documentos de texto, salvar imagens da web ou do computador, escrever notas ou fazer destaques por meio de um marcador. Possui apps para smartphones.

evernote_32evernote – Muito semelhante ao diigo e possui tradução para português.

google_bmarks_32Google Bookmarks

social-yahoo-box-lilac-iconYahoo! Bookmarks

Notícias
(Usados para Favoritar Notícias - É necessário que seu blog seja atualizado Regularmente)

diggdigg - Social bookmarking especializado em notícias.

redditReddit

dihitt_16x16_01diHITT – Similar nacional ao digg

fark_32Fark

Botões
(Usados para Facilitar a Vida dos Blogueiros)

  • SoBoo - Primeiro botão de Social Bookmarking do Brasil
  • AddThis - Botão de Social Bookmarking internacional
  • Share This – Semelhante ao AddThis
  • Shareaholic- Possui extensão para o navegador Chrome facilitando o uso e seus botões de compartilhmento podem ser colocados nos sites.

Blogs – Blogmarking
(Usados para Favoritar Blogs na web)

technorati_32Technorati - Social bookmarking especializado em blogs.

bloglovinboglovin’ – Marcador social para blogs, onde você segue aquele que se interessou e é avisado sempre que há um post novo, semelhante ao serviço de Feeds.

xanga_32Xanga

blogmarks_32BlogMarks

bloglinesBloglines

Blog Engage

Uêba – Divulga na sua maioria links de blogs cadastrados

Ocioso – Similar ao Uêba

Colmeia – Similar ao Uêba

Imagens

pinterestPinterest

flickrFickr

weheartitwe♥it

instagram Instagram

ffffoundFFFFOUND!

visualizeusvi.sualize.us


Vídeos

youtubeyoutube

vimeo vimeo

blip_32blip – É uma rede de links de séries


Redes Sociais

Não podemos esquecer das redes sociais que são sites de relacionamento muito importantes na divulgação do seu blog. Podem ser chamados de Sites de Social Networking.
twitterTwitter

facebookFacebook

google Google Plus

myspaceMySpace

linkedinlinkedin

orkutorkut


Feeds

Leia o artigo O que são feeds? que você vai entender a função social bookmarking que eles exercem.

Importante

Vocês já devem ter visto que o leitor de feeds Google Reader vai ser descontinuado.
Existem muitas opções de leitores de feeds na internet.
Aqui no TPV tem um artigo que ensina como utilizar o Feedly um leitor de feeds bem eficaz e forte candidato a substituir o GReader por ser fácil, com uma interface agradável e leve.



Seguindo este mesmo raciocínio encontrei esta classificação destes sites no post How Search-Like Are Social Media Sites?(Como são as pesquisas nos sites de social media) do site Search Engine Land.
» Social Notícias Sites(tais como Digg, Reddit, o Yahoo Buzz)
» Social Bookmarking Sites (tais como Delicious, StumbleUpon)
» Social Networking (tais como Facebook, MySpace, LinkedIn)
» Conhecimentos sociais (tais como a Wikipedia, Yahoo Answers)
» Partilha Social (tais como YouTube, Flickr, Twitter, Urban Spoon, ganir)

Ícones de Social Bookmarking para o seu Blog

Ícones de Social Bookmarking
Vários Social Media Icons Grátis
Ícones Sociais Refrescantes
25 Links com Lindos Ícones Sociais para o seu Blog
♦Artigos da Categoria: ICONES-SOCIAIS

Para Complementar o Conteúdo:
10 dicas de como promover seu site usando Social Bookmarking
Top 10 redes sociais mais acessadas no Brasil e no mundo
Por que Divulgar seu Conteúdo Pense nisso!
Buffer: bom substituto do Timely
Top 15 Most Popular Social Bookmarking Websites | January 2013
40 Most Popular Social Networking Sites of the World

Fontes:
♦ Além das inúmeras pesquisas no Google
BookMarking e Folksonomia - Puro Social Media Marketing!
Social Bookmarking-Informática Educacional

Coleção Cultura Digital-Série Mídias Digitais
♦Wikipedia


Este artigo foi originalmente escrito em julho de 2009 e atualizado em 20/01/2013.
Aproveite a Oportunidade e Comente este Post!
Esta também é uma forma de você Receber Clicks em seu Blog!
Principalmente se seu comentário for Inteligente e Procedente com o Assunto do Post!

Como Ativar a Função Descrição do Post no seu Blogger e para as Redes Sociais




O blogger está evoluindo muito, principalmente com relação as configurações para a divulgação dos seus blogs na web, os chamados recursos de SEO.

Um recurso muito importante é a descrição do seu blog (a meta tag description) que é o texto que aparece nos sites de busca embaixo do título. Uma descrição bem feita é a porta de entrada para visitantes em seu blog, faz com que se interessem por ele.

Antes do blog acrescentar o recurso de colocar a descrição precisávamos incluir a meta tag: <meta name=”description” content=”Descrição da sua página” /> diretamente no código fonte do blog.

Quando ativamos a descrição do blog na nova interface, ativamos também outra função interessante » a descrição de cada post individualmente, que é um recurso muito legal.

Esta descrição individual dos seus posts aparece quando você compartilha o post nas redes sociais como o Facebook e o Google Plus, sem que você tenha que ficar editando todas as vezes que compartilha.

Se você gostar deste artigo e quiser compartilhá-lo clicando em Share para o Facebook ou Google +, ali em cima logo abaixo do Título ou, quando terminar de ler.

A descrição que dei para ele aparecerá no seu link de compartilhamento e será esta:

Uma descrição bem feita é a porta de entrada para visitantes em seu blog, faz com que se interessem por ele.
Ative a descrição dos seus posts lendo este artigo.

Isso é ótimo para a divulgação dos seus posts.

Após ativar a função descrição do blog quando você vai criar o post as Configurações de postagens ficam como nas imagens abaixo. Com a opção da Descrição da Pesquisa.

Antes
Depois
Descrição04 Descrição05

Quando você coloca a Descrição da pesquisa no seu post ele aparece assim no site de busca:
Descrição do post


1º- Como Ativar a Descrição do Blog


Vá em Configurações » Preferências de pesquisa » Em Descrição clique em Editar Selecione Sim para Ativar descrição de pesquisa?
Descrição01 Descrição02

Escreva a descrição do seu blog no espaço reservado, em poucas palavras para não ficar cansativo.
Descrição03

2º Como fazer descrição dos Seus Posts

Ao criar o post nas Configurações de postagens você vai clicar em Descrição de pesquisa e adicionar a Descrição do seu post.

Quando seu post já foi criado você pode editar o post e atualizá-lo.

Clique em Editar Adicione a Descrição do post » Clique em Concluir » Clique em Atualizar
Descrição08 Descrição07

Compartilhe o seu post nas Redes Sociais

Faça o teste na hora de compartilhar o seu post. Se a descrição não aparecer é porque você tem a metatag description no código fonte do seu blog.

» Descobri isso tentando compartilhar meus posts e a descrição do post individual não aparecia, então fiz o que estou ensinando abaixo e deu certo.

Vá em Modelo » Clique em Editar HTML » Encontre a tag parecida com esta: <meta name=”description” content=”Descrição da sua página” /> desde que seja com o [name=”description”] e apague esta tag » Clique em Salvar Modelo e faça o teste para compartilhar o seu post.

Veja como fica o Compartilhamento do Link que Mostrei no começo deste artigo:

Descrição09

Uma Observação Importante

Se você estiver criando o seu post pelo Windows Live Writer publique-o como rascunho (veja a imagem abaixo) e lá no blogger faça a sua descrição como ensinei acima.

Clique em Postar rascunho no blog▼
Descrição10

Duas atualizações importantes

1ª Verificando se sua meta tag name='description' está funcionando
1- Encontrei no Gerenciando Blog uma explicação onde você visualiza o código fonte do seu blog e no código fonte procura pelas palavras [name='description'] usando o Ctrl+F, se você encontrar a descrição do blog na página inicial e a descrição do post quando visualizar o código fonte do post significa que funcionou.
Aprendi neste post também que, para visualizar o código fonte quando estamos usando o Chrome ou o Firefox é só usarmos o atalho Ctrl+U. (Amei isso)

2- Encontrei também um site onde você pode verificar se sua meta tag está funcionando:

Meta tag checker

Clique neste link e veja se sua meta tag description está funcionando.

2ª Se depois de tudo isso sua description não aparecer
Se nenhuma das descrições aparecem, é provável que seu modelo não contém o código necessário para importar a meta descrição do banco de dados do Blogger.
(Um template personalizado, muito alterado pode fazer isso).

Você vai ter que adicioná-lo ao manualmente:

Então vá em Modelo » Editar HTML » Encontre a linha <b:skin><![CDATA[ e cole o código abaixo acima desta linha.
Fonte 2ª Opção
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if> 

Estas atualizações foram motivadas pelo comentário do leitor David Soares.
Obrigada David

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger