Fala galera depois de muito tempo voltei a postar, hoje eu vou falar um pouco de CSS Sprite. É muito simples usar ele mas muitas pessoas tem dúvida de como usar, então vamos começar.

Primeiro de tudo vamos criar uma imagem, por exemplo eu vou fazer um menu bem simples no photoshop com os itens “Home – Quem Somos – Localização -Contato”.

Um toque para vocês sempre crie os itens com a mesma altura para facilitar depois o desenvolvimento, bem depois de criada a imagem vamos para a parte de html, vamos criar a base do que será o menu com <ul> e <li>.

<ul>
	<li><a title="Home" href="#">Home</a></li>
	<li><a title="Quem Somos" href="#">Quem Somos</a></li>
	<li><a title="Localização" href="#">Localização</a></li>
	<li><a title="Contato" href="#">Contato</a></li>
</ul>

Vamos para a parte de css o nosso menu vai começar aparecer, primeiro vamos sumir com os marcadores padrão do <ul> e depois vamos colocar os estilos na <li> e no <a> você vão ver que o estilo li e a estão juntos mas tem uma virgula separando os dois porque da virgula para quem não sabe ela quer dizer que a tag <li> e a tag <a> vão ter o mesmo estilo.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
</style>

Agora já está quase chegando a parte mais divertida do CSS Sprite vamos colocar a imagem de background do <a> e colocar as posições da imagem de cada link, primeiro de tudo vou colocar o background para todos os <a> vocês vão ver que ele vai aparecer para todos os links mas é assim mesmo fica tranquilo que vai funcionar.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
	a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}
</style>

Vamos voltar para a parte de html e colocar classes diferentes para cada <a> para nos colocarmos a largura e a posição de background de cada link.

<ul>
	<li><a class="home" href="#" title="Home">Home</a></li>
	<li><a class="quem-somos" href="#" title="Quem Somos">Quem Somos</a></li>
	<li><a class="localizacao" href="#" title="Localização">Localização</a></li>
	<li><a class="contato" href="#" title="Contato">Contato</a></li>
</ul>

Para finalizar este tutorial vou explicar como funciona o background-position vocês vão ver que ele tem dois zeros “0 0” o primeiro zero é para a posição horizontal da imagem e o segundo zero é para a posição vertical da imagem vocês vão ver que o segundo zero sempre será 0 ou -40px é porque na posição normal do link “off” ele será 0 e na posição hover ele será -40px porque a minha imagem tem 80px de altura e a metade é 40px assim quando a posição for hover ele vai dar -40px do background atual assim mostrando a imagem hover, deixa eu mostra na prática para vocês entenderem melhor.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
	a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}

	a.home{width:77px; background-position:0 0;}
	a.home:hover{background-position:0 -40px;}

	a.quem-somos{width:138px; background-position:-77px 0;}
	a.quem-somos:hover{background-position:-77px -40px;}

	a.localizacao{width:122px; background-position: -215px 0;}
        a.localizacao:hover{background-position: -215px -40px;}

	a.contato{width:90px; background-position:-337px 0;}
	a.contato:hover{width:90px; background-position:-337px -40px;}
</style>

Agora vou explicar o que fiz, eu coloquei a largura em todos os links vocês descobrem o tamanho usando o photoshop dando ctrl+t na imagem de cada botão irá mostrar o tamanho no box “informação – info” mas eu dei mais 1px na imagem para deixar uma linha branca para separá-los, agora para o background-position você descobre com a ferramenta “Marquee Tool” ou “tecla M” ai vocês pegam a distância da inicio da imagem até o inicio do botão.
Pronto agora nosso menu está finalizado, pode aparecer um pouco complicado no inicio mas depois vocês vão ver que é muito facil é só praticar, vou deixar o psd dos botões junto com o html para para download para vocês terem como referência, por favor deixem dúvidas ou sugestões, obrigado pessoal até o proxímo post.

Exemplo: Visualizar
Arquivos: Download

