2.10.2014

Personalizando a área dos comentários.

O amor é um ato de fé.
Olá pessoas, como vão? A pedido de uma leitora irei mostrar um tutorial de como personalizei os comentários do blog, lembrando que esse tutorial eu vi no Vanessa Tutoriais e vale muito a pena usar ele.


Vá em editar HTML e procure por ]]></b:skin> acima dele coloque o seguinte código:
.flipper{
border-radius: 0px;
-webkit-transition-duration: .50s;
-webkit-animation-name: flipInX;
}
.flipper:hover{
border-radius: 0px;
-webkit-animation-name: flipInX;
-webkit-animation-duration: .90s;
}
Agora procure por /* Comments e substitua até } pelo código abaixo:
.comments{clear:both;margin-top:10px;
border-top: 1px solid transparent;
margin-bottom:0;
line-height:18px;
font-size:8px; font-family: silkscreen; color: #555252;}
.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 5px 3px;
padding:0 2px;
color: #fff;
background: #8b7781;text-shadow: 1px 1px 0px #8b7781;
box-shadow: 2px 2px 0px #8b7781;
text-align:center;
text-decoration:none;
border-radius:1px;
color: #ffffff;
background: #8b7781;text-shadow: 1px 1px 0px #8b7781;
box-shadow: inset 0px 0px 5px #8b7781;
height:18px;
line-height:18px;
font-weight:normal;
font-family: pf arma five;
font-size: 8px;
-webkit-transition-duration: .30s;text-decoration:none;
}
.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;}
.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{font-weight:normal;text-decoration:none;}
.comments .comments-content .icon.blog-author{
position:absolute;
top: 2px;
right: 30px;
margin:0;
background-image: url('http://media.tumblr.com/tumblr_lkl5toTH7e1qfamg6.gif');
width:17px;height:16px
}
.comments .comments-content .datetime a{
font-size:0px;
text-decoration:none; color: tranparent;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
position:relative;
background:#FFFFFF;
border:1px solid #8b7781;
border-radius:1px;
}
.comment-header{
background-color:#8b7781;
font-size:8px;
font-family: pf arma five;
color: #fff;
text-shadow: 0.1em 0.1em #8b7781;
border-bottom:1px solid #8b7781;
padding:1px;
}
.comment-header a{
color: #fff;
}
.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:7px;
width:8px;
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;
}
.comments .avatar-image-container img{
padding0px;
width:32px !important;
height:32px !important;
;max-width:32px !important;
max-height:32px !important;
border-radius: 0px;
-webkit-transition-duration: .50s;
-webkit-animation-name: flipInX;
border: 2px solid #8b7781;
}
.comments .avatar-image-container img:hover{
border-radius: 0px;
-webkit-animation-name: flipInX;
-webkit-animation-duration: .90s;
border: 2px solid #f7e0c1;
}
Cuidado para não apagar nada do /* Widgets.

E por ultimo procure novamente por ]]></b:skin> e acima dele coloque:
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

por fim, Só salvar. Espero que tenham gostado, Até a próxima, Nanny.

4 comentários:

  1. Um amor para recordar <3
    Ai não me toca que eu to chorosa >3<
    È muito lindo esse modelo , mas ela não pois explicação então não entendi nada q
    Beijos <3
    youheartsbyleticia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. O tutorial é simples, não precisa nem de muita atenção, mais certas pessoas sim.

      Excluir
  2. Achei muito boa a explicação, mas no meu HTML não tem a parte do " ]]> ", tem como me ajudar com isso?
    Ps: Gosto muito do seu blog, e sempre acompanho as postagens :)

    http://quebrandomedos.blogspot.com.br/

    ResponderExcluir
  3. Se o seu html for do blogspot tem que ter esse código ]]> se você removesse ele iria avisar, tente procurar separado, ou pesquisar o código de algo que você colocou no blog.
    Obrigada, fico feliz em saber, volte sempre querida. ^^

    ResponderExcluir