Personalizando seu blog: Personalize seu layout + Menu dentro de uma faixa no banner - Parte 1

                         

Como prometido, volto ao blog com a série de posts Personalizando seu blog, e o tema de hoje é Personalize seu layout- Parte 1.
Resolvi dividir esse tema em algumas partes, já que é um assunto muito extenso e que com certeza é um dos maiores interesses de blogueiras iniciantes; este post vai ficar muito grande, mas vai ser muito legal.

O layout do seu blog é capaz de dizer muita coisa; ele é a identidade do seu blog, nele você pode expressar seus gostos, seu estilo e como você trabalha. Um layout personalizado é muito importante, pois, se você tem um blog, seja por hobbie ou como um trabalho, é ele que serve como cartão de visitas para os seus leitores e também para empresas que venham futuramente procurar você para fechar parcerias.
No início, acho muito válido o uso de layouts grátis para blogueiras iniciantes, já que investir em um layout exclusivo requer dinheiro e também, que fique claro, não adianta investir em algo caro se o seu blog é recém criado; espere até ter uma quantidade significativa de seguidores/leitores. Existe uma infinidade de layouts prontos pela internet, basta procurar no google.

Eu deixo aqui alguns que eu achei pela internet e gostei bastante:




Solteiras, noivas, casadas: http://www.solteirasnoivascasadas.com/2013/02/layout-novo-e-layout-free.html




Vinte e poucos: http://lovelydreamlayout.blogspot.com.br/2013/03/quer-esse-layout.html


E eu resolvi aproveitar e também disponibilizar alguns banners e backgrounds.
Os banners são de minha autoria e os backgrounds peguei no google.

Ps. Os banners tem 1120px de largura, e portanto, ficam perfeitamente instalados quando a largura do blog é de 1200px. Caso o banner fique cortado ou algo do tipo, não esqueça de ajustar a largura do seu blog para 1200px. Para isso vá em: Modelo> Personalizar>Ajustar larguras. 
Para pegar as imagens no tamanho original, clique no nome ao lado do banner:






  
Banner: CAT PRINCESS


Para colocar o nome do seu blog no banner, basta utilizar um programa editor de imagens, como o Paint por exemplo. Veja o exemplo usando o Paint:


 E como vocês podem ver, todos os banner tem uma faixinha, igual a do meu blog. Ela serve para deixar o menu dentro do cabeçalho.
O tutorial peguei no blog Go Imagine (CLIQUE AQUI), e é super fácil de fazer.

Para começar, vá em Modelo>Personalizar>Avançado>Plano de fundo das guias.
Deixa as duas abas em TRANSPARENTE. 


Lembre-se que as páginas, ou seja, o Menu, deve ficar posicionado abaixo do cabeçalho na guia Layout


Agora vá em Modelo>Editar HTML 
Aperte Ctrl+F e procure por .tabs-inner { , e depois que encontrar cole abaixo:

margin-top: -50px; /*para afastar o menu para cima ou baixo troque o número*/
margin-left: 0px; /*para afastar o menu para esquerda ou direita troque o número*/

Para ajustar o menu dentro da faixa mude os valores de margin-top e margin-left.
Lembrando que em margin-top valores negativos sobem e positivos descem.
Em margin-left negativos vão para esquerda e positivos se deslocam em direção a direita.

Visualize o modelo, se estiver tudo ok, salve. Pronto!

 *Não é permitido fazer modificações nos banners.

E aqui deixo alguns backgrounds:

 
 
 
 


Ufa.... GOSTARAM? Post bem longo, mas cheio de coisas super legais pra você personalizar seu blog.

Veja os outros posts da série:
Se você pegar algo, deixe o link do seu blog nos comentários para que eu possa dar uma olhadinha e também seguir seu blog.
Super Beijo, e até o próximo post ;*