- 17.4.17

DIY Layout #2 - Perfil do Autor na Barra Lateral

Foto de exemplo do perfil do autor com foto, nome, descrição, e-mail e ícones das redes sociais


Oi geeeente! Nesse post, vamos fazer um perfil do autor do blog com foto, nome personalizado bonitinho e e-mail para contato. Também vou ensinar a colocar os ícones para suas redes sociais.

Os tutoriais da série DIY Layout são focados para personalizar o meu Tema Base Responsivo totalmente free. Se você não utiliza o meu tema base, pode sim tentar aplicar o meu tutorial no seu layout, e provavelmente vai funcionar. Mas o passo 3 foi feito para o meu tema, e talvez o seu código esteja diferente do que mostra aqui, então nessa parte você precisa tentar encontrar como está no seu próprio código e adaptar, ou pular o passo.

Atenção: Lembrando que antes de começar, é bom você tentar fazer em um blog de testes antes de aplicar no seu blog principal. 

Vamos nessa? 💕


1. Colocando Imagem de Perfil 

Pra imagem de perfil aparecer no seu layout, você deve ir em Layout, e clicar pra Adicionar um Gadget na barra lateral. Escolha o gadget de imagem.

Como adicionar gadget de imagem no blogger




Coloque o título como "Foto de Perfil". Depois escolha a foto do seu computador. Após carregar a foto, desmarque a opção "Reduzir para ajustar". Legenda e link fica a seu critério colocar ou não.

Foto de perfil no blogger


Depois vá  em Tema > Editar HTML > Clique no meio dos códigos > Aperte ctrl+f no seu teclado e procure por

]]></b:skin>

Antes dessa linha, cole o seguinte código: 

div#Image1 {
    background-color: transparent;
}

img#Image1_img {
    width: 100%;
    height: auto;
}

Caso não queira que o título "Foto de Perfil" apareça, você pode colar em baixo do código acima, o seguinte código: 

#Image1 h2 {
    display: none!important;
}

Deve ficar assim:

Foto de perfil personalizada no blogger


Lembrando que se você estiver usando outros gadgets de imagens no seu layout, você deve trocar o número 1 pelo número correspondente. Por exemplo, você tem outros dois gadgets de imagem, e esse da foto de perfil é o terceiro gadget, então no lugar do 1 você colocará 3, ficando assim: 

div#Image3 {
    background-color: transparent;
}

img#Image3_img {
    width: 100%;
    height: auto;
}

#Image3 h2 {
    display: none!important;
}

Depois salve, e veja como ficou.

2. Colocando seu nome personalizado 

• A primeira coisa que você precisa fazer, é criar uma imagem com o seu nome. Use o editor de fotos que você preferir, mas caso não saiba onde fazer, uma boa é baixar e usar o photoscape.

Crie a imagem com o fundo transparente ou com a cor de fundo da sua barra lateral. A imagem deve ter 250px de largura, e quanto você achar melhor de altura. Então, é só escrever seu nome nela com a fonte e a cor que achar melhor. Salve essa imagem em png. A minha ficou assim:

Lariz Santana


• Para colocar no seu blog, primeiro entre no site imgur.com e faça upload da sua imagem. Para pegar a url (ou endereço da imagem), clique com o lado direito do mouse sobre ela, e clique em "copiar endereço da imagem".

• Vá novamente em Layout > Adicione um Gadget (em baixo da sua foto de perfil) de HTML/Javascript > Dentro dele, cole o seguinte código:

<img src="URLDASUAIMAGEM" width="100%" />

<br />

Texto sobre você, etc etc, uma descriçãozinha rápida

Substitua o URLDASUAIMAGEM pelo endereço que você copiou lá no imgur. Depois salve o gadget. Lembre-se de nessa tela do Layout, clicar em Salvar Organização, no lado superior direito da tela.

Veja como ficou, e caso o seu nome tenha ficado muito grande, você pode diminuir trocando o 100% por um número menor, como 90% ou 80%


3. Alguns ajustes 

Caso o fundo do seu layout seja branco, e a barra lateral também, você provavelmente não vai perceber isso. Mas se você tem uma barra lateral diferente da cor do fundo, vai perceber algo que me incomoda muito e por isso precisamos fazer alguns ajustes para melhorar. Eu coloquei o fundo do meu layout de exemplo cinza e fiz um antes e depois pra vocês notarem a diferença:

Foto de perfil com nome e descrição no blogger


• Para fazer esses ajustes, a primeira coisa é "subir" a barra lateral pra ficar alinhada a área da postagem. Para isso, vá em Tema > Editar Html > Clique no seu código > Aperte ctrl+f no seu teclado, e procure por:

div#sidebar {

Deve aparecer isso:

div#sidebar {
    display: block;
    height: auto;
    width: 27%;
    float: right;
    margin-top: 40px;
}

Você vai substituir o 40px; por -10px;

• O próximo ajuste, é fazer o seu html com o nome e sua descrição "subirem" e ficarem juntos da sua foto de perfil. Para isso, você precisa descobrir qual é o número do seu HTML/Javascript. Dentro da área de códigos do seu tema, aperte ctrl+f no seu teclado, e procure por algum trecho da sua descrição. No caso, a minha descrição é: "Texto sobre você, etc etc"e vou colocar esse trecho na minha caixa de busca. Veja a imagem:

