02 janeiro 2012

Big Tutorial:Layout Sweet



Oii amores,tudo bom? Como já devem ter percebido vim fazer um BIG TUTORIAL, o primeiro  de muitos.
Eu ai fazer um Sweet Rocker,mas como a minha amiga Anny já fez no blog dela ( o Go Imagine,tutorial aqui,me inspirei um pouco nesse BIG da Anny para fazer esse BIG aqui no blog Ok),então decidi fazer o Sweet que também é bastante usado. Pretendo fazer muitos outros BIG TUTORIAL,com estilos: Kawaii,Teen,rocker...
                Espero que gostem do big tutorial,e que ele ajude vocês com seus designers!

                          Clique em ''Leia mais'' para ai ao tutorial.

       Escolha o modelo. Vá em Design, Design de modelo e em modelo,vá na ultima categoria que é a Viagem (Travel),depois escolha o modelo Travel (o modelo azul com branco) Como mostra na imagem a baixo:

Clique na imagem para ver em tamanho maior.

    Agora vá em ''Plano de fundo'',vai aparecer a imagem que está de plano de fundo e logo abaixo estará escrito ''Remover Imagem'',então,clique ali.Vai ficar um fundo colorido,provavelmente será azul,mas logo logos vamos resolver  isso.


Em seguida clique na setinha que tem a ponta para abaixo do lado da imagem que estava como plano de fundo,aí vá em ''Fazer upload de imagem'' que é primeira guia que aparece.Ali em escolher  arquivo você escolha o background que quiser. Mas,antes veja algumas dicas.

Como estamos fazendo um design no tema Sweet,recomendo  usar backgrounds em tons rosas claros,eu até mesmo em tons cinzas e lilás. Que tal,usar um deses aí em baixo??

Agora vá em ''Layout'' e escolha qual qualquer modelo que seja de uma coluna.

Logo em seguida vá em ''Ajustar Larguras'' e deixe a primeira largura em 1040 e a outra em 300.


          
Vá em ''Avançado'' ,vá para a opção ''Texto da página'',é onde tem a fonte,cor, e o  tamanho do texto das postagens. Caso tiver alguma duvida veja esse post do Trechy Teen.


Recomendo usar essas cores para o seu texto.
(copie o código e vá testando, até achar a que mais gostar):

#969696 - #666666 - #000000 

Vá em,planos de fundo e deixe as 2 cores transparentes.




Logo em seguida, vá para ''Titulo do blog''  e deixe a cor transparente e o tamanho em 0px.
A intenção é o titulo do blog não aparecer,por que vamos por uma cabeçalho no local mais tarde.  

 Vá em ''Titulo da postagem'' e escolha a fonte que mais gostar. Você pode deixar a cor em um tom rosa,ou até um lilás.

Logo em seguida,vá em ''Plano de fundo da postagem'' e deixe para a cor branca.


Agora vá em  ''Plano de fundo da barra lateral'',deixa a ''Cor da moldura'' transparente.  

Se você escolheu um background rosa, aconselho você escolher um tom cinza (bem clarinho) e um lilás. Para não ficar tudo muito rosa,e dar um contraste entre as cores. Você pode escolher essas cores:
#dec7ff - #e1e1e1 - #fab3ea

Bom,agora acho que o resto vocês editam sozinhos,tipo,os links,titulos dos gadgets,etc...
-------------------------------------------------------------------------------------------------------------------------

Agora vamos personalizar o design pelo HTML:

Vamos começar retirando essas ondinha que ficam no topo do template.

Vá em Design> Editar HTML, de Ctrl+F e pesquise por:

