Como responder (reply) comentários no Blogger

[Atualização 11/01/2012] Já não há mais necessidade do uso desse hack, pois o Blogger acabou de implementar os threaded comments, com esta função e outros recursos. Leia mais aqui sobre o novo sistema de comentários do Blogger.

Como estilizar o formulário de comentários

Não sei se alguns de vocês já notaram que eu consegui acertar a posição do formulário de comentários do blog? Lembram que a mensagem nos comentários e a caixa ficavam coladas a borda? Bem, eu só fui resolver essa questão quando conheci o blog do Fernando, o Randomness. O blog é escrito em espanhol, já que o Fernando é do Equador. O pior é que eu tenho trauma dessa língua. Não consigo entender nada e me dá um branco!

Dê-me qualquer coisa escrita em inglês que eu entendo na hora, mas a língua espanhola me trava por completo. Levei tempo para entender o artigo, mas consegui centralizar o formulário.
No artigo "Entendiendo el formulario de comentarios", o Fernando ensina como estilizá-lo da maneira que você quiser. Eu só queria mesmo é dar um jeito de centralizá-lo.



O Fernando cria uma div, com a class "comment-form" envolvendo todo o código do formulário, para achá-lo vá em Lay-out>>Editar HTML, marque expandir modelos de widget e procure por essa linha:

<b:includable id='comment-form' var='post'>

Em negrito, a class criada:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/>v/h4>
<p><data:blogCommentMessage/>v/p>
<data:blogTeamBlogMessage/>
va expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0'
height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>

Abaixo a parte do CSS que eu adaptei para o meu blog. A primeira parte relaciona-se com a caixa e a segunda com a mensagem do formulário:

div.comment-form{
width: 450px; /*definimos, em pixels, o comprimento da caixa, que pode variar de blog  */
margin: 0 auto; /*centralizando a caixa*/
padding: 0 auto;
}

div.comment-form p{
color: $mainTextColor; /*cor da fonte, no caso a cor é vermelha, */
font-family: 'Trebuchet MS'; /*tipo da fonte*/
font-size: 12px; /*tamanho da fonte*/
text-align: left; /*alinhamento do texto*/
}

O CSS deve ser colocado antes de

]]></b:skin>

O resultado pode ser visto abaixo:


Em tempo, implementei uma política de comentários e um código para quem quiser divulgar seu último link, créditos a Ro e ao Marcelo. Tentei até colocar o CommentLuv, mas não gostei do resultado final. Prefiro manter do jeito que está. Pelo menos meu blog está lá cadastrado e assim, ao visitar outros blogs que o utilizam, posso "linkar" as minhas postagens.

Como personalizar o widget dos seguidores

Update 01/03/2009: Com a integração dos Seguidores com o Google Friend Connect, esse hack não mais funciona. Vamos aguardar as novidades!

Há muito tempo eu queria personalizar o widget dos Seguidores do Blogger, colocando uma cor no background e talvez uma borda. Observando o código no template, tentei usar uma das class mas ela acabava alterando as propriedades dos thumbnails. Não há uma class ou id referente a toda caixa.
O autor do blog The Technical Thought Of You, entretanto, criou um código nesta página para personalizar o widget.

O código disponibilizado cria várias "class" que alteram os links, as imagens e é claro, o que eu queria, a aparência do widget. Analisando o hack, percebi que é só criar uma div com uma class diferente e depois no css, colocar os atributos que eu queria, tais como o background, border, padding e marging. Assim nasceu em minha mente a class "followerbox"!

Portanto, aqui vai o tutorial como eu fiz:

a) Antes de tudo, faça um backup de seu template!

b) O código css abaixo

.followersbox {
background: #eee ;
padding: 10px;
margin: 3px;
border: 1px solid #ff6600;
}

deve ser colocado antes de

]]></b:skin>

Explicando:

background: #eee; =>> Aqui eu defino a cor do fundo da caixa
padding: 10px; =>> A padding deve ser ajustada conforme as medidas de seu blog
margin: 3px; =>> A marging deve ser ajustada conforme as medidas de seu blog
border: 1px solid #ff6600; =>> Aqui defino a grossura, o tipo e a cor da borda que vai envolver a caixa


