Pedido: Personalizando o blog Pt.1

Hello amorecos,estou aqui de volta a ativa e muito feliz com mais um pedido de tutorial. Bem esse foi pedido pela Estarmari que é uma grande amiga do blog,sempre nos faz visitas  Continuem pedindo !
Eu sei que muitas blogueiras sabem como manter o blog mais na hora do layout, xii... dá aquele problemão,e por isso eu vim propor alguns passos para a personalização do templante pelo Html.


       1.    Cabeçalho: 

Muita gente acha que não,mais é a primeira coisa que os leitores vão olhar no design, não adianta arrasar nos gadgets e ter um cabeçalho desorganizado e sem graça. Por isso temos que ter bons editores como:

• Photoshop (www): Ele é o melhor,você pode fazer infinitas edições e ele com certeza vai dar um aspecto profissional. O único problema é que ele é um pouco dificil para quem não sabe.
• Photofiltre (www):  Parece com o photoshop, só não tem alguns recursos.
• PhotoScape (www): Apezar de ter poucas coisas para se fazer um cabeçalho,ele é bem útil para várias outras coisas.

Outra coisa são as fontes que vão usar,não dá para colocar letras super chamativas e com cara de Paint,isso vai acabar com teu trabalho,tenha certeza. Ha algum tempo eu disponibilizei um pacote de 600 fontes,podem baixá-lo (www) e abaixo tem mais algumas.

♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥

(Clique nos ♥ para ir ao Link)

Não se esqueçam que as cores do blog tem que combinar,então fiquem de olho na hora de produzir.

    2.  Postagens

Não á muito o que falar da ''Personalização'' dessa área não é? O importante é o bom conteúdo e fim, mas para os vaidosos de plantão eu trouxe alguns modelos.

- Primeiro remova a borda serrilhada doodelo Travel,assim: Vá em Modelo - Personalizar - Avançado - Deixe os planos de fundo transparentes (Plano de Fundo Principal, da Postagem e da Barra Lateral)...
-Personalizando: Vá em Modelo - Personalizar - Avançado, novamente e clique em Adicionar CSS e cole este código. Eu sei, ele é bem grande mesmo.

/* Modelo de Postagens by Hearts Naive World

---------------------------------------------------- *//**titulos**/

.post h3 a, .post h3 a:visited, .post h3, .comments h4 {

background: #fff;

color:#fcc;

font-size:22px;

font-family: 'Milonga', cursive;

text-shadow: 1px 2px 3px #fcc;

border-bottom: 2px dashed #eee;

text-align: right;

}

.post h3 a:hover {

color: #eee;

text-align: right;

-webkit-transition-duration: .30s;

}

/**area da postagem**/

.post{

background: #ffffff;

width: 600px;

color: #a1a1a1;

font-family: 'Milonga' cursive;

font-size: 12px;

text-shadow: 1px 2px 3px #eee;

text-align: justify;

border: 6px dashed #fee;

padding-right:10px;

padding-left: 10px;

box-shadow: 3px 4px 5px #bbb;

margin:10px 0;

}

/**rodape do post**/

.post-footer {

margin: .5em 0;

line-height: 1.6;

background: none;

color: #fcc;

width: 500px;

font-family: 'Milonga', cursive;

font-size: 12px;

}

.post-footer a{

color:#fcc;

}

.post-footer a:hover{

color:#fcc;

}

/**estilos das listas**/

.post ul li {

list-style: none;

margin: 0;

padding: 0;

padding: 0 0 4px 12px;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixBxieAzH4jZKVDuTrLVT_hVfYOyQZQAFLVsm9Qdhw1oLFZt0C1w0syur5BMvI8g3iSH1r4FnsaF5nVnnkkMt76d-l6bNAPWL1kibwOrw2lN0g5rcMZ2Xg227iN4ngPEJM8rvpVaUY/s1600/favlaco.gif") no-repeat 0 2px;

}

/**selecao colorida para o blog todo**/

*::-moz-selection {

background: #fff !important;

color: #fcc !important;

}

*::selection {

background: #fff !important;

color: #fcc !important;

}

/**estilo do leia mais**/

.jump-link {

float: center;

font-weight: bold;

font-size: 26px;

font-family: 'Milonga' cursive;

text-align:right;

padding: 1px 2px;

margin-left:20px;

}

.jump-link a {

color: #fcc; /* Cor do texto */

text-decoration: none;

font-weight: bold;

}

.jump-link:hover {

color: #fee; /* Cor do texto */

text-decoration:none;

}

/**efeito nas imagens**/

.post-body img:hover {-moz-opacity:0.30; opacity:0.30;-khtml-opacity:0.50;-webkit-transition:  0.4s; -moz-transition: 0.4s;transition: 0.4s;}

/**tamanho padrão para imagem**/

.post a img, .post img {

max-width: 530px;

margin: 0 auto;

padding: 5px;

}

/**formatacao de texto**/

u {/* Sublinhado */

text-decoration:none;

color:#61D2D6;

border-bottom: 1px solid #9BF0E9;

-webkit-transition: 0.4s;

}

u:hover {/* Sublinhado hover */

border-bottom: 1px solid #EDDE45;

-webkit-transition: 0.4s;

}

b, strong { /* Negrito */

color: #ED146F;

font-weight: bold;

}

i,em { /* Italico */

color: #EA3556;

text-decoration: none;

}

strike { /* Riscado */

text-decoration: strike;

color:#EB9F9F;

}

strike:hover { /* Riscado hover */

text-decoration: none;

color:#EB9F9F;

}

/**background e borda dos comentarios**/

.comments {

background: #fff;

width: 100%;

padding: 5px;

border: 6px dashed #fee;

}

Personalize as cores e se desejar mude o gif, mas não retire nossos créditos. A visualização é altomática,porém qualquer dúvida é só falar comigo.
- Clique no botão Aplicar ao Blog quando terminar de editar. Volte para Modelo, e em Editar HTML acrescente abaixo de <head> essa fonte:

<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'/>

Lembrando que podem escolher outras também.
- Os títulos de contagem de comentários ficam personalizados iguais aos dos posts; verifique se você já usa algum dos estilos, por exemplo, se já estiver usando css para o leia mais, para não ficar repetido, excluindo um dos dois de seu template. Pronto; salve e essa parte em sua edição está prontinha ou quase pronta, caso adicione mais estilos.

Daqui a alguns dias eu volto com outras dicas para o resto do blog, 

espero estar ajudando o(^◇^)o