Olá pessoal… hoje eu vou explicar um pouco sobre Tabela Semântica, esse post vai ajudar muito o meu amigo Alex que trabalha comigo lá na Mundo Click e também espero ajudar muitas pessoas que tem a mesma dúvida que a dele, então chega de papo e vamos começar o que interessa.

Bom primeiro eu vou mostrar como era uma tabela antiga sem semântica:

TITULO 1
TITULO 3
TITULO 3


TEXTO 1
TEXTO 2
TEXTO 3


RODAPÉ 1
RODAPÉ 2
RODAPÉ 3

Como vocês podem ver eu fiz uma tabela muito simples de 3 colunas , só para quem ainda não conhece eu vou explicar para que serve cada TAG.

<table> – A tag TABLE é o corpo da tabela dentro dela que vocês colocam todos os dados, ainda nele tem varias propriedades que podem ser integradas como cellpadding e cellspacing essas duas propriedades servem para tirar o espaçamento padrão que vem na TAG table e ainda tem várias propriedades que podem ser utilizadas.

<tr> – A tag TR ela sempre vem depois da TABLE porque ela é responsável de criar as colulas da tabela.

<td> – A tag TD ela é a celula da tabela é o lugar onde você o conteudos.

Agora é montar uma tabela seguindo as regras de semântica:

TITULO 1
TITULO 3
TITULO 3




RODAPÉ 1
RODAPÉ 2
RODAPÉ 3




TEXTO 1
TEXTO 2
TEXTO 3

Dá para ver como muda bastante mas estruturamente é a mesma mesma tabela somente o “ROPAPÉ” que mudou de lugar para ficar mais simples de entender eu vou explicar cada uma. As tags TABLE, TR, TD continuam mas agora adicionamos mais 4 tags e uma propriedade na tag TABLE.

SUMMARY – Essa propriedade serve para colocar “nome/titulo” da sua tabela.

<THEAD> -  essa tag é muito importânte porque nela que vai o cabeçalho da sua tabela.

<TFOOT> -  essa tag também é importate mesmo colocando ela abaixo da THEAD ela sempre vai ficar no rodapé da sua tabela.

<TH> -  essa th só funciona dentro da THEAD e TFOOT e o padrão dessa tag é negrito e centralizado.

<TBODY> – como o nome dela já diz ela é o corpo da sua tabela dentro dela podem ser colocadas as tags TR e TD.

Espero ter ajudado mas se vocês tiverem muitas dúvidas é só deixar um comentário ou mandar um email “chrdesigner@chrdesigner.com” que eu respondo até a proxima.

- Visualizar Exemplo

- Download do Arquivo

Olá pessoal fazia um tempo que eu não colocava nada sobre WebDesigner aqui no meu blog. Outro dia eu estava dando uma olhada e vi que a Ana postou no twitter dela falando que as pessoas quando recortão só pensão em um browser ai eu respondi “Para isso que existe CSS Condicional” então decidi fazer um post sobre isso. CSS Condicional para IE 6, 7 e 8. “na minha opinião o IE 6 deveria ter morrido faz tempo e também não tem browser melhor doque o FireFox“

Então vamos começar o que interessa eu criei um HTML bem simples com uma class chamada “padrao” em cada DIV.

<div class=”padrao”>CSS PADRÃO – VISUALIZADO NO FIREFOX</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 6</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 7</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 8</div>

depois de criada as DIV’s agora nós vamos criar um css chamado “padrao.css” e colocar ele dentro de uma pasta chamada css “eu gosto de sempre separar por pastas as coisas, tipo”css, js, imagens, etc’  ficá muito mas fácil de achar depois “

.padrao{
width:120px;   /*determina a largura da div*/
height:160px;   /*determina a altura da div*/
background:#ededed;   /*determina a cor do fundo da div*/
float:left;   /*determina que a div vai ficar a esquerda*/
border:1px solid red;   /*determina uma borda de 1px de largura na div*/
margin:10px;  /*determina que a div vai ficar 10px de distância do topo, da direita e esquerda e do rodapé*/
font-family:Arial;   /*determina a familia da fonte como Verdana, Tahoma, etc…*/
font-size:11px;   /*determina que a fonte vai ter 11px de altura*/
text-align:justify;   /*determina que a fonte vai ficar no modo de formatação justificado*/
padding:10px;   /*determinada que o texto vai ficar a 10px de distância das bordas da div que ela se encontra*/
}

