01/11/2012

9

área dos comentários personalizada

Hooy 
bom gente hoje eu irei mostrar como personalizar a área dos comentários igual aqui do blog . Sendo que eu peguei no blog This Time  quase todos os códigos então se repassarem por favor credite . Eu peguei o código do Candy Land com códigos do Piink Cookie .
 Vá em modelo EDITAR HTML dê ctrl e procure por

/**======================================================================AREA GERAL DOS COMMENTS ========================================================================**/.comments{width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */margin:0 auto;font-style:normal !important;font-size:14px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */font-family:Terminal Dosis !important; /* FONT DO TEXTO - se preferir troque */background:#cccccc  /* FUNDO */}/**=======================================================================HEADING DOS COMMENTS (1 comentario, 2 comentários...)========================================================================**/.comments h4{width:98%;padding:7px;margin-bottom:10px;background: #cccccc; /* COR DO FUNDO - se preferir troque */color:#00c0bc; /* COR DO TEXTO - se preferir troque */font-family:Terminal Dosis !important;/* FONT-FAMILY - se preferir troque */font-size:50px ; /* TAMANHO DO TEXTO - se preferir troque */box-shadow:0 2px 3px #ccc /* 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:#ffff !important; /* COR DO FUNDO */padding:0.5em 1em;border-radius:5px !important;box-shadow:inset 0 1px 3px #ccc !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:#00c0bc !important;text-shadow:0 1px #ccc;font-family:Terminal Dosis;background:none;padding-left:0}/* estilo da data */.comments .comments-content .datetime a{background:none;float:right;font-size:10px;color:#000000;}/* estilo do avatar */.avatar-image-container {width:30px; /* determina largura */height:20px; /* determina altura */-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}.avatar-image-container img {opacity:1.0; /* opacidade */margin:0;display:block;max-height:6px;min-height:6px;max-width:6px;min-width:6px;padding:0;border-radius:6px; /* 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 #ddd !important;padding-left:20px !important;color:#777}/** ==================================================================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(#eee), to(rgb(222,222,210)))!important;background: -moz-linear-gradient(top, #eee, rgb(222,222,210))!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:#d8c3f3;background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)) !important;background: -moz-linear-gradient(top,#aaa,#eee) !important;}/* estilos para bloco de respostas */.comments .comment-thread.inline-thread {background-color: #cccccc !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}}/** ==================================================================Fim [by Gizaa// http://candylland.blogspot.com]====================================================================**/

E no lugar de

/* Comments----------------------------------------------- */.comments .comments-content .icon.blog-author {  background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);}.comments .comments-content .loadmore a {  border-top: 1px solid $(widget.alternate.text.color);  border-bottom: 1px solid $(widget.alternate.text.color);}.comments .comment-thread.inline-thread {  background-color: $(post.footer.background.color);}.comments .continue {  border-top: 2px solid $(widget.alternate.text.color);} 

cole o seguinte
/* Comments----------------------------------------------- */.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color: #000000!important;text-align:center;text-decoration:none;background: #FFFFFF;border:1px dotted #000000;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}.comments .comments-content .inline-thread{padding:0}.comments .comments-content .comment-thread{margin:8px 0}.comments .comments-content .comment-thread:empty{display:none}.comment-replies{margin-top:1em;margin-left:40px;background:#FFFFFF}.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}.comments .comments-content .comment:first-child{padding-top:16px}.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}.comments .comments-content .comment-body{position:relative}.comments .comments-content .user{font-style:normal;font-weight:normal}.comments .comments-content .user a{color: #000000;font-weight:normal;text-decoration:bold}.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}.comments .comments-content .datetime a{color: #000000;font-size:12px;float:right;text-decoration:none}.comment-content{margin:0 0 8px;padding:0 5px}.comment-header{font-size:18px;background-color:#FFFFFF;border-bottom:1px dotted #000000;padding:5px}.comments .comments-content .owner-actions{position:absolute;right:0;top:0}.comments .comments-replybox{border:none;height:230px;width:100%}.comments .comment-replybox-thread{margin-top:0}.comments .comment-replybox-single{margin-top:5px;margin-left:48px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}.avatar-image-container{background:url(http://2.bp.blogspot.com/-KF_UbMBMbok/T9C5F6n1uEI/AAAAAAAAJoA/NQ9xmGyGSuY/s1600/seta+preta.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px dotted #000000;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:2px solid #000000; background: #FFFFFF; border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}
.comments .avatar-image-container img{padding:2px;border:1px dotted #000000;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}.comments .comment-block{margin-left:65px;position:relative;border:2px solid #000000; background: #FFFFFF; border-radius:8px}@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}} 

bom gente espero que tenham gostado :)

9 comentários:

  1. Obrigada,eu estava procurando por isso,de verdade !!Beijos afiliada linda !

    cherygo.blogspot.com

    ResponderExcluir
  2. Coloquei isso lá no meu blog , obrigada por fazer aquele Lay lindo eu ameiii demais . BEIJOS flor

    http://japassoudotempo.blogspot.com.br

    ResponderExcluir
  3. Adoreei o tuto!! Floor, não sei se você aceita mas tem uma tag lá para você ;33

    Beijoos ;33

    besteirolls.blogspot.com.br

    ResponderExcluir
  4. Adorei.
    Amei seu blog e já estou seguindo ficaria muito honrada em te ver no meu cantinho, beijos ;*
    http://www.garotasligadascom.blogspot.com.br/

    ResponderExcluir
  5. Muito bom o tutorial,vou utilizá-lo em breve!E a propósito,seu blog é fofo,e que layout mais gracinha é esse?*-*
    Parabéns!
    Beijão ;*
    Cupcake Teen
    http://cupcaketeenteen.blogspot.com.br/

    ResponderExcluir
  6. Adorei o tuto, já coloquei no meu blog uma vez e fica lindo!
    Seguindo, beijos!

    entre-galaxias.blogspot.com

    ResponderExcluir
  7. Pooots...não conseguii! =(
    Adorei a dica flor, tbm amei seu blog e já estou seguindoo!
    Beijinhooooos!

    www.makedamotociclista.blogspot.com.br

    www.facebook.com/Cat343

    www.youtube.com/tamiyasulista

    ResponderExcluir
  8. Amei!!
    Seguindo. Segue de volta ?
    Hppt//bombasticmusics.blogspot.com.br

    ResponderExcluir

Podem comentar a vontade , qualquer dúvida leia as coisinhas abaixo

Não seja mal educado
Respondo todos os comentários
Só aceito comentários falando do post

Enfim alguns símbolos para copiar e colar . Não se esqueça de deixar o link de seu blog para que eu possa vê-lo

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