29 novembro 2013

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çadonovamente 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

6 comentários:

  1. Obrigada por voltar a por!!! :)
    Excelente tuturial!!!
    Beijos :)
    http://fashion--and-you.blogspot.pt/

    ResponderExcluir
  2. Gostei das dicas uso PhotoScape e Photofiltre , bom você sabe mexer em Photoshop?? Se sim faça um tutorial tentando dar dicas para iniciantes como eu *&* Gostei muito das dicas.
    vouconfessarmilly.blogspot.com.br

    ResponderExcluir
  3. Muito bom Tutorial, adorei.
    Beijos | do-seu-jeito.blogspot.com

    ResponderExcluir
  4. Ótimo dia para vc amore
    passando para desejar
    um excelente fim de semana
    (⁀‵⁀) ∞ ღ ∞
    .`⋎´ღ¸.•°*”˜˜”*°•ღ
    Beijinhos.
    www.coisasdeladdy.com

    ResponderExcluir
  5. Da próxima vez que for fazer um lay vou usar o seu tuto, estou esperando pela segunda part *---*, está ficando ótimo, e mais do que útil.
    O meu cabeçalho eu fiz usando o Photoscape, muita gente não gosta, mas eu o considero muito bom.

    Estante de Sonhos

    ResponderExcluir
  6. fica muito lindo gostei <3

    cherrycharming2.blogspot.com.br

    ResponderExcluir