content-outer .content-cap-top {

                        E apague os trechos contornados de rosa na imagem abaixo:
Visualize,e se se as ondinhas tiverem saído,salve.  

Agora vamos juntar as colunas com a área das postagens.

Design > Editar HTML > Pressione as teclas Ctrl + F e procure por : 
Caso sua coluna for do lado direito procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

                                      E se sua coluna for do lado esquerdo procure por:

                                     .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

                        E quando encontrar apague os trechos contornados na imagem abaixo:


Visualize, veja se a barra lateral juntou com as postagens. Se sim, salve.  

                           Vamos centralizar o titulo do post?!

 Design > Editar HTML e procure por:

h3.post-title {

E acrescente abaixo o seguinte código:
text-align: center;

Se quiser o título alinhado para a direita, substitua center por right.

   Para arredondar os cantos esternos do blog veja esse post  - Para colocar um Menu com um efeito hover veja esse post.

                Para deixar o topo do seu blog ainda mais bonito vamos por uma imagem no cabeçalho.

   Para salvar os cabeçalhos em tamanho real,clique na imagem e depois salve.






Para  juntar a área da postagem com o cabeçalho veja esse post.
Se usarem esse tutorial como base para seus design creditem, NÃO REPASSE AS BASES DE CABEÇALHOS desa vez eu não coloquei os créditos pois isso atrapalha um pouco,então se usarem alguma delas CREDITEM.



Para deixar o design do seu blog mas elaborado. Veja,abaixo alguns links de tutoriais para melhorar ainda mais o design:





                                     Então é isso amores,espero que tenham gostado,e esse BIG ajudado vocês com os seus designers. Bjs

17 comentários:

x Garota Imaginária-Oficial disse...

Ameii ficou super fofo :)
http://praia234.blogspot.com

dribs disse...

Ownt *-*
gostei.
pinkpimenta.blogspot.com

Marcinha disse...

curti muito *0* depois faz mais, tutoriais assim são legais.
Adorei aqui e estou seguindo, seu log é mt fofo <3
Depois me visita e caso goste, siga também.
Voltarei mais vezes.
Beijos e fique com Deus.
The Diary of Teens

Just Listen disse...

Uma super dica eu amei. Obrigada pela visita ao blog. Feliz 2012

Beijos, Juliana.
http://bloggirlpop.blogspot.com

Senhorita RR disse...

Lindoo, muito fofo!
http://inspiracaodeumagarota.blogspot.com/

Betina disse...

ooi flor,quanto tempo...
amei seu blog de novo,haha :)
então,se puder visita lá o meu blog...
é que você quis ser minha parceira e nem comenta nem segue :(
Beijão
-----------------------
sweetstarblog.blogspot.com

@itbeatriz disse...

adorei teu blog! dá uma passadinha lá no meu e se gostar segue, bjoos:*
http://soscoisasdegarota.blogspot.com/

x Garota Imaginária-Oficial disse...

Legal usei no blog >: seguindo
se puder ficariaaaaaa super legal!
http://jogodeouro.blogspot.com

Marie Assis disse...

Ameeei, quando mudar meu designer mais uma vez vou usar esse tutu aquiie!"

Posso te pedir um tutorial, como você poe aquele menu ali em cima, jurao, já olhei em vários blogs e não consigoo fazeer..aarg..
pelo codigo pronto consigo, mas não tenho nem base.
Desde já agradeço..!

Betina disse...

Oi paty :)
Obrigado por ter aceitado a afiliação :) vou colocar você nos afiliados do blog... Claro,sem problemas,te entendo.,também não tinha muito tempo antes das férias.Sério,tá muito lindo seu blog paty! Sucesso !
Beijão =*
--------------------
sweetstarblog.blogspot.com

Anônimo disse...

Como q vou baixar as bases sem ter como usar o botão direito? ¬¬ tenso

Mariana Remiro disse...

Que lindo ficou ! Amei !
Obrigada pela visitinha !

beeijos,
http://girliethingspt.blogspot.com/

Patrícia disse...

Anônimo: Desculpa,agora tirei aquele aviso.

Unknown disse...

Ameei tudo !
Bjiiinhos :*

http://keedysiilvaa.blogspot.com/

Unknown disse...

Ameei tudo !
Bjiinhos :*

http://keedysiilvaa.blogspot.com/

Sarah Carvalho disse...

Oi amour, aqui, posso usar como base oo da taylor, porem mudando as fotos?

Little Bee disse...

Oi flor!
Eu acho SUPER legal as postagens que você posta. Inclusive esse BIG tutorial, que ficou ótimo. Eu até seguiria seu tutorial e mudaria completamente o visual do meu blog, só que eu botei um template, que eu particularmente adorei. Se não fosse aquele template eu já teria feito esse tutorial no meu blog há tempo.
Voltando ao assunto... amei esse post. Você sabe mesmo como chamar a atenção dos seus leitores diretamente pros seus post's e pro seu visual do blog.
Depois faz mais desse BIG tutorial. É muito legal.
Beijinhos ♥
www.segredoirrevelado.blogspot.com