depois que criado o arquivo padrao.css vamos chamar o css na página desejada, antes de fechar a tag “</head>” vamos colocar a tag “<link>”

<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />

mas presta muita atenção no caminho do CSS se você estiver com dúvida qual o caminho certo é só prestar atenção no nome da pasta e do arquivo onde ele se encontra, o meu está na pasta CSS e com o nome padrao.css  -  ” href=”css/padrao.css” “

Depois que estiver tudo OK vamos colocar os IF’s para os IE’s eles vão abaixo do

“<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />”

que acabamos de colocar, primeiro eu vou colocar do IE 8 e também já criei o arquivo css com o nome ie8.css na pasta CSS.

<!–[if gte IE 8]>
<link rel=”stylesheet” href=”css/ie8.css” type=”text/css” />
<![endif]–>

eu fiz uma pequena alteração no css padrão que criamos primeiro só para ver funcionando, mas a class ainda é .padrao no css, porque esse IF ele funciona assim, ele compara os dois CSS ele vai checando linha por linha do css se ele vê que você alterou alguma coisa ele automaticamente já pega as propriedades do novo atributo que determinamos no novo css… mas tem que ter o mesmo nome de class senão ele vai pensar que é outra coisa e vai passar direto, da uma olhada como ficou.

.padrao{
background:#F17447;
border:1px solid #AD6B00;
}

se vocês perceberam eu só coloquei os atributos que eu alterei porque não tem necessidade de manter os atributos se são iguais.

Para finalizar eu vou colocar o IF do IE 7 e do IE 6:

<!–[if IE 7]>
<link rel=”stylesheet” href=”css/ie7.css” type=”text/css” />
<![endif]–>

<!–[if lt IE 7]>
<link rel=”stylesheet” href=”css/ie6.css” type=”text/css” />
<![endif]–>

vocês vão perguntar porque os dois estão escritos IE7 mas se prestar atenção no IF do IE6 tem um ” lt” o que isso significa, o lt é uma abreviação de “less than” isto é que esse if só vai funcionar se for “menor que o IE7″ .

para os CSS eu vou alterar só o background e a borda, criei um arquivo para cada um dentro da pasta css com os nomes:

ie7.css

.padrao{
background:#FFFBCC;
border:1px solid #E6DB55;
}

ie6.css

.padrao{
background:#94E2FF;
border:1px solid #464646;
}

Para que vocês tenhão uma idéia melhor de como ficou acessem do seu FireFox, IE 6, IE 7 e o IE 8 pra ver como que ficou as DIVs. Qualquer dúvida é só deixar um comentário que eu respondo o mais breve possível.

Visualizar -> CSS Condicional para IE 6, 7 e 8

Download -> CSS Condicional para IE 6, 7 e 8

E ai pessoal semana passada eu estava ajudando a Patricia uma menina que trabalha na Lógica Digital na parte de recorte, ela pediu uma ajuda minha para fazer um Moving Boxes precisava que a imagem ampliar-se sozinha mas com uma imagem de fundo não dava certo então eu fiz em css mas as bordas arredondadas mas não pegava no IE então eu fiz umas pesquisas no google até que eu achei o site html remix, então eu resolvi deixar postado aqui para ajudar todo mundo que tem essa mesma dúvida e também para que eu não esqueça mais.

Nessa primeira imagem se vocês clicarem nela vocês vão ver a primeira versão, nessa só funciona no FireFox e no IE não pega a borda arredondada por causa do “style:  -moz-border-radius“ não funciona no IE:

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e não funciona no IE

Nessa segunda imagem se vocês clicarem nela vocês vão ver que está funcionando no FireFox e no IE também eu tive que adicionar um “style: behavior“ nela eu chamo um documento .htc para emular o “-moz-border-radius” no IE.

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e no IE

