Pedido: Personalizando o blog Pt.1
Autor: Biia Martins | Publicado: 2013-11-29T18:46:00-03:00




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&nbsp;&nbsp;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.


&nbsp; &nbsp; &nbsp; &nbsp;1. &nbsp; &nbsp;Cabeçalho:&nbsp;


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): &nbsp;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.

♥ ♥&nbsp;♥ ♥ ♥ ♥&nbsp;♥&nbsp;♥
(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.





&nbsp; &nbsp; 2. &nbsp;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&nbsp;Modelo - Personalizar - Avançado,&nbsp;novamente e clique em Adicionar CSS e cole este código. Eu sei, ele é bem grande mesmo.


/* Modelo de Postagens by Hearts Naive World

----------------------------------------------------&nbsp;*//**titulos**/

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

background:&nbsp;#fff;

color:#fcc;

font-size:22px;

font-family: 'Milonga', cursive;

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

border-bottom: 2px dashed&nbsp;#eee;

text-align: right;

}

.post h3 a:hover {

color:&nbsp;#eee;

text-align: right;

-webkit-transition-duration: .30s;

}

/**area da postagem**/

.post{

background:&nbsp;#ffffff;

width: 600px;

color:&nbsp;#a1a1a1;

font-family: 'Milonga' cursive;

font-size: 12px;

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

text-align: justify;

border: 6px dashed&nbsp;#fee;

padding-right:10px;

padding-left: 10px;

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

margin:10px 0;

}

/**rodape do post**/

.post-footer {

margin: .5em 0;

line-height: 1.6;

background: none;

color:&nbsp;#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("http://1.bp.blogspot.com/-DQi7e950hE4/TnO4APlAzAI/AAAAAAAABus/eky4n83jrKQ/s1600/favlaco.gif") no-repeat 0 2px;

}

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

*::-moz-selection {

background:&nbsp;#fff&nbsp;!important;

color:&nbsp;#fcc&nbsp;!important;

}

*::selection {

background:&nbsp;#fff&nbsp;!important;

color:&nbsp;#fcc&nbsp;!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:&nbsp; 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&nbsp;#9BF0E9;

-webkit-transition: 0.4s;

}

u:hover {/* Sublinhado hover */

border-bottom: 1px solid&nbsp;#EDDE45;

-webkit-transition: 0.4s;

}

b, strong { /* Negrito */

color:&nbsp;#ED146F;

font-weight: bold;

}

i,em { /* Italico */

color:&nbsp;#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:&nbsp;#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 &lt;head&gt; essa fonte:


&lt;link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'/&gt;


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,&nbsp;

espero estar ajudando&nbsp;o(^◇^)o