Colocando barra no topo do blog e nas laterais

23 comentários | Postado por Attitude Included |
                 Tumblr_lrsq2nrdeg1qdgkr8o1_500_large


Hoje é meu primeiro post aqui no Tudo pra Mim, e vou ensinar pra vocês uma dica muito útil e que fica bem fofo.
Colocando barra (pattern) nas laterais...
1- Vá até Design, Editar HTML, aperte CTRL + F e procure por:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Caso você não ache, procure apenas por <body e ache algum código parecido com o citado acima.
2- Logo abaixo dele cole, se você quiser que a barre fique do lado DIREITO:
<div style=" background-image: url('LINK DO PATTERN'); top: 0px; right: 0px; width: 20px; height: 100%; z-index: 100; position: fixed;"></div>
3- Se você quiser que fique do lado ESQUERDO cole o seguinte código, fazendo as alterações:

<div style=" background-image: url('LINK DO PATTERN'); top: 0px; left: 0px; width: 20px; height: 100%; z-index: 100; position: fixed;"></div>
<div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 100%; height: 50px; z-index: 100; position: fixed;"></div>
* Se você quiser colocar um pattern nos dois lados, cole um código abaixo do outro.
** Altere o que está em negrito pelo link do seu pattern, e o que está em vermelho para a largura que você quer a sua barra.
Colocando a barra (pattern) no topo...

1- Vá até Design, Editar HTML, aperte CTRL + F e procure por:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
2- Cole o código abaixo acima do que você havia procurado, fazendo as devidas alterações:
<div style=" background-image: url('LINK DO PATTERN'); top: 0px; left: 0px; width: 100%; height: 20px; z-index: 100; position: fixed;"></div> 
 * Altere o que está em negrito pelo link do seu pattern, e o que está em vermelho para a largura que você quer a sua barra.
Alguma dúvida? É bem simples e deixa um toque especial ao seu blog. Espero que tenham gostado, beijos.

Como personalizar o header do post

15 comentários | Postado por Unknown | Arquivado em:
Oii amores, tudo bom? Aqui é a Juu e esse é o primeiro post que eu to fazendo aqui no Tudo pra mim, eu vou ensinar hoje como personalizar o header do post como o daqui, é bem fácil basta seguir os passos que eu vou dar... Exemplo:



Mais informações »

Footer personalizada

18 comentários | Postado por Emily Caroline | Arquivado em: , ,
Tumblr_l5vu6xzs1b1qzjtuzo1_500_large

   Cadê os comentários pessoal? Pelo jeito a maratona não vai continuar depois dos tutoriais postados... Bom, vou postar um tutorial super-hiper-mega útil! Todos sabem o que é footer, certo? Vou ensinar a fazer uma igual a nossa daqui, uma com imagem e outra com texto. Quer aprender? Clique no link abaixo!

Mais informações »

Personalizando a área dos comentários - Entenda!

12 comentários | Postado por Emily Caroline | Arquivado em: , ,
Tumblr_lqkn9a65ea1qb4hv5o1_500_large   
   Este tutorial não é exclusivo, mais é que houveram muitos pedidos. Vocês todos já devem terem suas áreas de comentários personalizadas, mais nem todos devem ter entendido o lugar certo. Então, hoje vamos fazer um tutorial bem explicado para vocês! Let's Go?

>>> Vá até Design, Editar HTML, aperte CTRL+F e procure por:
#comments {
Caso não achar, procure por  #comments h4 {.

Logo abaixo você encontrará algo parecido com isso:
#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;
}
Substitua todo o código acima pelo de baixo.
#comments h4 {
  margin: 1em 0;
  font-weight: bold; 
  font-size: 90%;
  line-height: 1.4em;
  letter-spacing:.1em; 
  color: #33CCCC; /*** cor do "Postar um comentário" e "x comentários:" ***/
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height: 1.6em;
  }

#comments-block .comment-author {
  background: #DADADA; /*** fundo do autor ***/
  font-size: 15px; /*** tamanho da fonte do nome do autor ***/
  margin:.5em 0;
  }

#comments-block .comment-body {
  margin:.25em 0 0;
  line-height: 1.4em; /*** espaço entre as linhas ***/
  padding: 8px; /*** margem interno da área do comentário ***/
  background: #F9F9F9; /*** fundo da área do comentário ***/
-webkit-border-radius: 10px; /*** bordas arredondadas na área do comentário ***/
-moz-border-radius: 10px;
border-radius: 10px;
  }

#comments-block .comment-footer {
  margin:7px 0 2em;
  line-height: 1.4em; 
  font-size: 90%; /*** tamanho da fonte da data do comentário ***/
  text-align: right; /*** alinhamento da data do comentário ***/
  letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/
  }

#comments-block .comment-body p {
  margin:0 0 .75em;
  }

.deleted-comment {
  margin: 10px 0 2em;
  font-style: italic;
  color: #ERTGKL; /*** cor do recado de 'comentário deletado' ***/
  }
 Então pessoal, vou dar umas explicações aqui para vocês entenderem algumas coisas melhor ok?

  Padding/Margin: É a margem interna, o espaço interior, para dentro da caixa. Já margin é a margem exterior, para fora. Entenda mais sobre padding e margin aqui.

  line-height/letter-spacing: line-height é a distância entre as linhas do texto, e letter-spacing é o espaço entre as letras da palavra. Ou seja, a palavra fica mais "solta".

  .deleted-comment {: É o conjunto que customiza quando você deleta algum comentário. Por exemplo, você deletou algum comentário do seu blog aparece essa frase né: "Esta postagem foi removida pelo autor."  Então, a frase ficará em itálico e cinza, se você não mudar nada no código, mais você pode modificar, claro.

Enfim pessoal, acho que foi uma explicação clara né? Espero que tenha ajudado vocês. Não é exclusivo (vou falar novamente) este tutorial, mais os outros serão ok? QUALQUER DÚVIDA NOS AVISE. Beijos, Emily.

Surpreendendo novamente...

9 comentários | Postado por Attitude Included | Arquivado em:
  Sejam todos super bem-vindos a Maratona de Tutoriais Tudo pra Mim! Os blogs Attitude Included, Trashy Girl e Place Fame, se reuniram e montaram este blog, em que disponibilizaremos os tutoriais e além disso, um Template Free.
  Iremos colocaremo uma enquete aqui no blog, e você terá a oportunidade de decidir se quer um layout free no estilo delicado, ou se pretende que disponibilizamos este atual layout para vocês! O template será disponibilizado aqui no blog, mais para isso é necessário você:
Estar nos seguindo;
Estar seguindo os blogs Attitude Included, Trashy Girl e Place Fame;
Não retirar os créditos de maneira alguma.
   Depois o blog Tudo Pra Mim vai continuar ativo e atualizado?
  O blog continuará ativo depois de termos feito mais ou menos os dez tutoriais, e continuaremos fazendo o possível para continuar atualizando aqui, mais para isso precisamos da colaboração de todos. Para isso, quem quiser divulgar, basta copiar um dos banners abaixo:

  Esperamos que tenham gostado daqui, e já está no blog o tutorial de como personalizar os comentários do seu blog. Beijos, Emily, Anna e Julia.
Assinar: Postagens (Atom)