Sim, eu estou a despachar modelos para comentários antigos. O deste vez pode ser visualizado no meu blog abandonado, Forever Sapo, e é dos modelos mais complexos, embora para vocês não vá fazer diferença - só me deu trabalho a criar porque incluir animações. Chamei-lhe uvas e laranjas porque... as cores predominantes são roxo e laranja >.< Mas sintam-se à vontade para mudar as cores, assim como as fontes. Cá vai:
Prévia: www
Tutorial:
Procure por <head> e abaixo cole:
<link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps|Muli' rel='stylesheet' type='text/css'/>
Agora, acima de /b:skin insira o seguinte código:
#comments {
margin-top: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1uaCat4j5PmMpMdb_0NHSdl5QBQvtJL1wwrt6nd6Jn5PRPdxco60vzKY75LT7nYGqX3h-cItzk7F3Aqty0c2oS3fwW1FM6UWs7Q0NM8cZofuCyE8FqeECdCOcQkmrbM4S53PdaT6-40/s1600/010.png) repeat #edcced;
padding: 5px;
border-radius: 10px;
}
#comments .comment-author { padding-top: 1.5em;}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {color: #000000;}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {margin: .2em 0 0;}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #ca8acf!important;
text-shadow: 1px 1px 1px #fff, 3px 3px 0px #fff;
font-family: Delius Swash Caps;
font-size: 18px;
text-align: center;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments a { /* fonte em geral*/
color: #9a6a9e;
text-align: justify;
font-family: Muli;
font-size: 14px;
}
.comments .comment-thread.inline-thread { /*enquadramento dos comentários de resposta*/
background: rgba(255,255,255,0.5);
outline: 1px dashed #fff;
outline-offset: 0px;
}
.comments .continue { /*borda a separar os comentários*/
border-top: 0px solid #cccccc;
}
.comments .comments-content .comment-thread ol { list-style-type:none; padding:0px; text-align:none;}
.comments .comments-content .inline-thread {padding: 0px;}
.comments .comments-content .comment-thread { margin: 8px 0px;}
.comments .comments-content .comment-thread:empty { display: none;}
.comment-replies{ margin-top: 1em; margin-left: 15px; }
.comments .comments-content .comment{ margin-bottom: 0px; padding-bottom: 0px; }
.comments .comments-content .comment:first-child{ padding-top: 16px; }
.comments .comments-content .comment:last-child{ border-bottom:0px; padding-bottom: 0px; }
.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 .comment-content { /*caixa de comentário*/
margin: -8px 0px 0px 36px;
border-radius: 0px 0px 5px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPjD15HsILol2BYrIZGNkXrTQ-QnKbgqrfMnWj8_8BWY9xI7P9_pYMdHADG-9oFbaFLGa3SLgTVSZvQxmSJaxkE_3vpbx6Pt08F-sLGstv2gm52xk-iyFzONnKduoB5bf-JkcWvBcdhTU/s1600/navslide2b.png) repeat-Y #fff;
box-shadow: inset -3px 0px 0px #b880bd, inset 3px 0px 0px #b880bd;
padding: 5px 8px 5px 28px;
border-right: 0px solid #ff8b38;
border-left: 0px solid #ff8b38;
color: #9a6a9e;
text-align: justify;
font-family: Muli;
font-size: 14px;
text-shadow: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .comment-content:hover { /*caixa de comentário*/
box-shadow: inset -3px 0px 0px #b880bd, inset 3px 0px 0px #b880bd;
background-position: 0px -60px;
border-right: 3px solid #ff8b38;
border-left: 3px solid #ff8b38;
padding: 5px 5px 5px 25px;
color: #db8c53;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content {
margin-bottom: 0px;
font-weight: normal;
text-align: justify;
padding-left: 10px;
}
.comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/
text-align: center;
font-size: 11px!important;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
background: #d39cd9;
box-shadow: inset 0px 0px 1px #c38dc9;
padding: 2px 4px 2px 4px;
text-decoration: none;
margin: 3px 0px 0px 40px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /*fonte do botão reply em hover*/
text-shadow: 1px 1px 1px #ffffff;
-webkit-animation: shadow 4s alternate infinite linear;
-moz-animation: shadow 4s alternate infinite linear;
-o-animation: shadow 4s alternate infinite linear;
-ms-animation: shadow 4s alternate infinite linear;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
@keyframes shadow {
0% {box-shadow: inset 0px 30px 0px #ff9d4d; -webkit-transform: rotate(0deg);}
25% {box-shadow: inset 600px 0px 0px #bc78c2; -webkit-transform: rotate(-2deg);}
50% {box-shadow: inset 0px -30px 0px #bc78c2; -webkit-transform: rotate(2deg);}
75% {box-shadow: inset -600px 0px 0px #ff9d4d; -webkit-transform: rotate(-2deg);}
100% {box-shadow: inset 0px 30px 0px #d39cd9; -webkit-transform: rotate(0deg);}
}
.comment-header { /*nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxNliJi4OKXc4zsJ7Sp-ui8-jE-kl2rZYC1rJpnnVaKZeCdmc556Yo-n0hEFb6Hyu2DK7xdJSroO9uhc7vgxkmJYGlTI8b9imbQWP6_H7axdhuk5M4UfxpxNAhQdDmKS0Ggrf0lXKOBA/s1600/coment1.png) no-repeat;
margin-bottom: 2px;
padding: 2px 5px 5px 5px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header:hover { /*nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxXuJkSrFmj2C1vytl8shitBDBEiTT-ETWpDQRKa-ZDF0lF4u0DojH33fkrMDuQXkznQeddQC1O3YtdykivGP5r_q9lmYfcOYKtvZn_Dr9RSUQN2xPYm5oKl-TGTVjbuFGP74xJaB45yU/s1600/coment1b.png) no-repeat;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a { /*fonte do nome do autor*/
font-family: Delius Swash Caps!important;
font-size: 16px!important;
color: #fff!important;
text-shadow: 1px 1px 1px #77377d!important;
padding: 5px 5px 10px 35px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a:hover { /*fonte do nome do autor*/
text-shadow: 1px 1px 1px #d97325!important;
letter-spacing: 1px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .datetime {background: rgba(255,255,255,0.5);}
.comments .comments-content .datetime a { /*data do comentário*/
font-size: 12px!important;
float: right;
font-family: Muli!important;
text-decoration: none;
color: #e3a7eb!important;
text-shadow: 2px 2px 0px #83358f, -2px -2px 0px #83358f, -1px 1px 0px #83358f, 1px -1px 0px #83358f!important;
margin-top: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .datetime a:hover { /*data do comentário em hover*/
color: #fff!important;
text-shadow: -2px 2px 0px #f7751e, 2px -2px 0px #f7751e, -1px -1px 0px #f7751e, 1px 1px 0px #f7751e!important;
letter-spacing: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0}
.comments .comments-replybox {border:none;height:200px;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.4em;
padding-right: 4px;
}
.avatar-image-container { /*enquadramento do avatar*/
margin: 5px 3px 5px 5px;
border-radius: 3px;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFt5rfUqkg7LbVFRzaVlwXMxFDprFfSuF2Lj3TDgMaAFhEe0Om4KiWaw3iNukz7XPl6UAlPgYkscyVtlqJv4mMD2V_okyqnopONCyw7ZybnKIr6FlX9bLj_uz49TaNGTWIUb92cHcpXZQ/s1600/fundo000.png) no-repeat;
box-shadow: inset 0px 0px 3px #707070, 0px 0px 3px #fff;
max-width: 35px;
max-height: 29px;
min-height: 29px;
min-width: 35px;
-webkit-transform: rotate(-35deg);
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img { /*avatar também*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbC3jXt98xtwnUCK4tDqV8V1R-F3oEuSwmZ4c9HivsQMrTIHor7Tw9LPauMxsoUtYeKPizYtpKId9Rlhs6dVzIsW1ffSKd_weBpQ-1B8MzbIFS_Eu1niWjutEbEXqOt2g6CfNHY91c8E/s1600/fundo0000b.png) no-repeat;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.avatar-image-container:hover { /*enquadramento do avatar*/
margin: 5px 3px 5px 5px;
outline: 6px double rgba(250,250,250,0.5);
-webkit-animation: mntd 2s alternate infinite linear;
-moz-animation: mntd 2s alternate infinite linear;
-o-animation: mntd 2s alternate infinite linear;
-ms-animation: mntd 2s alternate infinite linear;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img:hover { /*avatar também*/
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
@-webkit-keyframes mntd {
20% {box-shadow:4px 4px 0px #c76fba, -4px -4px 0px #ff9447;}
40% {box-shadow:-4px 4px 0px #c76fba, 4px -4px 0px #ff9447;}
60% {box-shadow:-4px -4px 0px #c76fba, 4px 4px 0px #ff9447;}
80% {box-shadow:4px -4px 0px #c76fba, -4px 4px 0px #ff9447;}
100% {box-shadow:4px 4px 0px #c76fba, -4px -4px 0px #ff9447;}
}
Voilá ^^
Obrigado por disponibilizar este modelo tão fofo e bem feito.
ResponderEliminarI want to let the world know about Doctor AKHERE the Great spell caster that brought back my husband to me when i thought all hope was lost. Doctor AKHERE used his powerful spell to put a smile on my face by bringing back my man with his spell, at first i thought i was dreaming when my husband came back to me on his knees begging me to forgive him and accept him back and even since then he loves me more than i ever expected so i made a vow to my self the i will let the World know about Doctor AKHERE because he is a God on earth. Do you have problems in your relationship ? have your partner broke up with you and you still love and want him back ? Do you have problem with your finance ? or do you need help of any kind then contact Doctor AKHERE today for i give you 100% guarantee that he will help you just as he helped me. Doctor AKHERE email is: AKHERETEMPLE@gmail.com or
ResponderEliminarcall/whatsapp:+2349057261346