E ai pessoal, esse post vai ser dedicado ao Alex um amigo meu que trabalha comigo na Lógica Digital,  sempre que vai começar um recorte do zero ele tem muitas dúvidas de como iniciar. Ele não sabe como as DIVs tem que ficar e toda vez eu explico mas agora se ele perguntar para mim eu vou mandar esse link para ele…hahahaha….

Vamos lá então primeiro tem que ter algum editor de HTML eu uso o Aptana aqui em casa mas na Lógica eu uso o Dreamweaver mas se vocês não quiserem instalar nenhum desse software pode usar o NotePad do Windows mesmo.

Abaixo tem um modelo de HTML crú:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

</body>
</html>

Agora eu vou colocar as DIVs:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

<div>TOPO</div>
<div”>LATERAL</div>
<div>CONTEUDO</div>
<div>RODAPE</div>

</body>
</html>

Agora para finalizar vou colocar as IDs nas DIVs e lembrando que nunca pode ter duas IDs com o mesmo nome senão não valida o seu código, vou colocar mais uma DIV que e a “container” que nele vai o css para determinar a largura do site e vou adicionar o css na pagina mesmo “<style type=”text/css”>”:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>

<style type=”text/css”>
*{margin:0; padding:0;}
#container{width:998px; margin:0 auto; text-align:center;}
#header{float:left; width:996px; height:40px; border:1px solid black;}
#nav{float:left; width:98px; height:100px; border:1px solid blue;}
#content{float:left; width:896px; height:100px; border:1px solid red;}
#footer{clear:both; height:40px; border:1px solid black;}
</style>

</head>
<body>

<div id=”container”>
<div id=”header”>TOPO</div>
<div id=”nav”>LATERAL</div>
<div id=”content”>CONTEUDO</div>
<div id=”footer”>RODAPE</div>
</div>

</body>
</html>

Visualizar o Exemplo
Download do Exemplo

Um post muito interessante que eu li no Tableless e achei importante postar aqui no meu blog, então vamos começar intender um pouco sobre Web Semântica.

Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não somente seres humanos possam entendê-la, mas principalmente máquinas. Disse principalmente máquinas, porque elas nos ajudarão, de fato, em tarefas que hoje, invariávelmente temos que fazer manualmente.

Imagine a situação abaixo e entenda melhor:

Você precisa fazer uma viagem as pressas para a Tailândia, então você pede ao computador encontrar uma companhia aérea que siga as seguintes restrições: que tenha um voo para a manhã seguinte na classe econômica e seja a companhia com o preço mais barato.
O computador, em poucos momentos lhe fornece o resultado da busca com a companhia que melhor se encaixa nas medidas impostas. Depois disso, você apenas tem o trabalho de reservar seu lugar.

A Web Semântica é uma evolução da nossa web atual. Com as informações devidamente organizadas, fica fácil de criar sistemas e robôs de busca mais inteligentes e ágeis. A nossa web de hoje, é uma web que apenas humanos entendem as informações disponíveis. Com a Web Semântica, as máquinas compreenderão essas informações e assim, poderão nos auxiliar em tarefas corriqueiras, que antes eram feitas manualmente. Atualmente é extremamente complexo fazer um sistema que leia e entenda de maneira sensata qualquer informação que a web provê.

A Web Semântica incorpora significado às informações da web. Isso proporciona um ambiente onde máquinas e usuários trabalhem em conjunto. Tendo cada tipo de informação devidamente identificada, fica fácil para os sistemas encontrarem informações mais precisas sobre um determinado assunto.

Então, o ambiente de que estamos falando, terá informações devidamente identificáveis, que sistemas personalisados possam manipular, compartilhar e reusar de forma prática, as informações providas pela Web.

Tente imaginar como o Google seria mais preciso em suas buscas se toda a informação da web estivesse organizada de uma maneira sensata, ou o que os calendários como do Yahoo! poderiam fazer se você agendasse uma viagem: 2 dias antes – ou no momento que desejar – ele te avisaria que as passagens da companhia aérea que você usa freqüentemente já foram compradas e sua reserva já foi efetuada no hotel que você costuma ficar quando visita aquele determinado local.

