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://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/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.

    10 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. Muito Obrigado amigo, fico muito bonito, você é o cara :D

      ResponderExcluir
      Respostas
      1. Bom que gostou, muito obrigado pelo comentários

        Abraços

        Excluir
    3. Você sabe algum código para Deixar essa marcação de ''Author'' nos meus comentários do blog?

      ResponderExcluir
      Respostas
      1. 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

        Excluir
    4. Obrigado amigo, deu certinho *--*

      Caso queira um site para baixar suas séries, filmes e só Clique Aqui

      E Mais um pedido que sempre quis para meu site e nunca consegui...
      Como colocar um slide de imagens em miniatura rolando na horizontal, igual desse site: http://www.baixarfilmesdublados.net/

      Sempre que tento colocar esse slide as imagens ficam todas desalinhadas, não rola nada, em fim nunca da certo, não sei se é meu template que não funciona esse código, mais gostaria muito da sua ajuda...

      Obrigado novamente, você é o cara, sucesso com o site ;D

      ResponderExcluir
      Respostas
      1. 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

        Excluir
    5. Tem alguma previsão para o tutorial do slide? :D

      Obrigado desde já!

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

        Excluir