Olá gatinhos, tudo bem? Sintam-se a vontade e sejam bem vindos ao meu cantinho, este bloguinho foi criado em julho de 2012 e até hoje é direcionado a área de html e css. E se desejarem algo não exitem e peçam pela ask! beijinhos, bye ♡

24.8.15

Modelos para área de comentário

Boa tarde cheirosos (♥→o←♥) Como vão? Cara como eu amo essas mudanças bruscas de temperatura, eu amo! Um dia está um calor da porra e no outro de repente fica um gelo do cão, isto é ótimo para pegar uma boa gripe ¬¬ Então, estou bem triste e desanimada pois minhas férias estão acabando e eu estou ficando louca já, não quero mais voltar a trabalhar hahaha. Quem me dera se eu fosse dondoca e só precisasse fazer faculdade, dai sim minha vida seria perfeita não que não seja boa mas que dá um trabalho e cansa trabalhar e estudar dá. Mas por enquanto é só no sonho mesmo, tenho que me contentar e acordar para a realidade haha. Vamos ao tutorial? ^-^

Uma leitora havia me pedido modelos para comentários, eu tenho muita preguiça meu, e como não quero ficar aqui passando frio e quero ir para a cama, eu fiz um modelo exclusivo que é o primeiro modelo a ser mostrado e os outros três eu peguei de temas anteriores meus, no caso para vocês também meio que são exclusivos né até porque eu não postei nenhum deles antes. Vocês podem fazer o que quiser neles tá? Mudar tudo, cores, fontes, backgrounds e escambau só quero que credite o resto é por sua imaginação. É isso meus amores, espero que gostem, até mais e Chu!


1º Modelo 


