• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

5 de setembro de 2012

área dos comentários igual à do A.d.

Tumblr_lzm77b7c1t1qg6dyso1_500_large
Olá gente, hoje estava vendo os comentários aqui no blog e vi uma leitora perguntando assim:

Então, atendendo nossa leitora, irei postar hoje como modificar a área dos comentários e deixar igual a que eu fiz aqui no blog, lembrando que eu usei como modelo desse blog, mais explorei e explorei e deu nesse resultado, fui modificando e ficou assim, então se usarem creditem plz!

Vamos começar?
Procure ]]></b:skin> e acima cole:


/**======================================================================

AREA GERAL DOS COMMENTS ========================================================================**/.comments{width:90% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */margin:0 auto;font-style:normal !important;font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */background:#FF0000 url(URL DA IMAGEM) /* IMAGEN DO FUNDO */}


/**=======================================================================HEADING DOS COMMENTS (1 comentario, 2 mil comentários...)========================================================================**/.comments h4{width:98%;padding:7px;margin-bottom:10px;background:#FFFFFF; /* COR DO FUNDO - se preferir troque */color:#40E0D0; /* COR DO TEXTO - se preferir troque */font-family:Century Gothic !important;/* FONT-FAMILY - se preferir troque */font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */box-shadow:0 2px 3px #FFF0F5 /* EFEITO SOMBRA */}/** ==================================================================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 !important; /* COR DO FUNDO */padding:0.5em 1em;border-radius:5px !important;border:1px #FF69B4 solid !important;box-shadow:inset 0 1px 3px #FF69B4 !important /* EFEITO FUNDO REBAIXADO*/}.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;margin-left:10px;color:#8EE5EE;text-shadow:0 1px #ccc;border-bottom:2px #FFF0F5 solid;font-family:consolas;background:none;padding-left:0}/* estilo da data */.comments .comments-content .datetime a{background:none;float:right;font-size:9px;color:#DF6699;opacity:0.5}/* estilo do avatar */.avatar-image-container {min-width:60px; /* determina um minimo de largura */min-height:60px; /* determina um minimo de altura */border:2px #98F5FF solid; /* borda */border-radius:60px; /* arredondamento */padding:0 !important;box-shadow:0 0 3px #faa; /* sombra */margin-left:6px !important; margin-top:-1px !important;background:#FFFFFF;overflow:hidden /* hack para evitar serrilhado na imagem */}.avatar-image-container img {opacity:0.8; /* opacidade */margin:0;display:block;max-height:60px;min-height:60px;max-width:60px;min-width:60px;padding:0;border-radius:60px; /* arredondamento */overflow:hidden;border:0 !important;overflow:hidden /* hack para evitar serrilhado na imagem */}



/** ==================================================================TEXTO DO COMENTÁRIO ====================================================================**/.comments blockquote{background:transparent !important;border:0 !important;font-style:normal !important;font-size:12px !important;font-family:courier new !important;text-shadow:0 1px #ffffff !important;padding-left:20px !important;color:#FFFFFF}/** ==================================================================BOTÕES - RESPONDER, EXCLUIR====================================================================**//* botao responder do segundo nível */.comments .continue a {float:right;padding:2px 4px!important;height:23px;line-height:23px !important;margin-top:-45px !important;text-shadow:0 0 none !important}/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */.comments .comment .comment-actions a,.comments .continue a {font-size:11px !important;color:#fff !important;padding:3px 6px;border:0 !important;line-height:30px;margin:5px;margin-left:10px;font-family:helvetica;text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;border-radius: .5em;box-shadow: 0 1px 2px rgba(0,0,0,.2);background: #f895c2;background: -webkit-gradient(linear, left top, left bottom, from(#FFF0F5), to(#EEE0E5))!important;background: -moz-linear-gradient(top, #feb1d3, #f171ab)!important;filter: progidXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab')!important}/* botao hover*/.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {text-decoration:none !important;padding:6px}/* botao excluir */.comments .comment .item-control a{background:#FFFFFF;background: -webkit-gradient(linear, left top, left bottom, from(#CD0000), to(#EE0000)) !important;background: -moz-linear-gradient(top,#f3e8f6,#d8c3f3) !important;filter: progidXImageTransform.Microsoft.gradient(startColorstr='#f3e8f6', endColorstr='#d8c3f3') !important}/* estilos para bloco de respostas */.comments .comment-thread.inline-thread {background-color:transparent !important}.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}/** ==================================================================BONUS - estilos para formatação do texto dos comments====================================================================**/.comments .comments-content a{background:#FFFFFF url(http://arieleonella.files.wordpress.com/2011/03/111.gif?w=15&h=15)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#8B0000}.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}


/** ==================================================================Fim [by Sam//http://adolescentenerd.blogspot.com.br/]====================================================================**/




Pronto agora é só modificar as partes em negrito que coloquei para facilitar, aa e as partes que estão escritas: SOLID podem ficar diferentes, veja aqui alguns exemplos:



Borda Solid 
Código: Border: 1px solid #000000;

Borda Dotted 
Código: Border: 2px dotted #000000;

Borda Dashed 
Código: Border: 1px dashed #000000;

Borda Groove 
Código: Border: 3px groove #aa3cff;

Borda Inset 
Código: Border: 3px inset #aa3cff;

Borda Outset 
Código: Border: 3px outset #aa3cff;

Borda Double 
Código: Border: 3px double #000000;

no caso do A.D eu coloquei em dashed e dotted, e para mudar as cores clique aqui para ver nossa tabela de cores.
~Gostaram do tuto de hoje?
obrigada à Beatriz Costa pela opinião de postagem!

12 comentários:

  1. Nossa! Sempre quis a área dos comentários assim! Pena que agora a minha ja ta personalizada ='( Vou usar com certeza no próximo layout!

    omeubrilhantemundo.blogspot.com

    ResponderExcluir
    Respostas
    1. rs, obrigada! *w* rs estarei lá pra ver e comentar flor :)

      Excluir
  2. Awn que máximo, fica muito show mesmo os coments assim!
    Mesmo sendo postadora daqui, também quero pedir um tuto: Como deixar as imagens com efeito, de que quando passa o mouse fica colorido??

    Beijos

    ResponderExcluir
    Respostas
    1. hihi acabei de ver esse tutorial hoje, vou postar sim flor!

      Excluir
    2. postei flor~ rápida eu né kk

      Excluir
  3. amei o tutorial vou coloca no meu proximo layout...
    tenha um ótimo dia flor beijos!
    rarosej.blogspot.com.br

    ResponderExcluir
  4. Ameei! Uma peguntinha: mesmo que só use o tutorial no blog sem ser pra ensinar os outros tem que por os créditos? Beijoos

    ResponderExcluir
    Respostas
    1. Não amore, se vc for postar aí sim, coloque créditos, mais se for pra uso pessoal, tudo trank. Obg pela visita :3

      Excluir
  5. Fica muito kawaii Megan-senpai *^*
    ah e posso te perguntar uma coisa >3< ?
    assiste fairy tail? onegai não vai se arrepender
    lindo como sempre ^-^
    Kissu /o/

    ResponderExcluir
    Respostas
    1. não, eu já vi aí achei meio fada de mais rs, e gosto mais de animes sobre o colegial como k-on, e tbm chi's sweet home :3

      Excluir
  6. Naum consegui mudar a cor da letra, tentei & nada. Como faço!?

    Bgs. ;*

    Tracy Emmy Blog's

    ResponderExcluir