22 de set de 2012

Big tutorial: Personalizações

Tumblr_mah7vp6sod1r8ju0co1_500_large
Meio nada ver mas, eu tava pensando se vocês vão sentir minha falta quando eu for para Hogwarts...vai ser triste abandonar meu pc pela minha varinha!!

Oiieee minhas bonequinhas de porcelana, a titia louca chegou. Tudo bem?!
Desculpem a falta de postagens e comunicação, mas hoje eu trouxe um tuto bem legal e procurado, de como deixar a sidebar do lado do cabeçalho, enfim, o modelo certo ou que indico de um blog...vamos ver!?

Nesse post, irei ensinar:

♥ Fazer a sidebar ficar ao lado do cabeçalho, como aqui no Pincelando;
♥ Personalizar área das postagens;
♥ Personalizar sidebar e gadgets;

Só. Depois eu volto com alguns tutoriais indicados e bem legais...pedidos?!


Bom pessoal, acho que muita gente no início fica em dúvida de como colocamos a sidebar ao lado do cabeçalho, como aqui no Pincelando. É bem simples: ajustar o cabeçalho no tamanho da área das postagens e trazer a sidebar para cima, e é isso que eu vou ensinar.

Primeiro, usaremos um cabeçalho teste e que eu deixo para vocês depois. O tamanho dele é 815x350, ideal e indicado por mim.


É só colocar o cabeçalho normal, e pronto.
Depois, para deixar sua sidebar mais para cima, vá em Editar HTML ~> Dê um Ctrl+F e procure por :