Referência: Tableless

Esse video foi desenvolvido pela Lógica Digital para mostrar mais sobre o que é SEO? Hoje em dia é muito importante esse assunto para deixar seu site no topo dos Sites de Busca…

Como eu sou novo nesse papo de SEO eu ando pesquisando muito em vários sites como Mundo SEO, Brasil SEO e vários outros. O mais importante no SEO é sabe como estruturar um Site corretamente nesse post vai ter as principais técnicas do que devemos saber.

1. Defina o tema do site.
Através do tema será possível escolher o melhor design, títulos, meta tags e conteúdo para o site. Atente para títulos e meta tags que devem ser diferentes para cada página, isso parece lógico, mas muita gente esquece disso. Outra coisa é não repetir conteúdo. As ferramentas de buscas possuem algoritmos que verificam a existência de conteúdo duplicado em suas páginas.

2. Trabalhe com texto de âncora em seus links.
Texto de âncora (Ancor Text) é a palavra ou frase usada como link na sua página. É importante trabalhar esse texto de âncora usando palavras-chave, pois ele está diretamente relacionado com a página a qual está relacionada.

3. Mantenha o usuário no site.
Sites feitos de qualquer jeito, mal organizados e com apresentação ruim, podem fazer com que um possível usuário nem navegue seu site. Portanto, ao criar ou otimizar um site, não esqueça de verificar se seu design é moderno, chamativo e se está bem feito.

4. Use as tags H1, H2 ou H3 para definir títulos e subtítulos.
É fundamental estruturar o conteúdo de forma correta.

5. Posicione suas informações de forma a facilitar a visualização do usuário.
Conteúdo ou informações posicionadas de forma errada podem fazer com que o usuário não as encontre. Isso faz com que ele acabe desistindo de navegar o site. Então evite que aconteça isso, faça um estudo de usabilidade para a construção do seu site.

6. Evite formatações in-line nas páginas.
Use um arquivo CSS para separar o código da formatação. Isso ajuda manutenção e deixa o código mais limpo.

7. Problemas com navegadores diferentes.
Atualmente, existem no mercado vários navegadores diferentes e cada um deles faz a leitura e interpretação de suas páginas de maneiras diferentes. Portanto, faça um teste com suas páginas em alguns navegadores com configurações e resoluções da tela para testar a sua compatibilidade. Recomendo verificar as páginas no IE (Internet Explorer) e Firefox que são os navegadores mais usados atualmente.

Referências: Mundo SEO e Brasil SEO

No outro dia eu e o Marcelinho estávamos converçando sobre esse assunto ai resolvi dar uma pesquisa sobre oque é “Black HAT” ai eu achei esse post no site Mundo SEO muito bom. Basicamente há 3 técnicas-chave dentro do SEO:
White Hat SEO: Técnicas permitidas que realmente otimizam seu site deixando-o mais atraente pelos mecanismo de busca.

Gray Hat SEO: Técnicas de procedência duvidosa, embora não sejam consideradas técnicas de Black Hat, atuam no limiar. O uso excessivo das mesmas pode levar a punição pelos mecanismos de busca.

Black Hat SEO: Técnicas de Otimização de sites mal vistas pelos mecanismos de busca. Embora tragam resultados a curto prazo para o seu site, mais cedo ou mais tarde este será penalizado pelas search engines.

Vamos tratar neste post, algumas técnicas de Black Hat. Desaconselhamos ao extremo o uso das mesmas, porém é importante ter consciência, para eventualmente evitá-las. Pois quem nunca teve uma idéia genial de subir o rankeamento do site rapidamente, não é mesmo? Então é bom ter noção de como poderá ser penalizado pelo uso da mesma!

As principais técnicas black hat são:

Keyword Stuffing: Basicamente é um spam de palavras-chave ( keywords ) durante todo conteúdo da página.

