Image Map

31.3.13

Big Tutorial: Criando um Layout/Template - Parte 2



Hola Chicos e Chicas! Como vão? Ontem de noite fechei o blog para mudar o cabeçalho, esse está mais do meu agrado do que o antigo, espero que tenham gostado! Ah, feliz páscoa para todos. Eu estou louca pra abrir meus ovos de páscoa e devorar tudinho haha. Continuando o big tutorial de como fazer um layout, nesta parte estarei explicando como personalizar a área da postagem. Confesso que acho meio chatinho personalizar essa parte rs, mas é preciso. Vamos começar? GO!


Primeiro colocaremos uma sombra interna. Para isso procure por:  .main-inner .column-center-inner { .
Quando achar cole abaixo o seguinte:

border-top: 10px #c74c66 solid; *\cor, tamanho e tipo de bora acima do post*/
border-bottom: 10px #c74c66 solid; *\cor, tamanho e tipo de bora abaixo do post/
box-shadow:0 0 3px #ccc, inset 0 0 20px #d1d1d1; */ sombra interna na caixa  */
padding: 10px;

 Agora vamos personalizar o título do post. Procure por h3.post-title { e abaixo cole:
text-align: center;
 Procure por:

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
}

Para facilitar pesquise pela primeira linha, h3.post-title a { e depois pela segunda, h3.post-title a:hover { . Assim você já acha os códigos mostrados acima. 


Depois de acha-lo apague e substitua por:

h3.post-title a {
 font-family: Rochester;
color: #c74c66;
text-shadow: 1px 1px 0px #803343;
font-size: 30px;
-webkit-transition-duration: .30s;
}
h3.post-title a:hover {
font-family: Rochester;
color: #803343;
text-shadow: 1px 1px 0px #c74c66;
font-size: 30px;
-webkit-transition-duration: .30s;
}
O meu ficou assim:


 Vamos personalizar a data do blog.

Procure por:  .main-inner h2.date-header { . Aparecerá assim:

.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
Substitua todo esse código por:

.main-inner h2.date-header {
font-size: 10px;
float: left; /* posicionamento*/
background: #d85a86; /*cor do fundo*/
color: #fff; /*cor da fonte*/
font-family: Tahoma, Tahoma; /* fonte */
margin:-30px 2px 5px -40px;
-border-radius: 0px 5px 0px 5px;
-moz-border-radius: 0px 8px 0px 8px;
-webkit-border-radius: 0px 8px 0px 8px;
box-shadow:0 0 3px #ccc, inset 0 0 20px #b33e68; /*sombra interna*/
}
Agora irei repassar alguns tutoriais básicos de personalização:
Personalizar o Anterior, Início e Próxima. Para isso siga este tutorial: (clique);
Blockquote cute personalizado com hover: (clique);
Comentários personalizados (tutorial do Kawaii World): (clique);
Rodapé do blog transparente (tutorial do blog My Sweet Sneaker): (clique);
Personalizando rodapé da postagem: (Tutorial do blog Jackie Dream): (clique).

Depois de fazer a personalização básica, você pode fazer um cabeçalho. O meu ficou assim:


É isso gente. Espero que tenham gostado. Pensei que o tutoriais fosse ficar dividido em três partes, mas ficou só em duas. Beijos!

12 comentários:

  1. Ingrid , uma coisinha que eu queria perguntar , como você colocou aquele quadrado que mostra slides de postagens recentes , no cabeçalho ? Estou louquíssima pra saber ! Faz muito tempo que eu procuro !

    Beijoos >< .

    http://www.photoscaperosa.blogspot.com

    ResponderExcluir
  2. Amei!
    Tô seguindo esse tutorial, tu evoluiu demais Ingrid! Eu lembro do teu 1º tuto de layout, ficou ótimo, mas esse tá ficando bem melhor! *-----*

    Beeijos!
    g
    garota-bomba...

    ResponderExcluir
  3. Amei, muito útil e ficou super lindo o resultado, vou dar uma conferida na parte 1 que não tinha visto!

    Cliquesnocapricho.blogspot.com

    ResponderExcluir
  4. Adorei o tuto!
    http://www.chocolatedocee.blogspot.com

    ResponderExcluir
  5. Adorei o tutorial!
    Ajudou bastante!! (:
    Beijos,
    Own Mine

    ResponderExcluir