Treze Desejos: Tutorial: Comentários do blog personalizado + como usar o novo modelo de editar HTML

Oi amores

Antes de tudo, vou pedir desculpas por ficar muito tempo sem entrar no blog para postar, eu estava em semana de prova.. mas para a alegria de vocês minha prima postou aqui enquanto eu não estava podendo. Vamos ao que realmente interessa ? O tutorial é bem simples e vou mostrar como fazer, com print do novo modelo que está o "editar html". Clique em leia mais.

Antes

Depois

É bem simples,

Vá em modelo

Depois clique em Editar HTML

Clique em qualquer lugar aonde está os codigo e depois dê ctrl+f , se você não clicar em qualquer parte do codigo, o ctrl+f vai abrir em outro lugar e você não conseguirar pesquisar.

- Depois de ter feito crtl+f vai aparecer uma barrinha escrito "search", digite ]] e aperte enter. Logo depois vai aparecer o codigo "]]></b:skin>" .

Cole esse codigo ACIMA de ]]></b:skin> e salve o modelo

(Passe o mouse na caixinha e clique com o mouse direito em copiar).

/**======================================================================

=======================AREA GERAL DOS COMMENTS===========================

========================================================================**/

@font-face {font-family:'Merienda';src:local('Merienda'), local('Merienda-Regular_0_wt'), url(http://themes.googleusercontent.com/static/fonts/merienda/v1/4NYVQDcgs3Fbi_xdFMC7lPesZW2xOQ-xsNqO47m55DA.woff) format('woff')}

.comments{

width:95% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */

margin:0 auto;

font:normal 12px verdana !important; /* FONT DO TEXTO - se preferir troque */

background:#fff url(http://4.bp.blogspot.com/-5HvIPNqKnQY/UWAuFPj4mOI/AAAAAAAAXVk/N4MHTHfMyYE/s1600/Bg_pattern_by_DigitalGerm.jpg)!important;

border-radius:0;

}

/**=======================================================================

HEADING DOS COMMENTS (1 comentario, 2 comentários...)

========================================================================**/

.comments h3,.comments h4{

background:#;

opacity:0.9;

width:96%;

padding:7px;

margin-bottom:10px;

color:#ff1490 !important; /* COR DO TEXTO - se preferir troque */

font-family:'Sofia' !important;/* FONT-FAMILY - se preferir troque */

font-size:20px !important; /* TAMANHO DO TEXTO - se preferir troque */

}

/** ==================================================================

BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)

====================================================================**/

.comments .comment-block {

position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */

background:#000; /* COR DO FUNDO */

margin-left:-8px;

padding:0 15px 5px 63px;

border:1px #222 solid;

border-top:20px #333 solid;

min-height:100px!important;

border-radius:0 0 0 0

}

.comments .comments-content .comment {

padding:20px 10px !important;

margin-bottom:15px !important

}

/* estilos para o nome do autor do comentário */

.comments .comments-content .user a{

background:none !important;

color:#eee !important;

font:normal 20px 'Sofia';

font-weight:400!important;

margin-top:-2px;

}

.comments .comments-content .user{

color:#eee !important;

font:normal 20px 'Sofia';

font-weight:400!important;

padding:4px 16px;

margin-top:-2px;margin-left:10px

}

/* estilo da data */

.comments .comments-content .datetime a{

background:none !important;

font:bold 11px courier new;

float:right;

font-size:10px;

color:#666 !important;

border:0 !important

}

/* estilo do avatar */

.avatar-image-container {

min-width:59px; /* determina um minimo de largura */

min-height:60px; /* determina um minimo de altura */

padding:0 !important;

margin-left:0 !important;

margin-top:7px !important;

position:absolute !important;

overflow:hidden /* hack para evitar serrilhado na imagem */;

background:#444;

border:3px #333 solid;

}

.avatar-image-container img {

border:0;

margin:0;

max-height:60px;

min-height:60px;

max-width:60px;

min-width:60px;

border-radius:0

}

/** ==================================================================

=====================TEXTO DO COMENTÁRIO=============================

====================================================================**/

.comments p{

background:transparent !important;

border:0 !important;

text-shadow:0 1px #000 !important;

padding-left:30px !important;

color:#777 !important

}

/** ==================================================================

=======================BOTAO - RESPONDER==============================

====================================================================**/

/* botao responder do segundo nível */

.comments .continue a {

background: #ff1490 !important;

color:#fff!important;

float:right;

padding:0px 4px!important;

height:20px!important;

line-height:10px !important;

margin-top:-40px !important;

text-shadow:0 0!important;

}

/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */

.comments .comment .comment-actions a,.comments .continue a {

float:right!important;

font:normal 14px "Sofia" !important;

color:#fff!important;

padding:1px 6px;

border:0 !important;

line-height:20px!important;

margin:12px;

margin-left:15px;

text-shadow: 0 0;

background: #ff1490;

font-weight:800;

}

/* botao hover*/

.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover,.comments .continue a:hover {

text-decoration:none !important;

opacity:0.7!important

}

/* estilos para bloco de respostas */

.comments .comment-thread.inline-thread {

background-color:transparent !important;

padding:0.5em 1em;

border-radius:5px;

border:0!important;

margin-right:-15px;

margin-bottom:-60px

}

.comments .comments-content .comment-replies {

margin-top:1em;

margin-left:46px !important

}

.comments .continue {

border-top:0 !important;

margin-top:10px !important

}

.comments .thread-toggle,.icon.blog-author {display:none !important}

#comment-editor{opacity:0.7}

.avatar-image-container img{opacity:0.8}

/** ==================================================================

Fim [by Gizaa// http://candylland.blogspot.com e Treze Desejos// http://treze-desejos.blogspot.com

====================================================================**/

Está pronto :) .

Créditos a Candylland , esse tutorial foi baseado por esse blog. Fiz apenas algumas mudanças.

1.5.13

Tutorial: Comentários do blog personalizado + como usar o novo modelo de editar HTML