c) Marque expandir o modelo de widgets em Lay-out>>Editar HTML e localize essa linha:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'>

d) Acrescente a div que está em negrito:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'><div class='followersbox'>

e) Localize o final do código e antes de

</b:includable>

colocar </div>

Pronto! O widget dos seguidores está personalizado:


As alterações que fiz bastam para mim, caso queiram alterar por completo o widget, recomendo que siga o tutorial do The Technical Thought Of You na íntegra.

Feeds para marcadores do Blogger... é possível?

Ontem eu estava testando o template Tabs que a Áurea disponibilizou. Um dos fatores que gostei nesse template foram as abas (daí o nome Tabs, em inglês) e algo me ocorreu. Podemos utilizar os Feeds para criar widgets para os posts mais recentes e os comentários recentes. Pesquisando no Santo Google, encontrei o Canal 101, e lá vi as urls necessárias nesse post:

- Para as postagens recentes:

http://SEUBLOG.blogspot.com/feeds/posts/default

- Para os comentarios recentes:

http://SEUBLOG.blogspot.com/feeds/comments/default

Lá está passo a passo como se deve proceder. Mas o que eu queria mesmo era achar feeds para um marcador (label) específico, como por exemplo nos links que tenho na barra horizontal acima, assim poderia jogar tudo nas abas do template da Áurea. E não é que achei?
A brincadeira funciona assim:

- Se você tem um blog no blogspot, é só usar:

http://SEUBLOG.blogspot.com/feeds/posts/default/-/MARCADOR

Exemplo: http://crazyseawolf.blogspot.com/feeds/posts/default/-/humor

- Agora, se você hospeda um blog num servidor .com, use:

http://www2.blogger.com/feeds/BLOGID/posts/default/-/MARCADOR

O seu BLOGID pode ser encontrado quando você cria um novo post. Ele aparecerá na URL da barra desse jeito:

http://www.blogger.com/post-create.g?blogID=12345679

Assim, se sua URL for:

http://www.SEUBLOG.com/label/MARCADOR

Seu Feed será:

http://www2.blogger.com/feeds/12345679/posts/default/-/MARCADOR

- Se tiver espaços no nome do seu marcador, observe os exemplos abaixo, se for cachorros e gatos, teremos:

URL:

http://SEUBLOG.blogspot.com/search/label/CACHORROS%20E%20GATOS

Feed:

http://SEUBLOG.blogspot.com/feeds/posts/default/-/CACHORROS%20E%20GATOS

ou

URL:

http://www.SEUBLOG.com/label/CACHORROS%20E%20GATOS

Feed:

http://www2.blogger.com/feeds/12345679/posts/default/-/CACHORROS%20E%20GATOS

Essas dicas eu encontrei no Bloggerdesign, nesse post de 2007. Coloquei um exemplo lá embaixo, na coluna do rodapé do blog, com o marcador poema.

Como sempre, nem tudo são flores. Nos elementos de páginas do Blogger, só dá para configurar no máximo 5 postagens. Aí eu pergunto para os meus amigos e parceiros de plantão, entendidos em CSS e Scripts: Dá para alterar isso no Editar HTML do blog? Como?

Agora tenho estrelinhas!!!

Yeahhhhhhhhhhhhhh!!!

Ao som de A-Ha, Forever not yours e Duran Duran, The Reflex, seguindo o conselho passo a passo da Juliana, consegui colocar os Rating Stars no blog!!! Somente colocando os sons dos anos 80 eu sabia que minha cabeça iria esfriar e dar o primeiro passo.

Eu coloquei os códigos usando o painel antigo do Blogger, porque no Blogger in draft dava erro, algo relacionado com as tags. Será que isso tem algo a ver?

Falta agora a parte dos comentários, que teimam em não dar certo. A Aneesh até me ajudou a mexer no template mas mesmo assim não funcionou. Ela até mexeu no código, mas na hora de eu salvar, deu erro. Agradeço a ela pela paciência. Mas vou continuar tentando!!!
Pelo menos agora, vocês podem dar nota aos meus posts.

Não economizem estrelinhas, crianças!!!