Intense Debate Sistema de Comentarios

Hoje eu descobrí o site Intense Debate que disponibiliza gratuitamente um sistema de comentários que parece ser excelente. Eu estive testando em alguns blogs e ainda estou 'fuçando' todas as opções e posso dizer que é o mais interessante sistema de comentários que já encontrei até agora.

Para utilizar é fácil, basta cadastrar-se (e-mail e um login) e você pode utilizar o serviço imediatamente. Comece digitando a url do blog em que deseja instalar o sistema. Você será levado para a página de instalação, onde terá duas opções:


A primeira opção (Widget) é a instalação do código como um widget na sidebar. Para tanto, primeiro vá em Configurações (no painel do seu blog) ->Comentários e, como mostra a imagem abaixo, configure para que novas postagens não tenham comentários:

Salve a modificação.

Feito isto, deixe a opção 'All new posts' marcada (na página do Intense Debate) e clique em Add Intense Debate to my blog. Escolha o blog (se tiver mais de um em sua conta) que deve exibir o sistema e salve.

Na segunda opção de instalação, que eu não recomendo principalmente para iniciantes, consiste em fazer uma cópia do seu template (Baixar Modelo Completo), depois fazer o upload do seu template no site do Intense Debate e em seguida copiar o código, já com a modificação. Não recomendo este sistema por dois motivos:

• O primeiro é tão simples que não tem por que complicar;
• Existe o risco de não copiar o código do seu template completamente e dar erro ao tentar salvar.

Mas, vai de gosto...

O que o sistema oferece:

• Gerenciamento total dos comentários: você pode moderar todos os comentários livremente, recebendo alertas por e-mail, como no Blogger.
• Como em um fórum, você pode responder à um determinado comentário, com citação.
• Você e seus leitores podem avaliar um comentário como negativo ou positivo e o comentarista soma pontos em seu perfil (como um karma negativo/positivo).
• Estatísticas dos posts mais comentados
• Possibilidade de comentar com OpenID
• Possibilidade de adequar a aparência dos comentários ao layout do seu blog
• Diversos Add -ons, como mostrar aos seus visitantes o número total de comentários no seu blog e de comentaristas, últimos comentários, Top 10 comentaristas, etc.

Estes são só alguns recursos que pude ver rapidamente, hoje.

Existe a possibilidade de importar e exportar comentários (uma versão beta) e eu importei os comentários de um dos blogs para ele mesmo (para não perder os comentários existentes). Como a página travou durante a transferência e eu fiquei insistindo, alguns comentários foram transferidos até 5 vezes repetidamente e outros sumiram. Preciso fazer novos testes.

Enfim, como contei no início da postagem, ainda estou xeretando as possibilidades e conforme descobrir mais coisas, posto aqui. O mesmo vale para vocês: agradeço comentários e dicas de quem se interessar em utilizar o sistema. De maneira geral ele me parece realmente excelente!

Read More

Borda com duas cores para imagens

Para adicionar uma borda com duas cores em uma imagem usando apenas CSS,
utilize este truque muito simples:

img{
border:6px solid #E9751F;
padding:4px;
background:#F3CB94;
}

Na verdade o que ocorre é que a 'segunda borda' surge quando o espaço criado
com padding recebe um fundo colorido (background).
Para colocar a 'borda dupla' em uma imagem hospedada no Blogger, depois de ter feito o upload, clique no modo HTML da postagem e adicione dentro de:

<img style="border:6px solid #E9751F;padding:4px;background:#F3CB94;"

As cores e larguras das bordas podem ser editadas livremente. Você pode colocar o valor hexadecimal que o blogger transforma em rgb automaticamente.


pescado no cssglobe

Read More

Destacando a primeira letra do texto

Para destacar a primeira letra de um texto como você vê aqui, acrescente no CSS do código do seu template (acima de ]]></b:skin>)

p.introduction:first-letter {
font-family: 'Monotype Corsiva', Times, Sans-Serif;
font-size : 350%;
font-weight : bold;
float : left;
width : 2em;
padding-right: 5px;
}

Salve a alteração. Quando escrever um novo texto, no modo HTML da postagem, acrescente:
<p class="introduction">texto aqui</p>

Você pode modificar livremente o tipo da fonte (font-family) não esquecendo apenas de escolher fontes que sejam comuns à todos os browsers. Você pode escolher quantos tipos de fontes quiser, contanto que separe os nomes por vírgula (o browser escolherá o primeiro que reconhecer da lista), nomes compostos entre aspas e finalize com um nome genérico, como Sans-Serif.

