13/07/2012

Área de comentários personalizada .

Olá meus amores , como vão ? Espero que bem . Hoje vou postar um Tutorial de como deixar sua área de comentários igual a minha . Lembrando que eu peguei esse tutorial do Candylland . Tutorial a pedido da dona do Blog Fashion em Cores .
Ok , vamos começar . São dois estilos diferentes caso fique com alguma dúvida deixe um comentário .

#1 Estilo : Sweet Drean .


001 /**======================================================================002 AREA GERAL DOS COMMENTS003 ========================================================================**/004  005 @font-face {font-family: 'Lilita One';src:local('Lilita One'),local('LilitaOne'),url('http://themes.googleusercontent.com/static/fonts/lilitaone/v1/4FUUC-PxqHfbmE-DcA6LXBsxEYwM7FgeyaSgU71cLG0.woff') format('woff')}006  007 .comments{008 width:99% !important;009 margin:0 auto;010 font-style:normal !important;011 font-size:12px !important;012 font-family:verdana !important;013 background:url(http://capricho.abril.com.br/v2010/css/15anos/i/fundo.png) !important;014 border-radius:10px;015 }016  017 /**======================================================018 HEADING DOS COMMENTS (1 comentario, 2 comentários...)019 ========================================================================**/020  021 .comments h3,.comments h4{022 width:98%;023 padding:7px;024 margin-bottom:10px;025 color:#fff;026 text-align:center;027 text-shadow:0 3px #faa;028 font-family:'Lilita One' !important;/* FONT-FAMILY - se preferir troque */029 font-size:33px !important;/* TAMANHO DO TEXTO - se preferir troque */030 }031  032 /** ==================================================================033 BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)======**/034  035 .comments .comment-block {036 position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */037 background:#fff; /* COR DO FUNDO */038 margin-left:23px;039 padding:0 15px 0 23px;040 border-top:15px #faa solid;041 border-radius:5px;042 box-shadow:0 0 3px #ccc, inset 0 0 11px #fee043 }044  045 .comments .comments-content .comment {046 padding:20px 10px !important;047 margin-bottom:15px !important048 }049  050 /* estilos para o nome do autor do comentário */051 .comments .comments-content .user a{052 font-style:normal;053 border:0;054 color:rgb(240,94,138)!important;055 letter-spacing:1px;056 font-family:'Lilita One';057 font-size:20px;058 background:transparent;059 padding:4px 36px;060 margin-left:-31px !important;061 border-bottom-right-radius:10px;margin-top:-2px062 }063  064 .comments .comments-content .user{065 font-style:normal;066 border:0;067 color:rgb(240,94,138) !important;068 letter-spacing:1px;069 font-family:'Lilita One';070 font-size:20px;071 background:transparent;072 padding:4px 36px;073 margin-left:11px !important;074 border-bottom-right-radius:10px;margin-top:-2px075 }076  077 /* estilo da data */078 .comments .comments-content .datetime a{079 background:none !important;080 font:bold 11px courier new;081 float:right;082 font-size:10px;083 color:#999;084 border:0 !important085 }086  087 /* estilo do avatar */088 .avatar-image-container {089 min-width:55px; /* determina um minimo de largura */090 min-height:55px; /* determina um minimo de altura */091 border:5px #fbb solid; /* borda */092 padding:0 !important;093 margin-left:23px !important;094 margin-top:17px !important;095 position:absolute !important;096 overflow:hidden !important;097 background:#f90;098 }099  100 .avatar-image-container img {101 border:7px #ff1499 solid;102 margin:0;103 max-height:55px;104 min-height:55px;105 max-width:55px;106 min-width:55px;107 border-radius:60px; /* arredondamento */108 }109  110 /** ==================================================================111 TEXTO DO COMENTÁRIO ===============================================**/112  113 .comments p{114 font-size:12px !important;115 font-family:trebuchet ms !important;116 text-shadow:0 1px #ccc !important;117 padding-left:55px !important;118 padding-bottom:20px;119 color:#888 !important120 }121 /** ==================================================================122 BOTAO - RESPONDER123 ====================================================================**/124  125 /* botao responder do segundo nível */126 .comments .continue a {127 background:#fff !important;128 color:#999 !important;129 float:right;130 padding:8px !important;131 height:10px !important;132 line-height:15px !important;133 margin-top:-35px !important;134 }135  136 /* botao responder do primeiro nível, mais estilos para o botao do segundo nível */137 .comments .comment .comment-actions a,.comments .continue a {138 font-size:11px !important;139 float:right;140 height:10px !important;141 color:#fff;142 padding:6px;143 border:0 !important;144 line-height:10px;145 margin:5px;146 margin-left:40px;147 font-family:helvetica;148 text-shadow: 0 0;149 border-radius: .5em;150 background: rgb(240,94,138);151 font-weight:800;152 box-shadow:0 1px 2px #666153 }154  155 /* botao hover*/156 .comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {157 text-decoration:none !important;158 padding-bottom:4px159 }160  161 /* estilos para bloco de respostas */162 .comments .comment-thread.inline-thread {163 background-color:transparent !important;164 margin-top:40px;165 padding:0.5em 1em;166 border-radius:5px;167 border:1px #faa dashed168 }169  170 .comments .comments-content .comment-replies {171 margin-top:1em;172 margin-left:56px !important173 }174  175 .comments .continue {border-top:0 !important}176 .comments .thread-toggle,.icon.blog-author {display:none !important}177 /** ==================================================================178 Fim [www.candylland.net]===========================================**/

#2 Estilo :  Sweet MakeUp .




001 /**======================================================================
002 AREA GERAL DOS COMMENTS
003 ========================================================================**/
004 @font-face {
005 font-family: 'Oleo Script';
006 font-style: normal;
007 font-weight: 400;
008 src: local('Oleo Script'), local('OleoScript-Regular'), url('http://themes.googleusercontent.com/static/fonts/oleoscript/v1/_weQNDK6Uf40CiGFKBBUjobN6UDyHWBl620a-IRfuBk.woff') format('woff')
009 }
010  
011 .comments{
012 width:99% !important;
013 margin:0 auto;
014 font-style:normal !important;
015 font-size:12px !important;
016 font-family:verdana !important;
017 background:url(http://capricho.abril.com.br/v2012/css/i/bg-site.png) !important;
018 border-radius:10px;
019 box-shadow:0 0 5px #aaa;
020 }
021  
022 /**=======================================================================
023 HEADING DOS COMMENTS (1 comentario, 2 comentários...)
024 ========================================================================**/
025 .comments h3,.comments h4{
026 width:98%;
027 padding:7px;
028 margin:10px 0 !important;
029 color:rgb(237,28,63);
030 text-align:center;
031 text-shadow:0 0 2px #ccc;
032 background:;
033 font-family:'Oleo Script' !important;/* FONT-FAMILY - se preferir troque */
034 font-size:37px !important; /* TAMANHO DO TEXTO - se preferir troque */
035 }
036  
037 /** ==================================================================
038 BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)
039 ====================================================================**/
040 .comments .comment-block {
041 position:static !important;/* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
042 background:#fff; /* COR DO FUNDO */
043 margin-left:23px;
044 padding:0 15px 0 23px;
045 border-top:15px rgb(246,158,175) solid;
046 border-radius:5px;
047 box-shadow:0 0 3px #ccc, inset 0 0 11px #eee
048 }
049  
050 .comments .comments-content .comment {
051 padding:20px 10px !important;
052 margin-bottom:15px !important
053 }
054  
055 /* estilos para o nome do autor do comentário */
056 .comments .comments-content .user a{
057 font-style:normal;
058 border:0;
059 color:rgb(240,94,138) !important;
060 letter-spacing:1px;
061 font-family:'Oleo Script';
062 font-size:26px;
063 text-shadow:0 1px #aaa;
064 background:transparent;
065 padding:4px 36px;
066 margin-left:-31px !important;
067 border-bottom-right-radius:10px;margin-top:-2px
068 }
069  
070 .comments .comments-content .user{
071 font-style:normal;
072 border:0
073 color:rgb(240,94,138) !important;
074 letter-spacing:1px;
075 font-family:'Oleo Script';
076 font-size:26px;
077 text-shadow:0 1px #aaa;
078 background:transparent;
079 padding:4px 36px;
080 margin-left:11px !important;
081 border-bottom-right-radius:10px;margin-top:-2px
082 }
083  
084 /* estilo da data */
085 .comments .comments-content .datetime a{
086 background:none !important;
087 font:bold 11px courier new;
088 float:right;
089 font-size:10px;
090 color:#999;
091 border:0 !important
092 }
093  
094 /* estilo do avatar */
095 .avatar-image-container {
096 min-width:55px; /* determina um minimo de largura */
097 min-height:55px; /* determina um minimo de altura */
098 border:5px #999 solid; /* borda */
099 padding:0 !important;
100 margin-left:23px !important;
101 margin-top:17px !important;
102 position:absolute !important;
103 overflow:hidden !important;
104 background:#666;
105 }
106  
107 .avatar-image-container img {
108 border:3px #000 solid;
109 margin:0;
110 max-height:48px;
111 min-height:48px;
112 max-width:48px;
113 min-width:48px;
114 }
115  
116 /** ==================================================================
117 TEXTO DO COMENTÁRIO
118 ====================================================================**/
119 .comments p{
120 font-size:14px !important;
121 font-family:oleo script !important;
122 text-shadow:0 1px #eee !important;
123 padding-left:55px !important;
124 padding-bottom:20px;
125 color:#888 !important
126 }
127  
128 /** ================================================================
129 BOTAO - RESPONDER
130 ====================================================================**/
131  
132 /* botao responder do segundo nível */
133 .comments .continue a {
134 background:#fff !important;
135 color:#999 !important;
136 float:right;
137 padding:8px !important;
138 height:10px !important;
139 line-height:15px !important;
140 margin-top:-35px !important;
141 }
142  
143 /* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
144 .comments .comment .comment-actions a,.comments .continue a {
145 font-size:11px !important;
146 float:right;
147 height:10px !important;
148 color:#fff;
149 padding:6px;
150 border:0 !important;
151 line-height:10px;
152 margin:5px;
153 margin-left:40px;
154 font-family:helvetica;
155 text-shadow: 0 0;
156 border-radius: .5em;
157 background: rgb(240,94,138);
158 font-weight:800;
159 box-shadow:0 1px 2px #666
160 }
161  
162 /* botao hover*/
163 .comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
164 text-decoration:none !important;
165 padding-bottom:4px
166 }
167  
168 /* estilos para bloco de respostas */
169 .comments .comment-thread.inline-thread {
170 background-color:transparent !important;
171 margin-top:40px;
172 padding:0.5em 1em;
173 border-radius:5px;
174 border:1px #ff1499 dashed
175 }
176  
177 .comments .comments-content .comment-replies {
178 margin-top:1em;
179 margin-left:56px !important
180 }
181  
182 .comments .continue {border-top:0 !important}
183 .comments .thread-toggle,.icon.blog-author {display:none !important}
184  
185 /** ==================================================================
186 Fim [www.candylland.net]
187 ====================================================================**/

Beijinhos ;3


9 comentários:

  1. ótimo tutorial beijos
    http://dream-of-cherry.blogspot.com.br/

    ResponderExcluir
  2. Cola esse código antes do que?
    www.fashionemcores.com

    ResponderExcluir
    Respostas
    1. antes de ]]> , bom eu axoo né?

      visitem: http://revirando-tudo.blogspot.com

      Excluir
    2. Francieli é só você apagar o código da área dos comentários e substituir pelo código em HTML de um dos estilos ,lembrando que você terá que tirar o número no começo de cada linha . Beijinhos ;3

      Excluir
  3. Waaa super util!!!

    E também trabalhoso né? Xp

    Seguindo, bjs!
    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  4. OMG :h: Que perfeitos vou usar no meu proximo proximo + proximo lay :j:

    http://perfect-world-oficial.blogspot.com.br/

    ResponderExcluir
  5. Respostas
    1. É só apagar todo seu código da área dos comentários e substituir por esse meu Anjo ...

      Excluir

-Primeiro , não não peça Tutoriais / Materiais pelos comentários , use a Ask - me .
-Não desrespeite ninguém , tenha educação .
- Comente sobre o post .
- Deixe a sua url no fim do cometário para que eu posso lhe retribuir o mesmo .