Invisilbe Text: Técnica em que deixa o texto escondido, camuflado com a mesma cor da página de fundo. Assim fica imperceptível ao usuário porém relevante ao mecanismo de busca. Geralmente usam palavras-chaves mais visadas sem relação com o texto.

Cloaking Page: Finalidade de exibir páginas distintas para as search engines do que para os usuários normais. Direcionam o acesso checando o IP ou o navegador do visitante.

Doorway page: Semelhante a Cloaking Page, porém ao invés de utilizar do navegador ou o IP do usuário, utilizam de javascript, meta ou ocasionalmente de cliques feitos pelo mesmo.

Link Farms: Processo onde várias páginas são criadas em sites distintos e nelas há vários links apontados mutuamente. Ou mesmo uma única página apontando para várias outras. Este processo de troca de links não é bem vista e passiva de punição.

Over-Submitting: A utilização de ferramentas de divulgação que constam de processos automáticos, pode levar envios redundantes ao mesmo local, e desta forma são considerados spam.

Duplicated Content: Sabe-se a relevância que os mecanismo de busca dão a unicidade da informação apresentada, então é necessário tomar cuidado para evitar conteúdo duplicado da mesma.

Misrepresenting Content: É mostrado um conteúdo diferente do que a página deveria mostrar. Desta forma tenta enganar o usuário, que buscaria tal informação e tem uma surpresa.

Referência: Mundo SEO

Com o lançamento do WordPress 2,7 paged comments tornou construído em um recurso. Por padrão, eles são ativados em ambas as novas instalações e atualizações. Onde ele pode ser bom para a usabilidade, pode não ser bom para SEO.

De uma perspectiva usabilidade, paged comments que são bons lugares para obter uma série de observações. Por padrão, o WordPress corta-las em 50 comentários por página. Os usuários, então não temos de esperar por mais de 100, ou até 1000, comenta a carregar. Sim, eu já vi lugares com mais de 1.000 comentários. O tempo que leva para uma página com muitas das observações a carga pode ser muito maior do que o utilizador está disposto a esperar. Quebra-los em páginas acelera página carga tempo e torna o site mais amigável.

De um SEO vista, paged comments podem dificultar a postagem. Com paginável comentários, cada página tem um URL separado e do próprio posto é duplicada entre cada página. Isto pode causar problemas conteúdo duplicado e visitantes do site poderão ser introduzidos na página 3 comentário de uma postagem. Idealmente, eles entram em todos os principais pós página.

Um blog proprietário poderia bloquear comentar páginas dos mecanismos de pesquisa, mas o conteúdo a ser criada pelos comentários na página dois + então não pode ser usado para ajudar a impulsionar o tráfego para o cargo. Os comentários são realmente uma ótima maneira de obter os usuários criem conteúdo adicional para um blog e não queremos que a solta.

Então, qual é a melhor solução? Minha recomendação seria configuração paged comments e colocar 100 comentários por página. Dessa forma, você precisará de um primeiro lote de comentários em uma postagem individual antes de comentar páginas começam a aparecer. Quando você tem mais de 100 comentários e, em seguida, o foco deveria ser mais sobre usabilidade, uma vez que é bastante óbvio que o lugar é muito popular. , Poderá haver ainda algumas implicações SEO, mas por esta altura, os usuários são mais importantes.

Se você ainda quiser ter paginado comentários, e estão preocupados que o SEO implicações são grandes para a ignorar e, em seguida, check-out Pressed Words’ SEO for Paged Comments plugin. Eu não tentei isso sozinho, mas ele alega que ponha pós cantadas em todas as páginas do comentário e apenas mostrar o post completo sobre os principais post URL. Esta parece ser uma solução lógica.

Há um monte de usabilidade vs SEO debates lá fora. Cada um deve ser tomada numa base caso-a-caso e a verdadeira solução é até o proprietário do site. No caso dos comentários paginado, colocando 100 comentários por página e, em seguida, criar paginável comentários, é a melhor solução, como usabilidade vitórias fora, neste cenário, em minha opinião.

Referência: Blogger Design