.main-inner .column-left-outer {         - Se sua sidebar for na esquerda
.main-inner .column-right-outer {  
- Se sua sidebar for na direita


Achou?Depois, abaixo, coloque:

margin-top: -100px;

Visualize, e vá trocando o 100 pelo número desejado: quando maior, mais para cima a sidebar ficará.

Que tal bloquear seu cabeçalho contra cópias? É muito simples, segue o print!




Pronto! Chegamos a parte de personalizar sua sidebar.
Primeiro, se você quiser separar os gadgets para ficar mais fofo e organizado, faça o seguinte:

vai em Editar HTML ~> Dá um Ctrl+F ou F3 e procure pelo seguinte código:

/* Widgets


Você irá achar assim:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}

Antes da última chave, adicione:

 background: #ffffff;

Se quiser arredondar, antes de fechar a chave ainda, coloque:


-webkit-border-radius: 10px
-moz-border-radius: 10px;
border-radius: 10px;
Lembre-se: no modelo do Blogger, sua sidebar deve estar programada para ter fundo transparente e sem moldura.

Agora, vamos personalizar o título da sidebar, do jeito fácil, para iniciantes.

Vá em Layout ~> Adicionar um Gadget ~> HTML Java Script e cole:

<style>
CÓDIGO DA SUA PERSONALIZAÇÃO
</style>

Personalize do seu jeito!

.sidebar h2{
font-family: Coloque aqui a fonte do seu título
text-align: Aqui o Alinhamento do seu título
border-bottom: Quer borda abaixo do título? Coloque aqui cor, expessura e tipo(dashed,dotted,solid...)
 color: Cor do título;
}

E aí você pode adicionar sombra, hover, o que quiser.

Use fontes personalizadas do Google Web Fonts!
Não sabe usar?! É BEM simples.

Escolha a fonte no Google Web Fonts e clique em Quick-use!

Copie o 1º código ~> Vá em Editar HTML ~> Dê um Ctrl+F e pesquise por:

<head>

Acima desse código cole o da sua fonte, e não se esqueça de adicionar no final </link>  (ou não irá funcionar).

Feito isso, é só usar o 2º código aonde quiser! Exemplo:

.sidebar h2{
font-family: font-family: 'Sail', cursive;


Vamos agora aprender a arredondar e até a separar a área das postagens.

Vá em Editar HTML ~> Dê um Ctrl+F e procure por:

.main-inner .column-center-outer {  


Depois, logo abaixo,cole:

.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
padding: 5px;
border-radius: 10px;
}


Bem simples não? Aprenda mais sobre esse código aqui!

Se você quiser só arredondar, pesquisa pelo mesmo código( .main-inner .column-center-outer { ) só que coloque:

        -moz-border-radius: 10px; 
        -webkit-border-radius: 10px; 
    border-radius: 10px; 
}


Quer colocar uma bordinha?
Junto, antes de fechar a chave, cole:

border:1px solid #00000;

O código é fácil de entender. No 1px altere a expessura da borda, no solid altere o estilo da borda e no #00000 a cor da borda!

Personalize o título do seu post!

Vá em Editar HTML ~> Dê um Ctrl+F e procure por:

* Posts

Você irá encontrar assim:

/* Posts
----------------------------------------------- */
h3.post-title {
E mais algumas coisinhas aqui(é que o meu já tá personalizado)
}

Depois de h3.post-title {

Cole qualquer personalização, exemplo:

text-align: center;
border-bottom: 1px solid #00000;
 color: #696969;
text-shadow:01px 1px #00000 ;


Etc...aí é só substituir o necessário!

-----------------------------------------------------------------------------------------------------------------------

Mas Giih, como eu coloco fonte personalizada no título da postagem?
Faça todo procedimento como no título da sidebar:

Escolha a fonte no Google Web Fonts e clique em Quick-use!

Copie o 1º código ~> Vá em Editar HTML ~> Dê um Ctrl+F e pesquise por:

<head>

Acima desse código cole o da sua fonte, e não se esqueça de adicionar no final </link>  (ou não irá funcionar).

Mas o 2º código você faz o seguinte:

Procure ainda no seu HTML, o seguinte código:

 <Group description="Post Title" selector="h3.post-title a">

Irá encontrar depois:

     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 20px 'Sofia', cursive;" value="normal 20px'Sofia', cursive"/>
     
Troque a parte em negrito pela metade do 2º código, ou seja só o código da fonte, sem o "font-family"(no caso 'Sail', cursive;)


Aqui vão dois modelos de cabeçalhos!!






Fontes que eu indico no Google Web Fonts:

Sofia ♥ Sail ♥ Lobster Two ♥ Euphoria Script ♥ Great Vibes ♥ Allura ♥ Sue Ellen Francisco ♥ Vibur 

Agora, alguns seletores de cores, para achar cores ideias ao seu layout, borda, etc...


Agora, o post terminou!
Mas essa era a primeira parte, semana que vem eu venho com a segunda!

Agradeço ao Kawaii World pelos materiais dos cabeçalhos, e ao Jackie Dream por um dos tutoriais. O resto foi tudo de "lembrança minha", ou seja, o código existe em outros blogs, mas eu quem fiz e alterei, por isso não lembro o original, se for seu, por favor me avise!

Beijos e mais beijos :3
Bom final de semana ;]


Ai ai, fofuras no ar em pleno sábado. Já conheciam minha companhia de Hogwarts?!
PS:>ele é só meu entenderam, meeeeeeeeu!!

7 comentários:

  1. Oi Gih... Gostaria de saber qual é essa fonte que varios blog andam usando... Essa que você tem no blog.... Acho linda... Mas não sei qual o nome ou como baixa ;(

    Beijos!

    ResponderExcluir
  2. Que sou amore? Ele é MEU U.U shuashuashuashua
    Harry seu lindoo
    Seguindo adorei o blog
    Kisses
    sonhosdeumagarota123(.blogspot.com.br)

    ResponderExcluir
  3. Adorei o blog querida, muito divo u.u
    Bjiiim

    imperfectsmiles - nathi.blogspot.com

    ResponderExcluir
  4. Que legal <33 Amei o estilo que vc escolheu para personalizar \o Ah, ja sabe da novidade? O Teen Style voltou mas como Sweet Cloud. To muito feliz de voltar :) Queria muuito que vc me ajudasse a reconstrui-lo! ja to seguindo ok? Conto com vc <3

    sweetcloud-oficial.blogspot.com/

    ResponderExcluir
  5. Amei os tutos, principalmente o de subir a barra lateral! procurei feito louca por esse tuto u_u mas consegui fazer tranquilamente <3
    Estou usando ele no layout do meu blog de encomendas, ok?
    Beijos!

    myacidblackcherry.blogspot.com

    ResponderExcluir
  6. amei fica super lindo!

    Adolescente Nerd

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada