HTML - Personalizando o link do 'x comentários'


O fofo do Thonn-kun me recomendou no blog dele *------------*

Yooo Minna o(*^▽^*)o

Hoje fiquei feliz quando uma menina do grupo kaorii.com me pediu para fazer uma skin para ela depois que ela viu uma que estava fazendo da Lucy Heartfilia, quase pirei, sei lá, não sabia que alguém iria gostar tanto a ponto de me pedir, como estou de férias eu aceitei. Você vão continuar curiosos por que eu vou excluir o blog de teste por que já apliquei no meu blog, é um blog de icons que eu tinha e quero voltar a fazer, por que eu to fazendo um monte de icons aqui e deixando eles pegarem sopa, preciso voltar a usar aquele blog, bem depois eu falo mais sobre esse assunto.

Enquanto eu fazia essa skin, eu tive algumas ideias malucas e acabei tendo que mexer numa parte do html e descobri muita coisa, mas não é? Pegar um blog de teste e ficar testando aquilo e isso só para ver o que cada um faz, cada parte daquele código faz, é bom para entender mais o código dos modelos, por isso me senti inspirada para fazer um tutorial para vocês, mas não sei se vai ser muito útil, por que eu usei o modelo Minima, e a maioria usa travel, eu o uso de vez em quando, é bem raro.

Esse tutorial serve para trocar aquele 'x comentários' que fica no footer-line ou header-line do post, apenas isso, mas não pelo css e sim pelo html. Você pode mudar para 'x recadinhos' se quiser, coisa que antigamente era fácil, mas como o blogger é todo bugado, essa função não funciona mais, pelo menos não funciona comigo, só consigo fazer direto pelo html mesmo -q

Bem, abrindo o html, procure pela tag '<span class='post-comment-link'>' vai encontrar essa código
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if>
</b:if>
</b:if>
</span>
Desculpem, meu quote tá uma bosta -q

Então, explicando as partes destacadas, a primeira, dá para perceber que é um link, esse é o link dos comentários, normalmente é a url do post mais aquele #comment-form. Se quiser pode retirá-lo, não se esquecendo que tem o fechamento do link, que é o </a> que também está destacado. Também podem por um tooltip colocando antes do '>' um 'title="O que quiser"'.

A segunda parte é onde mechemos no 'x comentários', tem duas tags destacadas, ambas começando com '<data:top', a diferença entre ela é que a primeira é singular e a segunda é no plural, mude-a como quiser.

Fiz alguns modelos, para também entenderem melhor como isso funciona, por que se for pela minha explicação, coitado de vocês -q Só substituir o <a... até o </a>
Obs: A parte que eu destaquei na preview, é a que vai ficar linkada e a que eu destaquei no quote é o tooltip
<b:if cond='data:post.numComments == 1'>1 comentário<b:else/><data:post.numComments/> comentários</b:if><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title="Poste um comentário"> +</a>
Preview ~ 1 comentário +
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title="Comente também"><b:if cond='data:post.numComments == 1'>1 alpaca comentou<b:else/><data:post.numComments/> alpacas comentaram</b:if></a>
Preview ~ 1 alpaca comentou
Poste um comentário <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> + </a>
Preview ~ Poste um comentário +

Acho que agora deu para entender um pouco melhor, eu posso tirar qualquer dúvida nos comentários ou pelo meu face ;3
E me desculpem, sou muito ruim com tutoriais, se um dia eu melhorar, talvez eu o refaça, mas é que eu não achei outro jeito de explicar, acho que é por que eu sou muito "Isso é aquilo, este é assim e esse é assado, agora pega o assim, misture com aquilo e vai ter um assado!"... Drogas? Um pouco -q

Falei lá em cima, mas quero agradecer de novo ao Thonn-kun, do O Perfeccionista por que ter recomendado-me, me deixou bastante feliz >,<
Agora vou indo, jaa ~ (∩_∩)


Marcadores: ,

24 comentários
Podem comentar a vontade, só não esqueça de deixar o nome ou o link do blog para visitá-los também ^^

Blogger Lancea ♥   11.12.13
Adorei o tutorial *U* Está tão bem explicado <3
Eu já sabia modificar os títulos, já tinha aprendido há uns tempos atrás, na verdade! ^^ Só não mudo no meu porque acho o título de somente "comentários" mais direto e tudo mais. :P

Até breve ~ ^^
Catching Stars
Blogger Thonn-Kun   11.12.13
Olá! Estou até pirando aqui. Quando as pessoas me chamam de fofo eu desmorono - acho tão kawaii. Nem precisa agradecer nada, viu! Pois seu blog mereceu estar lá. Eu acredito que também não sou bom com tutoriais, mas quando quero explicar eu faço, pois ás vezes alguma pessoa possa estar precisando...Eu já procurei muitas vezes por este tutorial, encontrei vários, mas nunca consegui de fato fazê-lo, acho que o que faltava era o modelo Minima, mas já encontrei ele, depois vou ver se consigo, aliás com certeza vou, pois explicou tudo muito bem. Chu ~♥

O Perfeccionista

PS: O que é um skin? Desculpe a pergunta, mas não sei o que é um...
Blogger H. Haley   11.12.13
Domo >,<
É, já suspeitava que você já soubesse -q'
E entra no face ;w;
Blogger H. Haley   11.12.13
De nada, também desmoronei com o que você disse sobre mim e sobre o meu blog ^o^
Eu já tinha encontrado bastantes também e não achava um que funcionasse, só funcionou assim mesmo no modelo minima : 3

Skin é a mesma coisa que tema para site de internet, acho um nome mais bonitinho -q
Blogger Hari Stars   11.12.13
SKIN? OMG Que inveja *-----*
Ah é! Eu vi seu blog lá, no blog do Thonn-kun, ele é mesmo um fofo ~
Eu também faço isso de testar os códigos, achei que eu fosse muito maluca por causa disso, e não me sinto mais Forever Alone no mundo o/ -nossa-
Eu já sabia do tutorial u.u
Você explica muito bem parabéns por isso o/
Blogger H. Haley   11.12.13
Domo, domo, domo *, u ,*
Ah, Hari-chan, qual é o seu blog? o3o
Blogger Baka Hina   11.12.13
Eu não tenho blog ainda não, gosto de fazer Layouts e depois faço backup deles -qq
Sou viciada em fazer Lays *--------*
Blogger H. Haley   11.12.13
Ah, um dia deixe-me ver >,<
Blogger Matheus Malaman   12.12.13
Adorei o post, está muito bem explicado, sucesso com o blog, bjs

http://stroke-of-insanity.blogspot.com.br/
Blogger Lancea ♥   12.12.13
Nyaa, quero sim me afiliar *u*
Já te coloquei <3

Catching Stars
Blogger Lô Chan~   12.12.13
adorei o tuto da um efeito bem legal no blog ><

Kissus ~* || louca-por-html.blogspot.com.br ^^
Blogger Eloísa Bulhões   12.12.13
É um tutorial super útil, as vezes me perco mexendo principalmente nessa área dos comentários porque é um ponto que não me importo muito.. Mais parabéns pelo tuto, você ensina bem *o*

Eloísa do Having Cherry || Aguardo sua visita
Blogger - Moon ▽   12.12.13
É um tutorial bastante útil, as vezes eu nem mexo muito nos comentários, porque acho eles razoavelmente chatos e é a parte de mexer em html que menos entendo .-. Kiss, Radioactive
Blogger Ingrid :3   12.12.13
Você explica bem sim, eu achei u3u Acho esse tutorial muito útil, apesar de não mudar por preguiça eioeioeio
Amei seu layout, e o nome do blog <33 to seguindo, beijo *3*
@illhelpyou
Blogger Gaby Lima   12.12.13
ótimo tutorial, mas e a preguiça? kkkk
Um beijo
http://bombasticmusics.blogspot.com
Blogger H. Haley   12.12.13
Domo *,,*
Blogger H. Haley   12.12.13
Adicionei-te também ^^
Blogger H. Haley   12.12.13
Concordo ^^
Blogger H. Haley   12.12.13
Domo >,<
Blogger H. Haley   12.12.13
Eu sou muito fresca, gosto de tudo certinho -q
Blogger H. Haley   12.12.13
Domo, preguiça forever -qqqq'
Domo² >,<
Blogger H. Haley   12.12.13
AUSHAUSHAUAUSHAUSHAUSHAUSHAU '
Verdade -q'
Blogger Tayb   14.12.13
Legal, super útil este tutorial, pelo blogger pelo menos no meu não dá para mudar mais '-'

Abraços ♥ |  www.tutoriar.net
Blogger H. Haley   14.12.13
Verdade, blogger bugado e3e

Postar um comentário

Assinar Postar comentários [Atom]