Falaí pessoaaaaaal!
Tô ouvindo - pela centésima vez no dia
- Epiphany, do Johnny Depp (sim, o ator), que ele cantou no filme que eu amo Sweeney Todd. Nunca pensei que ele pudesse cantar tão bem.
- Epiphany, do Johnny Depp (sim, o ator), que ele cantou no filme que eu amo Sweeney Todd. Nunca pensei que ele pudesse cantar tão bem.
Contei que estou inspirada esses dias? Bom, estou tão inspirada que resolvi fazer um modelo bem diferente para comentários para vocês. Ficou bem diferente de todos que já vi, olhem um preview:
ficou realmente diferente, né? Nunca vi comentários com letras cursivas, mas é para isso que o Sonifera Girl serve, trazer coisa legais e diferentes.
Gostaram? Querem aprender a fazer? Então clique em "Leia Mais" !
<link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'>
2. Agora, procure por #comments { e apague até chegar em /* Widgets, mas não apague /* Widgets. Substitua toda essa parte que pagou pelo código abaixo:
******/ INÍCIO COMENTÁRIOS BY SONIFERAGIRL.BLOGSPOT.COM \******#comments {
background: #f5b2a9; /* Fundo da área do comentário */
-webkit-box-shadow: inset 0px 0px 50px #fe9587; /* sombra interna */
padding: 15px; /* espaço, não mude */
}
.comments .comments-content .comment-content {
font-family: PF Arma Five; /* Nome da fonte */
font-size: 8px; /* Tamanho da fonte */
color: #f390ae; /* cor da fonte do comentário */
background: #b8204e; /* cor do fundo do comentário */
box-shadow: inset 0px 0px 8px #d71b54, 0px 0px 5px #d71b54; /* sombras do comentário */
-webkit-box-shadow: inset 0px 0px 8px #d71b54, 0px 0px 5px #d71b54; /* sombras do comentário */
-moz-box-shadow: inset 0px 0px 8px #d71b54, 0px 0px 5px #d71b54; /* sombras do comentário */
outline-offset: -3px; /* Não mude */
outline: 1px dashed #f390ae; /* cor da linha pontilhada */
-webkit-border-radius: 2px; /* Arredondamento, não mexa */
-moz-border-radius: 2px; /* Arredondamento, não mexa */
-o-border-radius: 2px; /* Arredondamento, não mexa */
padding: 7px; /* espaço, não mude */
margin-top: -8px; /* espaço entre a margem de cima */
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
text-align: center; /* Alinhamento da frase */
font-family: 'Parisienne', cursive; /* Fonte da frase */
font-weight: normal; /* mude para bold se quiser em negrito */
font-size: 40px; /* Tamanho da fonte */
color: #b8204e; /* cor da frase "tantos comentários" */
}
#comments .comment-header {
height: 45px; /* tamanho da "faixa" */
padding: 5px; /* Não altere */
margin-top: 3px; /* Tamanho da margem */
background: #d60960; /* cor do fundo do nome da pessoa que comentou */
-webkit-border-radius: 3px; /* Arredondamento, não mexa */
-moz-border-radius: 3px; /* Arredondamento, não mexa */
-o-border-radius: 3px; /* Arredondamento, não mexa */
}
#comments .comment-header a{
color: #f0a6a0; /* cor da letra do nome de quem comentou */
font-size: 40px; /* Tamanho da fonte do nome de quem comentou */
font-family: 'Parisienne', cursive; /* Nome da fonte */
font-weight: normal; /* mude para bold se quiser em negrito */
}
#comments .comments-content .datetime a{
float: right; /* Flutuação do texto á esquerda */
margin-top: 4px; /* espaço da Margem de cima */
font-family: PF Arma Five; /* Nome da fonte */
font-size: 8px; /* Tamanho da fonte */
text-transform: uppercase; /* Transformação do texto, não mude */
color: #f0a6a0; /* cor da letra da data */
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
border: 1px solid #d60960; /* cor, tipo e espessura da borda do avatar */
padding: 2px; /* margem entre a foto e o comentário */
margin: .2em 0 0;
}
/* Comments */
----------------------------------------------- */
#comments a {
color: #d60960; /* cor do link "respostas" */
font-family: 'Parisienne', cursive;
}
.comments .comments-content .icon.blog-author {
position:absolute; /* posição absoluta */
top: 7px; /* Margem do topo, não mude */
right:200px; /* Deixa ele pra direita no cantinho, não altere */
margin:0; /* Deixe sem margem */
background-image: url("http://media.tumblr.com/18a780499c2a1a50d48ee30f026dce88/tumblr_inline_mj6f7nVZ231qz4rgp.gif"); /* Imagem indicando o autor */
width: 30px; /* Só altere se mudar a imagem */
height: 37px; /* Só altere se mudar a imagem */
}
.comments .comments-content .loadmore a {
}
.comments .comment-thread.inline-thread {
background: "transparent"; /* Background de alguma coisa, não altere */
}
.comments .continue {
}
.comments .comment .comment-actions a,.comments .comment .continue a{
float: right; /* Flutuação para a direita */
display:inline-block; /* Deixa ele em bloco alinhado, não altere */
margin: 5px; /* Margem */
padding:0 15px;
color:#d60960 !important; /* cor da fonte do botão */
font-family: 'Parisienne', cursive; /* nome da fonte */
font-size: 20px; /* Tamanho da fonte */
box-shadow: inset 0px 0px 8px #f68fbb, 0px 0px 5px #f68fbb; /* sombras do botão */
-webkit-box-shadow: inset 0px 0px 8px #f68fbb, 0px 0px 5px #f68fbb; /* sombras do botão */
-moz-box-shadow: inset 0px 0px 8px #f68fbb, 0px 0px 5px #f68fbb; /* sombras do botão */
outline-offset: -3px;
outline: 1px dashed #d60960; /* cor da linha pontilhada */
-webkit-border-radius: 2px; /* Arredondamento, não mexa */
-moz-border-radius: 2px; /* Arredondamento, não mexa */
-o-border-radius: 2px; /* Arredondamento, não mexa */
text-align:center; /* Alinhamento do texto no centro */
text-decoration:none; /* Deixa sem linha em baixo do texto */
background: #f478ac; /* fundo do botão */
height:30px; /* Altura do botão */
line-height:30px; /* altura da linha do botão */
font-weight:normal; /* deixa a letra em modo normal e não em itálico ou negrito... */
cursor:pointer; /* faz o cursor apontar com o dedinho da mãozinha, kkk */******/ FIM COMENTÁRIOS BY SONIFERAGIRL.BLOGSPOT.COM \******
Mude o necessário, está tudo explicado no código.
Espero que tenham gostado!
awnnnn, aprendeu direitinho *o* fico feliz em ter ajudado Nath-chan, ficou lindo esse modelo que você fez >w<
ResponderExcluirbreaking-doubts.blogspot.com.br
Brigada, linda!
Excluir