/* Comments
----------------------------------------------- */
#comments {
padding: 15px;
background: #F8F8F8 none repeat scroll top center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#comments .comment-author {
padding-top: 1.5em;
}
@font-face {src: url('https://dl.dropboxusercontent.com/s/1ja1ouy48me3l4b/LaserMetal.ttf?dl=0');font-family: CK;}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
background: url(http://imageshack.com/a/img661/7695/U9irH1.png)repeat;
border: solid 1px #ebe5d9;
padding:8px 8px 8px 8px;
color: #666;
font-family: CK;
font-size:30px;
font-weight: 300;
text-align: left;
text-decoration: none;
text-transform:none;
line-height:17px;
letter-spacing: 2px;
text-shadow: 1px 1px 1px #;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:10px;
line-height:18px; font-family: Muli, sans-serif;font-size:13px;color: #A7A7A7;
text-align: justify;}
.comments .comments-content{margin-bottom:16px;font-weight:normal;}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin-left:5px;
margin-bottom:5px;
margin-top:10px;
padding-bottom: 4px; padding-left: 4px; padding-right: 4px;
color: #666;
font-family: Georgia;
font-size:10px;
font-weight: 300;
text-align: center;
text-decoration: none;
text-transform:uppercase;
letter-spacing: 2px;
text-shadow: 1px 1px 1px #fff;
background: url(http://imageshack.com/a/img661/7695/U9irH1.png)repeat;
border: solid 1px #ebe5d9;
border-radius:1px;
-moz-border-radius:1px;
font-weight:normal;
cursor:pointer;
-webkit-transition-duration: .80s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
text-decoration: none;
background:#ebe5d9;
border: solid 1px #dfd3ba;
color: #c9bea9;
text-shadow: 1px 1px 1px #fff;
-webkit-transition-duration: .80s;
}
.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{
background-repeat: no-repeat;
background-image: url('');
width:5px;
height:5px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
}
.comments .comments-content .datetime a{
font-family: Georgia;
font-size:10px;
font-weight: 300;
text-align: right;
text-decoration: none;
text-transform:uppercase;
text-shadow: 1px 1px 1px #fff;
letter-spacing: 2px;
color: #777;
float:right;
-webkit-transition-duration: .80s;
}
.comments .comments-content .datetime a:hover{
color: #c9bea9;
text-shadow: 1px 1px 1px #fff;
-webkit-transition-duration: .80s;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
font-family: Muli, sans-serif;
font-size:13px;
color: #666;
text-align: justify;
margin-left:50px;
position:relative;
background:#F8F8F8;
border-left: 1px solid #ebe5d9;
border-right: 1px solid #ebe5d9;
border-bottom: 1px solid #ebe5d9;
border-radius:1px;
-moz-border-radius:1px;
}
.comment-header{
background:#ebe5d9;
border: solid 1px #dfd3ba;
font-family: Georgia;
font-size:12px;
font-weight: bold;
text-align: left;
text-decoration: none;
text-transform:uppercase;
letter-spacing: 2px;
text-shadow: 1px 1px 1px #BBAAC7;
padding:5px;
border-radius:1px;
-moz-border-radius:1px;
-webkit-transition-duration: .80s;
}
.comment-header a{
color: #777;
text-shadow: 1px 1px 1px #fff;
-webkit-transition-duration: .80s;
}
.comment-header a:hover{
color: #c9bea9;
text-shadow: 1px 1px 1px #fff;
-webkit-transition-duration: .80s;
}
.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 img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:1%;
}
.avatar-image-container img:hover{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.avatar-image-container{
display:inline;
margin-left:-5px;
padding: 5px;
background:#ebe5d9;
border: solid 1px #dfd3ba;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.avatar-image-container:hover{
margin-left:-5px;
padding: 5px;
background: url(http://imageshack.com/a/img661/7695/U9irH1.png)no-repeat;
border:solid 1px #dfd3ba;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;opacity: 1;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}

2º Modelo 


Para usar este modelo vocês tem que por esta fonte abaixo de <head>

<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'/>

/* Comments
----------------------------------------------- */
#comments {
padding: 15px;
background: #f4f4f4 none repeat scroll top center;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
background: #D7C7DB;
box-shadow: 0px 0px 5px #B9A7BE;
border: solid 1px #A591AB;
padding:3px;
font-family: 'Comfortaa', cursive;
font-size:12px;
color: #fff;
text-shadow: 1px 1px 1px #997BA1;
font-weight: 300;x;
text-transform:uppercase;
text-decoration: none;
text-align: center;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:10px;
line-height:18px; font:10px consolas;color: #5f5f5f;text-align:justify;}
.comments .comments-content{margin-bottom:16px;font-weight:normal;}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0px 0px 10px 10px;
padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
color:#fff !important; /*--- cor da fonte do botão reply--- */
font-size: 10px;
font-family: 'Comfortaa', cursive;
text-transform: uppercase;
letter-spacing: 1px;
text-align:center;
text-decoration:none;
background:#E8DDEC; /*--- cor de fundo do botão reply--- */
border:1px solid #DDCFE0; /*--- cor da borda do botão reply--- */
box-shadow: inset 0 0 2px #eee, 0 0 6px #fff;
text-shadow: 1px 1px 1px #8E7196;
border-radius:1px;
-moz-border-radius:1px;
font-weight:normal;
cursor:pointer;
-webkit-transition-duration: .80s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
text-decoration: none;
background:#CDBCD2; /*--- cor de fundo do botão reply hover--- */
border:1px solid #C5B4CA; /*--- cor da borda do botão reply--- */
box-shadow: inset 0 0 2px #D3CDD5, 0 0 6px #fff;
color:#fff !important; /*--- cor da fonte do botão reply--- */
text-shadow: 1px 1px 1px #7D5A87;
}
.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{
background-repeat: no-repeat;
background-image: url('');
width:5px;
height:5px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
}
.comments .comments-content .datetime a{
font-family: 'Comfortaa', cursive;
font-size:10px;
text-transform: none;
letter-spacing: 1px;
text-align:left;
text-transform: uppercase;
text-decoration:none;
float:right;
margin-top:3px;
color:#FFF; /* -- cor do link da data do comentário -- */
text-shadow: 1px 1px 1px #997BA1;
}
.comments .comments-content .datetime a:hover{
color: #8C6D94; /*--- cor do link nome do autor do comentario --- */
text-shadow: 1px 1px 1px #FFF;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
font-family: Muli;
font-size:13px;
color: #5f5f5f;
margin-left:50px;
position:relative;
background:#F7F3F8; /* -- cor de fundo do comentário -- */
border: solid 1px #EAE3EC;
box-shadow: 1px 1px 1px #FFDCDC, inset 0px 0px 5px #eee;
border-radius:1px;
-moz-border-radius:1px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background: #D7C7DB;
box-shadow: 0px 0px 5px #B9A7BE;
border: solid 1px #A591AB;
font-family: 'Comfortaa', cursive;
font-size:12px;
text-transform: none;
letter-spacing: 1px;
text-align:left;
text-transform: uppercase;
text-decoration:none;
color: #fff;
padding:5px;
border-radius:1px;
-moz-border-radius:1px;
}
.comment-header a{
color: #FFF; /*--- cor do link nome do autor do comentario --- */
text-shadow: 1px 1px 1px #997BA1;
}
.comment-header a:hover{
color: #8C6D94; /*--- cor do link nome do autor do comentario --- */
text-shadow: 1px 1px 1px #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: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 img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
-webkit-border-top-right-radius: 1px;
}
.avatar-image-container img:hover{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-border-radius: 100%;
}
.avatar-image-container{
display:inline;
margin-left:1px;
padding: 2px;
background: #D7C7DB;
box-shadow: 0px 0px 5px #B9A7BE;
border: solid 1px #A591AB;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-webkit-border-radius:50%;
-webkit-border-radius:50% 50% 0% 50%;
-webkit-border-radius: 100px;
-webkit-border-top-right-radius: 1px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;}
.avatar-image-container:hover{
margin-left:-5px;
padding: 2px;
background: #D7C7DB;
box-shadow: 0px 0px 5px #B9A7BE;
border: solid 1px #A591AB;
-webkit-border-radius: 100px;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;opacity: 1;
}

3º Modelo


/* Comments
----------------------------------------------- */
#comments {
padding: 15px;
background: #fff none repeat scroll top center;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
font-family: 'Open Sans Condensed', sans-serif;
color:#FFB2B2;
text-shadow: 1px 1px 1px #fff;
font-weight: 300;
letter-spacing: 2px;
font-size: 15px;
color: #FFB7B7;
text-align: center;
text-transform: uppercase;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
/* Comments
----------------------------------------------- */
.comments{clear:both;top:10px;margin-bottom:30px;line-height:10px;font: normal normal 12px calibri;
color:#999;text-align:justify;font-weight: none;}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:justify;margin-top:-15px;}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0px 2px 4px 4px;
padding-bottom: 5px; padding-left: 4px; padding-right: 4px; padding-top: 5px;
text-align:justify;
font-family: 'calibri', sans-serif;
font-size: 10px;
color: #FFB7B7;
font-weight: 300;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
background-color:#FFDDDD; border: 1px #FFC3C3 solid;
border-radius:1px;
-moz-border-radius:1px;
cursor:pointer;
text-decoration:none;
-webkit-transition-duration: .80s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
display:inline-block;
margin:0px 2px 4px 4px;
padding-bottom: 5px; padding-left: 4px; padding-right: 4px; padding-top: 5px;
text-align:justify;
font-family: 'calibri', sans-serif;
font-size: 10px;
color: #FF9191;
font-weight: 300;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
background-color:#FFDDDD; border: 1px #FFC3C3 solid;
border-radius:1px;
-moz-border-radius:1px;
cursor:pointer;
text-decoration:none;
-webkit-transition-duration: .80s;
}
.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: 4px;
float:right;
margin:0;
background-image: url();width:14px;height:14px;
}
.comments .comments-content .datetime a{
font-family: 'calibri', sans-serif;
font-size: 9px;
color: #FFBABA;
font-weight: 300;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
position:absolute;
float:right;
top: -2px;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
font: normal normal 12px calibri;
color:#999;
text-shadow: 0px 0px 0px #fff !important;
text-align:justify;
margin-left:65px;
position:relative;
background-color:#FFF0F0;
border: 1px #FFD4D4 solid;
border-radius:1px;
-moz-border-radius:0px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
color:#FFB2B2;
text-shadow: 1px 1px 1px #fff;
background: #FFE4E4;
border-bottom: 1px solid #FFCBCB;
padding:4px;
border-radius:1px;
}
.comment-header a{
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
color:#FFB2B2;
text-shadow: 1px 1px 1px #fff;
font-weight: 300;
letter-spacing: 2px;
font-size:11px;
border-radius:1px;
padding:8px;
}
.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{
display:inline;
margin-left:4px;
padding: 4px;
background: #fff;
border:solid 1px #FFCACA;
border-radius: 1px;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;opacity: 0.6;}
.avatar-image-container:hover{
display:inline;
margin-left:4px;
padding: 4px;
background: #fff;
border:solid 1px #FFA4A4;
border-radius: 1px;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;opacity: 0.9;
}

4º Modelo


/* Comments
----------------------------------------------- */
#comments {
padding: 15px;
background: #F8F8F8 none repeat scroll top center;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
text-transform: capitalize;
letter-spacing: 2;
font-family: 'Georgia', cursive;
font-weight: 300;
font-size: 22px;
font-style:italic;
color:#F8CED8;
text-align: center;
}
#comments .comment-timestamp a:hover {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 22px;
color: # !important;
text-align: center;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
/* Comments
----------------------------------------------- */
.comments{clear:both;top:10px;margin-bottom:30px;line-height:10px;font: normal normal 12px calibri;
color:#d8d8d8;text-align:justify;}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:justify;margin-top:-15px;}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0px 2px 4px 4px;
padding-bottom: 5px; padding-left: 4px; padding-right: 4px; padding-top: 5px;
text-align:justify;
font-family: 'Pf Arma Five'; font-size: 8px; text-shadow: 1px 1px 0px # !important;
text-decoration:none;
color:#fff;
text-shadow: 1px 1px 1px #ccc;
background:#FCDDE6;border: solid 1px #F9CFDB;
box-shadow: inset 1px 1px 0px #ffbfd0;
box-shadow:1px 2px 2px #fad5de;
border-radius:1px;
-moz-border-radius:1px;
font-weight:normal;
cursor:pointer;
-webkit-transition-duration: .80s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
display:inline-block;
margin:0px 2px 4px 4px;
padding-bottom: 5px; padding-left: 4px; padding-right: 4px; padding-top: 5px;
font-family: 'Pf Arma Five'; font-size: 8px; text-shadow: 1px 1px 0px # !important;
text-decoration:none;
color:#fff;
text-shadow: 1px 1px 1px #ccc;
background: #ebe7f9;border: solid 1px #e2dcf8;
box-shadow: inset 1px 1px 0px #D4E3E8;
box-shadow:1px 2px 2px #D4E3E8;
border-radius:2px;
-moz-border-radius:2px;
font-weight:normal;
cursor:pointer;
-webkit-transition-duration: .100s;
}
.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;
float:right;
margin:0;
}
.comments .comments-content .datetime a{
font-family: 'Pf Arma Five';
font-size:8px;
color:#fff; /* -- cor do link da data do comentário -- */
text-shadow: 1px 2px 2px #A4B9BE;
position:absolute;
float:left;
top: -1px;
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
font: normal normal 12px calibri;
color:#D0D0D0;
text-shadow: 0px 0px 0px #fff !important;
margin-left:65px;
position:relative;
background:#F8F8F8;
border:1px solid #;
box-shadow: 0px 0px 1px #;
border-radius:1px;
-moz-border-radius:0px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
color:#fff;
text-shadow: 1px 2px 2px #A4B9BE;
background: #ebe7f9;border: solid 1px #e2dcf8;
box-shadow: inset px 0px 0px #D4E3E8;
box-shadow: inset 0px 2px 2px #;
border-bottom:solid 2px #FAD6E0;
padding:4px;
border-radius:1px;
}
.comment-header a{
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
text-shadow: 1px 2px 2px #A4B9BE;
font-weight: 300;
letter-spacing: 2px;
font-size:11px;
border-radius:1px;
color: #fff;
padding:8px;
}
.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{
display:inline;
margin-left:4px;
padding: 2px;
background:#FAC5D3;border: solid 1px #F9B6C8;
box-shadow: inset 1px 1px 0px #ffbfd0;
box-shadow:1px 2px 2px #fad5de;
border-radius: 1px;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;opacity: 0.6; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;}
.avatar-image-container:hover{
display:inline;
margin-left:8px;
padding: 2px;
background: #ebe7f9;border: solid 1px #e2dcf8;
box-shadow: inset 1px 1px 0px #D4E3E8;
box-shadow:1px 2px 2px #D4E3E8;
border-radius: 1px;
width:40px !important;
height:40px !important;
max-width:36px !important;
max-height:36px !important;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;opacity: 1;
}

8 comentários:

  1. Boa tarde Roh ♡ Vou muito bem, obrigada! Sobre essas mudanças de temperatura eu odeio! Se for pra fazer calor que seja pela semana inteira, e se for pra fazer frio também. Eu estou bem triste, pois só de lembrar que ainda falta mais uma unidade de provas para o ano acabar me deixa na bad :'( Quem me dera ser dondoca/2 hahaha.

    Eu adorei esses modelos de comentários ♡ Estou in love com os dois últimos, sos!
    Chu! http://miscel-laneous.blogspot.com.br/ (aceita afiliação? aguardo resposta!)

    ResponderExcluir
  2. Também não quero voltar a estudar :'( Preguiça.com

    Roh *O* Que modelos mais lindos *--* To apaixonada, sinceramente, se eu não tivesse feio os meus ainda colocaria esses, são perfeitos, Parabéns. Ah, o blog está lindo, fazia um tempinho que eu não visitava ele, está perfeito.

    http://l-ifecute.blogspot.com/

    ResponderExcluir
  3. Aqui em Fortaleza também ocorre essas mudanças de tempo, uma hora faz sol, e depois chove, ai eu fico gripado :c. Também é meu sonho só fazer faculdade, mas pelo que eu tô vendo, acho que vou ter que trabalhar e fazer faculdade :c. Eu gostei demais do último modelo ^^ >3< boa sorte nos estudos o///

    Studio-Help.blogspot.com.br

    ResponderExcluir
  4. Oi meu bem como vai? Realmente é triste quando as férias acabam, eu ainda não superei o fim das minhas. Infelizmente não é todo mundo que pode ser dondoca e só estudar, a vida não está fácil pra ninguém haus. Eu já estou muito gripada devido a essa mudança de tempo, faz muito mal a saúde pra quem é fraquinho que nem eu.
    Sobre os modelos, são lindos. <3
    Chu ~ Bleeding

    ResponderExcluir
  5. Que lindos, meu preferido é o primeiro *w*
    Se eu for mudar os meus comentários, vou tentar usar um desses!
    luisadub.blogspot.com

    ResponderExcluir
  6. Eu estava gripada por causa dessas mudanças repentinas no tempo, mas já estou melhor! Que bom que você postou, veio em boa hora, estava precisando mesmo mudar o estilo dos comentários nos meus layouts :)

    [dor à tona]

    ResponderExcluir
  7. Queee lindos, irei usar o primeiro <3 muito lindão. http://vihpaula.blogspot.com.br/

    ResponderExcluir
  8. Muuuuuito lindos esses modelos <3 irei utilizar um deles num lay free lá pro blog!
    http://unconditionallykawaii.blogspot.com.br/

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

LAYOUT E CODIFICAÇÃO POR ROH A. RAMOS OS DIREITOS ESTÃO RESERVADOS | Tecnologia do Blogger © 2017