Read More

Retirando numeracao dos arquivos

Quando se opta por mostrar os arquivos do blog em uma lista simples, por padrão, o Blogger mostra entre parênteses o número de posts relacionados ao mês exibido, como na imagem:

Para retirar esta numeração, após ter inserido os arquivos na página, vá em Editar HTML, clique em Expandir Modelo de Widget e procure por:

(<data:i.post-count/>)

apague toda esta linha, visualize e se tudo estiver ok, ou seja, se a numeração tiver desaparecido, salve. Na realidade esta linha do código aparece tres vezes dentro da widget Arquivos e apagando as tres você estará eliminando a numeração de todas as opções de exibição de arquivos, seja em lista simples ou menu suspenso.

Read More

Ocultar mensagem 'Mostrar todas as postagens'

Muitas pessoas já me perguntaram como ocultar estas mensagens que aparecem acima das postagens quando fazemos consultas no blog (seja através de formulário de busca, seja por marcadores) e eu adiei um pouco esta pesquisa, mas agora descobrí como (talvez até todo mundo já saiba, não sei...)

Vá em Editar HTML (não é necessário Expandir Modelo de Widget) e acrescente esta linha acima de ]]></b:skin>:

.status-msg-wrap{display: none;}

display:none oculta qualquer elemento da página, assim sendo, basta descobrir a class ou div em que um elemento se encontra e acrescentar esta declaração à ele. Para esconder o link Assinar Postagens ATOM, por exemplo:

.feed-links {
clear: both;
line-height: 2.5em;
display: none;
}

Absolutamente só. :-)

Read More

Uma imagem para cada item da sidebar

Vou ensinar colocar uma imagem diferente para cada título da sidebar.

Após instalar na Sidebar as widgets (Elementos de Página, como listas de links, imagens, slide, etc,) vá em Editar HTML, e procure pelo trecho do código html da sidebar, onde estão os widgets que você colocou, como na imagem:

 

Anote o nome de cada id dos widgets (sublinhado em vermelho) e acrescente no código CSS, acima de ]]></b:skin>:

#id do widget h2{background: url(link da imagem) center left}

por exemplo:

#Image5 h2{background: url(link da imagem) center left;}

para alinhar a imagem à direita, coloque center right. Se desejar usar uma cor e imagem diferente para cada título, basta:

#Image5 h2 {background: #ccc url(link da imagem 1) center left}
#Image4 h2{background: #000 url(link da imagem 2) center left}

Você pode posicionar as imagens de outras maneiras também:
top left, bottom left, top right, bottom right.

Read More

Galeria de Imagens

Vou ensinar como colocar no Blogger esta galeria de fotografias (da autoria de Stu Nicholls) que, apesar do título, é bastante simples de editar. Não se esqueça de verificar os termos de uso na página.

Coloque no código do seu template, antes de ]]></b:skin>

#gallery {width:728px; height:380px; padding:10px; border:1px solid #333; background: #888; position:relative; margin: 30px auto 0;}
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

Eu editei o original (onde está em negrito) para centralizar a galeria na página.

Agora cole, depois de (ou antes, como preferir) <div id='content-wrapper'>

<div id='gallery'>

<b class='default'><img src='link da imagem' />
<span>This is the default image with some descriptive text</span></b>

<ul>
<li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
<li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
</ul>

</div>

Repetir a linha <li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
quantas forem as imagens utilizadas.

Onde está href="#" coloque o endereço da página que deseja linkar e os links das imagens onde existe indicação. Não há necessidade de editar dois tamanhos de imagens. Apenas não use imagens que ultrapassem as medidas da galeria (728px alt, 380px larg).

Para ver o resultado no meu blog de testes clique aqui.

Read More

Destaque textos em sites

Olha que interessante: no site Awesome Highlighter você digita o endereço de um página na web e através do serviço do site você pode destacar trechos de textos para os encontrar com mais facilidade depois. O ponteiro do mouse transforma-se num marcador e com ele você seleciona os parágrafos a serem destacados. Depois, clique em Done e o site lhe oferecerá um novo endereço onde a página aparece com a marcação feita. Você poderá enviar por e-mail ou mesmo para o Twiter, Delicious e Facebook.

Read More