Coffee & Mustache: setembro 2015

Olá!

A pedido de uma seguidora irei fazer um TUTORIAL de como personalizar a areá dos comentários, tirar o simples que já vem no blog! é super fácil preste a atenção e você vai conseguir^^

(Assim vai ficar depois de você colocar no Blog e editar^^)

Antes de começar você terá que deixar os comentários "incorporados" !
Vá em Configurações ->Postagens e comentários -> Local do comentário marque a opção "incorporados" !
------------------------------------------------------
Agora vá em Modelo->Editar HTML, aperte Ctrl+F e procure por ]]></b:skin>
Copie o código aqui abaixo e cole acima de ]]></b:skin>

/**********************INICIO COMENTARIOS PERSONALIZADOS************************/

#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/

color: #64BCBA; /*Cor da fonte do numero total de comentarios*/

font-family: Comic Sans MS; /*Fonte do texto*/

font-size: 20px; /*Tamanho da fonte*/}

#comments {

background: #fff; /*Fundo da área geral dos comentários*/

padding: 15px;

}

.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}

.comment-header {

background: #FF6699; /*Cor de fundo do nome do autor do comentário*/

border: 4px solid #FF6699; /*Borda onde fica o nome do autor do comentário*/

border-radius: 20px 20px 0 0;

padding: 3px;}

.comment-header a {

color: #fff !important; /*Cor do nome do autor do comentário*/

font-family: Verdana; /*Fonte do nome do autor do comentário*/

font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/

font-weight: bold; /*Troque bold por normal para tirar o negrito*/}

.comment-header a:hover { color: #FAA7B9 !important; /*Cor do nome do autor do comentário quando passa o mouse*/

text-decoration: none;}

.comments .comments-content .datetime a{

font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/

float: right; /*Data alinhada a direita*/

line-height: 16px; /*Altura da linha da data e hora*/}

.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/

margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/

position: relative;

background: #fff; /*Fundo do bloco de texto do comentário*/

border: 1px dashed #FF6699; /*Borda do bloco de texto do comentário*/

border-radius: 0 0 20px 20px;

padding: 10px;

color: #3f3f3f; /*Cor da fonte do bloco de texto do comentário*/

font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {

/*Tamanho do avatar */

max-width: 50px;

max-height: 50px;

min-height: 50px;

min-width: 50px;

background: #FAA7B9; /*Cor da borda do avatar*/

padding: 3px; /*Espessura da borda do avatar*/}

.comments .avatar-image-container img{

/*Tamanho do avatar */

max-width: 50px;

max-height: 50px;

min-height: 50px;

min-width: 50px;}

.comments .comments-content .comment {

padding:20px 10px !important;

margin-bottom:15px !important}

.comments .comment .comment-actions a {

padding: 5px;

background: #64BCBA; /*Fundo dos botões responder e excluir*/

border: 1px solid #64BCBA; /*Borda dos botões responder e exluir*/

-Moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

color: #fff !important; /*Cor do texto dos botões responder e excluir*/

font-family: verdana; /*Fonte dos botões responder e excluir*/

font-weight: bold; /*Troque bold por normal para tirar o negrito*/

margin-right: 10px;}

.comments .comment .comment-actions a:hover {

background: #FAA7B9; /*Fundo dos botões responder e excluir quando passa o mouse*/

border: 1px solid #FAA7B9; /*Borda dos botões responder e excluir quando passa o mouse*/

color: #fff !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/

text-decoration: none;}

.comments .continue { border-top: none;}

.comments .continue a {display: none;}

/**********FIM DOS COMENTARIOS POR WWW.PAPOGAROTA.COM.BR********/

Edite ele ou deixe do jeito que esta se gostou^^
Para mudar as cores aconselho vcs a irem, na Tabela de Cores,
Qualquer duvida comentem!

CRÉDITOS
Pelo codigo HTML : www

Olá!

Como vão?^^ Bom Hoje vim trazer o primeiro Tutorial do Blog! Heeee.

Bom ele é super simples de colocar, a maioria dos blogs Teens usam! vamos ao TUTO?

EX:

O código usado para dar esse efeito é esse:

text-shadow: 1px 2px 3px #6a6a6a;

Pode editar da maneira que quiser^^ Agora vamos colocar no Blog! siga os passos abaixo:

♣ Abra o blogger, clique em design > Editar HTML

♣ Aperte Ctrl+F e procure por: post-title

♣ Você deverá achar um código parcecido com esse:

h3.post-title, h4 {

font: $(post.title.font);

color: $(post.title.text.color);

}

4 – cole abaixo da linha:

#h3.post-title, h4 {

O código da sombra que eu coloquei no começo do post. Seu código deve ficar assim:

h3.post-title, h4 { font: $(post.title.font); color: $(post.title.text.color); text-shadow: 1px 2px 3px #6a6a6a; }

text-shadow: 1px 2px 3px #6a6a6a;

♣ Visualize e salve.

♣Você pode alterar os valores e a cor da sombra para conseguir outros efeitos

--------------------------------------------------------------------------------------------------

Espero que tenham gostado e que usem! comentem aqui no post um tutorial que vcs querem!^^

11 de setembro de 2015

TUTORIAL///Como Personalizar os Comentários do Blogger

10 de setembro de 2015

TUTORIAL - Como colocar Sombra no Título do Post

8 de setembro de 2015

Coffee & Mustache - Me Apresentando♣