Localizando HTML no blogger


A segunda parte circulada, mostra um HTML1 , pode ser que no seu mostre um número diferente (HTML2, HTML3) e é esse número que você vai usar.

Com o ctrl+f procure novamente o ]]></b:skin> e acima dele, cole o seguinte código: 

div#HTML1 {
    margin-top: -40px;
}

Substituia o HTML1 pelo número do seu HTML :)

4. E-mail para contato 


Email de contato na barra lateral do blogger


Você pode colocar ele em um novo HTML/Javascript, ou junto da sua descrição mesmo, abaixo de todo o texto.

Cole o seguinte código no lugar desejado:

<br /><span style="width: 100%; text-transform: uppercase; font-size: 9pt; letter-spacing: 2px;";><img src="http://i.imgur.com/qEbgHDP.png" style="width: 40px; top: 15px; position: relative;
" /> contatobutlariz@gmail.com </span>

No lugar de contatobutlariz@gmail.com coloque o seu e-mail.

Caso você queira um ícone diferente, pode fazer o seu próprio. Faça upload dele no imgur, copie o endereço e cole no lugar da url em rosa 


Email de contato na barra lateral do blogger





5. Ícones das redes socais 


Ícones das redes sociais no blogger


Quando alguém gosta do seu blog, é muito provável que essa pessoa queira te encontrar por aí, te acompanhar nas redes sociais. E nada melhor que usar essas redes para divulgar seu blog e avisar os seus leitores que tem post novo né? 

Da forma que eu vou ensinar a colocar, você pode colocar o ícone que quiser, e a cor de fundo pode ser trocada pelo próprio código! É bem fácil, e prático quando você quiser trocar. 

Em Layout, adicione um HTML/Javascript e cole o seguinte código:

<div class="sociais">

<li><a href="LINK DA SUA REDE"><img src="URL DA IMAGEM" /></a></li>

<li><a href="LINK DA SUA REDE"><img src="URL DA IMAGEM" /></a></li>

<li><a href="LINK DA SUA REDE"><img src="URL DA IMAGEM" /></a></li>

<li><a href="LINK DA SUA REDE"><img src="URL DA IMAGEM" /></a></li>

</div>

<style>

.sociais {
    margin: 5px 0px 10px 20px;
    overflow: hidden;
}

.sociais li {
    list-style: none;
    float: left;
    padding: 7px 8px 1px 8px;
    margin-right: 10px;
    background-color: #ffbef4;
    border-radius: 360px;
}

.sociais li img {
    width: 17px;
}

</style>

No lugar do LINK DA SUA REDE você coloca o link da sua rede social: facebook, youtube, instagram, twitter, pinterest...

No lugar de URL DA IMAGEM você coloca o endereço do ícone que vai aparecer. Assim quando a pessoa clicar no ícone, ela vai ser redirecionada para a sua rede social.

No lugar de #ffbef4 coloque o código para a cor de fundo do seu ícone.

Vou deixar aqui alguns ícones que eu tenho, então é só clicar com o lado direito do mouse e copiar a url da imagem do qual desejar, e substituir no local indicado a cima 😄


Caso você queira, pode fazer seus próprios ícones ou pegar de sites como flaticon. Pra usá-los basta fazer upload da imagem no imgur, e pegar a url da imagem por lá!


Então é isso gente, eu espero que vocês tenham gostado do tutorial e que tenham conseguido fazer. Caso tenham alguma dúvida, podem comentar aqui no post deixando o link do seu blog, e não esqueçam de me dizer o que acharam do post. Se tiverem sugestões de tutoriais, podem falar também! 

Não esquece de passar na aba Extras do blog para ver as outras dicas e tutoriais que rolam por aqui!

Com amor,
Lariz

Comente com o Facebook:

4 comentários:

  1. Menina! Quanta coisa, até enlouqueci! Adorei, mas meu blog é no wordpress... :( não deveria ter mudado, vejo tantas coisas para o blogger lindas como essa que fico super mal hahaha Mas parabéns pelo conteúdo! Muito bom! Sempre fico de olho para aprender mais! https://mycutebubble.wordpress.com/

    ResponderExcluir
    Respostas
    1. Poxa Lele, realmente no wordpress.com não tem muito o que fazer nesse sentido. Mas não se arrepende de ter mudado não, foca no futuro, e quem sabe mais pra frente você não consegue migrar pro wordpress.org? Ele é muito melhor que o .com e você vai ter a vantagem de já estar familiarizada com o wp <3

      Muuuito obrigada pelo carinho ♥ Se eu puder ajudar em algo, ou tiver alguma sugestão de post, me fala!

      Excluir
  2. Adorei,eu não uso seu modelo,mas vou tentar passar para o meu blog,porque peguei um modelo simples e personalizei rs, seu tutorial vai ajudar muita gente,obrigada :D
    Beijos ^.^
    Little Wonders

    ResponderExcluir
    Respostas
    1. Tenta adaptar para o seu blog sim, capaz que consiga ♥ Como disse, só o passo 3 que não é compatível mesmo, mas se você tiver uma ideia de como é o código, consegue arrumar no seu. Eu que agradeço a visita e o carinho. Beijão ♥

      Excluir

• 2015 - 2017 Feito com ♥ por Lariz Santana