Uma das perguntas que mais recebo no meu Ask é sobre a sidebar do Julie de Batom. Já recebi vários pedidos de tutorial e prometi que, depois dessa correria de fim de ano, iria atender. Sei que vocês gostam quando faço posts ensinando coisas legais para o blog e quero tentar trazer vários este ano. Por isso, continuem mandando suas sugestões, viu?
O tutorial é bem simples e fácil. Acredito que vocês vão conseguir fazer rapidinho e com poucas dúvidas. Além disso, o resultado fica bem bonito. E, claro, diferente.
Antes de tudo, você precisa criar em um programa de edição de imagens (Photoshop, Photofiltre, etc) o fundo da sua sidebar. Você pode criar vários (um para o perfil, outro para as redes sociais, etc) e ir personalizando aos poucos. Vale lembrar que você precisa criar no tamanho certinho, viu?
Para ajudar vocês, vou criar um no Photoshop. Ele será simples, só para usá-lo no tutorial, mesmo. Vocês podem usar outras cores, outros fundos e outras formas. Tudo depende de como vocês querem a lateral de vocês.
Bom, vamos lá:
1. Abra o Photoshop e crie um novo documento com o tamanho desejado. O meu vai ter 200px de largura por 250px de altura.
2. Agora nós vamos criar a base do fundo. Vou usar a forma de retângulo com as pontas arredondadas. Vai ficar assim:
3. Vamos colocar um background no retângulo para deixar nosso fundo legal? Primeiro, você precisa encontrar um que você goste. Eu vou usar esse.
4. Copie a imagem que você quer e cole em cima do retângulo desenhado. Na camada da imagem que você acabou de colar, clique com o lado direito do mouse e marque a opção Create Clipping Mask.
5. Aperte ctrl + T e, com a tecla shift pressionada, vá diminuindo (pelo quadradinho da ponta) a imagem até ficar do tamanho que você quer. Assim:
6. Depois de posicionar a imagem certinho (com a ferramenta Mover – atalho: V), você pode diminuir a opacidade para deixar o fundo mais claro.
7. Agora nós vamos criar o título do widget. Para isso, aperte ctrl + shift + N para criar uma nova camada no Photoshop. Com a ferramenta de shape (atalho: U), vamos fazer o fundo usando o retângulo. Assim:
8. Com a ferramenta de texto (atalho: T), vamos escrever o título. Vou fazer esse como se fosse uma mensagem de boas-vindas.
Pronto! Depois é só salvar a imagem em PNG e hospedá-la em algum site (Imageshack, no Blogspot, etc). Guarde o link dela, pois vamos precisar.
Agora nós vamos colocá-la no Blogspot. Antes de tudo, faça um backup do seu layout só por segurança.
1. Vá em Layout e adicione um gadget de HTML/Javascript. Lembrando que você precisa usar sempre este!
2. Deixe o título sem nada e, no conteúdo, comece por:
<div id=”sidebar-pesonalizada1″>
3. Abaixo, coloque o que você quer: textos, imagens, links… E, quando terminar, finalize com </div>. O meu ficou desse jeito:
<div id=”sidebar-pesonalizada1″>
Hey, meninas! Obrigada pela visita ao #JDB. Espero que vocês gostem do conteúdo, pois ele é feito especialmente para vocês. Ah, e se gostarem do blog, não esqueçam de deixar sua marquinha. Ela é muito importante pra gente, viu? 🙂 Quem gostar, pode curtir a nossa página no Facebook para ficar por dentro das novidades do JDB. Agora, que tal curtir os posts? Há vários novos e legais pra vocês. Beijos, Julie.
</div>
4. Salve seu gadget, posicione no local desejado e vá para Modelo.
5. Clique na opção Editar HTML, procure por ]]></b:skin> e, antes dele, cole isso:
#sidebar-pesonalizada1{
background-image:url(linkdaimagem);
width: 180px;
height: 210px;
padding-top:40px;
padding-left: 10px;
padding-right: 10px;
}
6. Agora vamos às modificações:
Em vermelho: Aqui você vai colar o link da imagem. No meu caso, é este: http://3.bp.blogspot.com/-ohiKkCtIQCM/UORoCmRYcOI/AAAAAAAAFS8/LtZ26nEgIvQ/s1600/sidepronta.png
Em laranja: Nesta linha, você precisa arrumar a largura da imagem. Vocês deve estar estranhando o motivo do 180 e não 200, né? Acontece que eu coloquei 10px de margem na direita e na esquerda. Quando a gente faz isso, precisamos diminuir da largura. Se não, a imagem começa a duplicar e ficar errada. Como usei duas vezes o valor 10, tive que diminuir 20 do total. Ou seja: 200 – 20 = 180px. Se fosse 15, teria que tirar 30. E assim vai…
Em verde: Aqui você arruma a altura. O número está diferente pelo mesmo motivo acima: como coloquei 40px de margem do topo, tive que diminuir do número total. Ou seja: 250 – 40 = 210.
Em rosa: Essa linha é para você colocar a margem do topo. Como nós fizemos um título no fundo, nós não queremos nenhum texto em cima dele, né? No meu caso, o 40px deu certinho. Isso depende da imagem que você fez. Vale ir testando até ficar ok!
Em verde: Nesta linha a gente troca a margem da esquerda.
Em roxo: E, aqui, nós trocamos a margem da direita.
O meu ficou assim:
#sidebar-pesonalizada1{
background-image:url(http://3.bp.blogspot.com/-ohiKkCtIQCM/UORoCmRYcOI/AAAAAAAAFS8/LtZ26nEgIvQ/s1600/sidepronta.png);
width: 180px;
height: 210px;
padding-top:40px;
padding-left: 10px;
padding-right:10px;
}
Agora, clique em visualizar para ver se está tudo ok. No meu blog de testes, ele ficou deste jeito:
Esse fundo branco era o fundo da lateral, já. Para que ele não fique atrapalhando nossos fundos diferenciados, nós vamos ter que deixar a sidebar transparente. Para isso, siga as instruções abaixo:
1. Procure no seu código por #sidebar-wrapper { e APÓS onde estiver background-color ou background-image, coloque transparent. Vai ficar assim:
background-color: transparent;
2. Depois, procure por .widget-content { e, após o background-color ou background-image, coloque transparent.
Caso o seu layout não tenha essa parte, você pode adicionar (antes de ]]></b:skin>):
.widget-content {
background-color: transparent;
}
Desta vez sim está tudo certinho!
Pronto! Agora você tem uma parte da sidebar personalizada. Se quiser fazer outros (como, por exemplo, o perfil, as redes sociais, a caixinha de curtir do Facebook…), basta seguir os mesmos passos e trocar apenas o nome da div (ou seja, o sidebar-pesonalizada1). Você pode criar fundos diferentes e deixar tudo do seu jeitinho. Legal, né?
Vale lembrar que, se vocês tiverem alguma dúvida com relação ao tutorial, basta perguntar lá no meu Ask ou aqui nos comentários. E, se conseguirem, me avisem, viu? Quero ver tudo o que vocês fizeram <3
E vocês? Curtiram o tutorial? Vão fazer? Conta pra gente!
6 Comments
Julie,e se eu quiser colocar tipo os seguidores só que em cima da edição?
Adorei o tutorial, vou tentar fazer eu estou querendo mudar o lay do blog mesmo, o único problema é que eu nunca consigo achar nada no HTML, help rs
lepetitblondie.blogspot.com.br
Oi linda, adorei o tutorial 😀
Mas tenho uma sugestão, e uma suplica rs: Onde você achou os icons personalizados das redes sociais? Eu gostaria de alguns fofos assim, mas não seria legal pegar os seus, por isso estou perguntando 🙂
Parabéns pelo blog, beijos.
Dá pra fazer assim, com o Photofiltre mesmo? Se funcionar eu tento baixar esse programa, porque o photoshop eu acho tão difícil.
P.S.: Simplesmente amei esse tutorial e seu layout é muito bonito! 🙂
Ameeeei o tuto Julie!
caaaaara super util, gostei muito, facil, rápido e prático, filé todo
http://e-xpressando.blogspot.com.br/