Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 24 de setembro de 2012

    Dar estilo ao Threaded Comments do blogger

    O GoogleBuzz  anunciou a novidade na plataforma mais confiável da internet, um sistema de resposta nos comentários do Blogger conhecido como Threaded Comments, é uma forma de sair do visual padrão de comentários que na minha opinião era muito precária, muitos não se adaptaram pelo simples motivo, perde todo Css no estilo e terá que começar tudo de novo. mas com esse truque você personalizará com maior facilidade.


    Resultado depois da aplicação:

    Vamos ao Tutorial:


    1º – Acesse o Painel do seu Blog e clique na Guia Modelo.
    2º – Em seguida, clique em Editar HTML.
    3º – Depois clique em na Caixa Expandir Modelos de Widgets.
    4º – aperte as Teclas CTRL+F e procure por:


    ]]></b:skin>

    5º – E antes dele cole o seguinte código: 




    /* Start Comment Style Code http://www.spiceupyourblog.com */
    .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:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;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:#fff}
    .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:#0E6284;font-weight:normal;text-decoration:none}
    .comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
    .comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
    .comment-content{margin:0 0 8px;padding:0 5px}
    .comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht6eqi3VHdV8qIkZOk0JuH0MxreMGml8GnpYyA1-PzklW3hsgSHCSpBHcFRSids69eExyinbZkAQ8vTFG65qMd9ztnhtpQd7UxMoSZ3PTLHeKBP1Jq0nYXwshbk4yPBxgjpuVwuL-RYLM/s51/arrow.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 solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
    .comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
    @media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
    /* End Comment Style Code http://www.spiceupyourblog.com */



    6º Agora é só salvar.

    6 comentários:

    1. o blog ta de parabéns,maravilha,não perdi tempo olhando ele,to sempre acompanhando e vou recomendar ele pra todos meus amigos como estou recomendando o www.rastreamento.org que é muito bom pra rastrear carro,pessoas etc...e aproveita ai e da uma divulgada no meu serviço www.tecladoespiao.com pra você que quer sabe tudo que digitam em seu computador é bom pra filhos,mulher etc..abraços e parabens pelo blog

      ResponderExcluir
      Respostas
      1. Muito obrigado pelo seu comentário, fico feliz que tenha gostado do blog, é gratificante saber que meu trabalho está agrandando os leitores

        Abraços.

        Excluir
    2. Bom que gostou, muito obrigado pelo comentários

      Abraços

      ResponderExcluir
    3. Bom Erick,

      Fiz algumas modificações do código para adaptar no estilo que você está usando, para aplicar no seu layout vá no link abaixo e veja como no link abaixo.

      http://tecnoblogge.blogspot.com.br/p/duvidas-do-erick.html

      Abraços

      ResponderExcluir
    4. Fico feliz que tenha conseguido, já o slide show aguarde os proximos artigos do blog que falaremos como aplicar e para funcionar direito em cada templates encinarei a configurá-los.

      Obrigado pelo comentário,
      Abraços

      ResponderExcluir
    5. Estou com muito pouco de tempo, mas breve postarei :)

      ResponderExcluir