21 agosto 2012

Mais tutoriais!

Como prometido,eu ía dar muitos tutorais á vocês!
Vamos?
Vamos aprender como mudar o fundo dos comentários. Vejam um exemplo que eu uso aqui mesmo:
Untitled-4
Abra o blogger, clique em design > Editar HTML
Aperte Crtl+F e procure por comments.
Você deverá encontrar algo semelhante a isso:
#comments {
  padding: 15px;
}

ou isso:
.post-outer .comments {
  margin-top: 2em; }
Então, cole logo abaixo de comments, o código a seguir:
background: url(link da imagem de fundo) repeat;
Deverá ficar assim:
#comments {
background: url(link da imagem de fundo)repeat;
  padding: 15px;
}
Aí é só substituir o link da imagem e salvar as alterações!
 
Agora vamos aprender a personalizar o comentários!
 


Bem melhor não? Mas atenção:
Devido as mudanças no formulário de comentários do blogger, esse tutorial só funciona em blogs que tenha os comentários configurados para abrir em uma janela pop-up ou em outra guia. Blogs onde os formulário de comentário aparece logo abaixo da postagem, por enquanto não podem ser personalizados.
Outra coisa que é preciso destacar, é que não dá para visualizar os comentários antes de salvar o modelo. Ou seja, para ver como está ficando, você tem que salvar, depois abrir o blog para poder ver como ficaram os comentários. Então, é super importante, baixar uma cópia do seu modelo antes de começar as modificações.

Tudo entendido? Então vamos começar!

Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por #comments
Você deve apagar todo esse código:

#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}
E no lugar coloque esse:
#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */
margin:0;
color:#ff4d8e;
font-family: Lucida Handwriting;
font-weight: normal;
font-size:36px;
text-shadow: none;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
background: #FFF; /*Cor de fundo do nome de quem comentou*/
color: #8fddf6; /*Cor da fonte*/
font-family: Trebuchet MS; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
border-bottom: double 3px #8fddf6; /*Borda de baixo do nome*/
padding: 5px;
margin:.5em 0;
height:30px; /*Altura do espaço do nome*/
font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/
}
#comments-block .comment-author a:link {
text-decoration: none;
}
#comments-block .comment-body { /* Area do texto do comentario */
background: #000; /*Fundo da área do comentário*/
margin-top: -2px; /*Margem externa do topo*/
padding: 5px;
font-family:Trebuchet MS; /*Nome da Fonte*/
font-size: 12px;/*Tamanho da fonte*/
color:#fff; /*Cor da fonte*/
width: 500px; /*Largura da área dos comentários, altere de acordo com seu blog*/
/*Bordas arredondadas da área do comentário*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/*Fim do código da borda arredondada*/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 95%; /* tamanho da fonte da data do comentário */
text-align: right; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
#comments-block .comment-footer a:link{
background: #b9ff46; /*Fundo da data do comentário*/
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: italic;
color: #ccc; /*** cor do recado de 'comentário deletado' ***/
}
Mude as cores, fontes e o que mais precisar. Agora para personalizar a foto de que comentou, aperte Ctrl+F novamente e procure por /* Content abaixo deste trecho você vai ver quem tem isso: body { Você deve colar o código abaixo antes de body {

div.avatar-image-container {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/
margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/
}
div.avatar-image-container img {
display:none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
/*Efeito de quando passar o mouse em cima da foto*/
div.avatar-image-container img:hover {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
opacity: 0.8; /*Opacidade*/
-moz-opacity: 0.8; /*Opacidade*/
-webkit-opacity: 0.8; /*Opacidade*/
}
div.avatar-image-container img.delayLoad {
display:block;
}

Você pode mudar o efeito da imagem se quiser. Nesse código que eu passei o efeito é a imagem redonda, que fica quadrada quando passa o mouse em cima.
Agora a primeira letra do post destacada!



É mais ou menos assim que vai ficar. É muito simples de fazer. 
Vá no modelo do seu blog > Editar HTML
Aperte Ctrl+F e procure por ]]></b:skin>
Antes do código que você procurou, cole isto:

big {font-size:50px; /*tamanho da fonte*/
font-style:bold;
color: #ff1b72; /*Cor da letra*/
line-height:30px; /* altura da linha*/
float:left;}

Altere o tamanho e a cor da fonte de acordo com seu blog. A altura da linha, é melhor ajeitar depois que tiver aplicado o estilo no post. Salve as alterações.

Para aparecer a letra destacada, você tem colocar a primeira letra entre as tags <big></big>, no modo editar HTML do post. Veja um exemplo:

<big>O</big>lá! Hoje vamos falar sobre livros.

Depois que você publicar o post, se tiver ficado fora do lugar, você volta no HTML do seu blog e altera a altura da linha até ficar certinho.
 
Bom pessoal,esses foram os tutoriais de hoje!
Super créditos á:(www)
Beijos ^^

Um comentário:

  1. Ameei o Tutoriaaal
    Se você poder deixar a sua marquinha lá no meu bloguito ficarei muito feliz!
    --> CLICA?MundoFantásticoFeminino

    ResponderExcluir