14 outubro 2013

Estilo para Área dos Comentários

Untitled

E ai pessoal^^ eu não posto faz bastante tempo, mas não se preocupem. Nesses ultimos dias estou conseguindo ver bastante animes e logo irei postar aqui =3 também tem outras coisas mas deixarei para falar depois. A postagem de hoje é sobre como personalizar a area da postagem do blog. Esse tutorial foi pedido por, e ele só é para o código do modelo de comentários que estou usando agora. Lembrando que ele só foi testado no modelo Viagem/Travel do Blogger. Exemplo:





Legal, né? Esse que estou usando no momento. Aproveitando para responder aos comentarios da imagem, Mari, sim, vou participar da campanha, mas vou reeditar o gif se você não ligar^^ e Nanda, valeu XD eu sou meio paranoica com detalhes, ainda mais do blog, mas até eu tenho que confessar que esse layout fico bem bonitinho, mas só por que tem o Gamzee nas imagens =w=


O código para modelo é o de baixo, marcarei as parte que podem mudar. Ah, você não gostou do modelo? Tudo bem, da pra ajeitar alguns detalhes.

Créditos ao Go Imagine ^^





Primeiramente va no seu modelo do blog, e procure por ]]>
, ACIMA de ]]> cole o código abaixo.

/**=========== AREA GERAL DOS COMMENTS ===========**/
.comments{
width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post, diminua*/
margin:0 auto;
font-style: normal !important;
font-size: 12px !important;
font-family: Verdana !important;
background: url(AQUI FICARÁ A IMAGEM DE FUNDO, NO MEU CASO É ESSA: http://3.bp.blogspot.com/-8YmGBBuQqGw/UhJnmtW6DKI/AAAAAAAACrk/JwFPVCJq88w/s1600/back.png MAS SE NÃO GOSTAR PODE TROCAR =3) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */
border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */
box-shadow:0 0 5px #aaa; /* sombra na caixa do fundo - se não quiser apague essa linha */
}
/**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/
.comments h3,.comments h4{
width: 98%;
padding: 7px;
margin: 10px 0 !important;
color: #1C0244 !important; /* cor da fonte */
text-align: center; /* alinhamento */
text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */
font-family:'Broadway' !important; /* fonte - se preferir troque */
font-size: 25px !important; /* tamanho do texto - se preferir troque */
}

/**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/
.comments .comment-block {
position:static !important; /* mantém o avatar na frente do bloco - não mude */
background: #ffffff; /* cor do fundo da caixinha dos comentários */
margin-left: 23px;
padding: 0 15px 0 23px;
border-top: 15px #5D2B51 solid; /* borda encima da caixinha de comentário */
border-radius: 5px; /* bordas arredondadas */
box-shadow:0 0 3px #ccc, inset 0 0 11px #eee /* sombra na caixinha – apague se não quiser */
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;
color: #1C0244 !important; /* cor da fonte do nome de quem comenta */
letter-spacing: 1px;
font-family:'Dancing Script'; /* fonte do nome de quem comenta */
font-size: 26px; /* tamanho da fonte */
text-shadow:1 1px #aaa; /* sombra na fonte do nome */
background: transparent;
padding: 4px 36px;
margin-left:-31px !important;
border-bottom-right-radius:10px;
margin-top:-2px
}
.comments .comments-content .user{
font-style:normal;
border:0;
color: #FF80BC !important;
letter-spacing:1px;
font-family:'Dancing Script';
font-size: 26px;
text-shadow: 0 1px #aaa;
background: transparent;
padding: 4px 36px;
margin-left: 11px !important;
border-bottom-right-radius:10px;margin-top:-2px
}
/*Nome do autor do comentário hover*/
.comments .comments-content .user a:hover {
text-decoration:none !important;
color: #5D2B51 !important; /* cor do nome do autor do comentário quando passa o mouse */
}
/* estilo da data */
.comments .comments-content .datetime a{
background: none !important;
font-family: times new roman; /* fonte - mude se desejar */
float: right; /* posicionamento */
font-size: 12px; /* tamanho da fonte da data */
color: #fff !important; /* cor da data */
border:0 !important;
margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/
}
/* estilo do avatar */
.avatar-image-container {
min-width: 60px; /* determina um mínimo de largura */
min-height: 60px; /* determina um mínimo de altura */
padding:0 !important;
margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */
margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */
position: absolute !important;
overflow: hidden !important;
background: #fff;
}
.avatar-image-container img {
border: 3px #EAEAEA solid; /* borda do avatar */
margin:0;
max-height: 48px;
min-height: 48px;
max-width: 48px;
min-width: 48px;
}
/**=========== TEXTO DO COMENTÁRIO ===========**/
.comments p{
font-size: 14px !important; /* tamanho da fonte do comentário */
font-family: Times new roman !important; */ fonte do comentário */
text-shadow: 0 1px #eee !important; /* sombra na fonte */
padding-left: 55px !important;
padding-bottom: 20px;
color: #888 !important /* cor do texto */
}
/**=========== BOTAO – RESPONDER ===========**/
/* botão responder do segundo nível */
.comments .continue a {
background: #87CEEB !important; /* cor do fundo */
color: #fff !important; /* cor da fonte */
float: right; /* posicionamento */
padding: 8px !important;
height: 10px !important;
line-height: 15px !important;
margin-top: -35px !important;
}
/* botão responder do primeiro nível, mais estilos para o botão do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size: 11px !important;
float: right;
height: 10px !important; /* altura do botão */
color: #fff !important; /* cor da fonte */
padding: 6px;
border: 0 !important;
line-height: 10px;
margin: 5px;
margin-left: 40px;
font-family: helvetica; /* fonte - mude se desejar*/
text-shadow: 0 0;
border-radius: .5em; /* bordas arredondadas */
background: #CD96CD; /* cor do fundo */
font-weight: 800;
box-shadow: 0 1px 2px #666 /* sombra no botão - apague a linha se não quiser */
}
/* botão hover*/
.comments .comment .comment-actions a:hover {
text-decoration:none !important;
background: #FF80BC; /* cor do fundo do botão hover */
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color: transparent !important;
margin-top: 40px;
padding: 0.5em 1em;
border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {border-top:0 !important}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/**======= Fim [candylland.org] [goimagines.blogspot.com] =======**/

Sim, é bem grandinho, mas para mim valeu a pena. Acho que não ha muito o que explicar, só coloquei em negrito as parte que devem se fazer com as informações.


Bye =3

3 comentários:

  1. aww que legal esse tuto meu blog ja é lilas e com esse tuto vai ficar mais com cara de meu obrigadaaa era o que estava procurando
    blog: http://wwwblogpapoteen.blogspot.com.br/

    ResponderExcluir
  2. Que gracinha, vou deixar salvo pra usar em um próximo layout *-*
    Visite quando puder: Rua das Begônias

    ResponderExcluir
  3. Oii! Preciso de parcerias para meu novo blogger otome...

    http://feitotome.blogspot.com.br/

    ResponderExcluir

Comente o que quiser, mas com o minimo de respeito, ok >:?