02 julho 2015

#TutoriaisDaJaque: Fazendo meu Layout #5

Oláááá meus tesudos õ/ (ATUALIZADO 08.03.2016)

 Bom, gente, hoje vamos aprender como personalizar a Área do perfil. Foto de perfil com o nome abaixo, descrição, redes sociais (estilo hover) e barra de pesquisa personalizada. (Clique nas imagens para ver maior!)

OBS: Lembrando que os Brush não vem instalado no Photoshop! É necessário que você faça o Download destes brush, já ensinei como fazer isso na ultima parte desse tutorial aqui


 Agora vamos colocar essa imagem em seu blog.



Cole dentro da caixinha HTML/JavaScript:

<div id='perfil'>
 <div class='foto'>
<img src='LINK DA SUA FOTO DE PERFIL'/>
 </div>

Para Descrição:

<div class='descricao'>
Escreva sobre você aqui. Pode ser uma descrição curta, longa. ENJOOY! <a href='LINK DO SEU BLOG'>(+)</a>
</div>

Icones das Redes Sociais:
<div class='redes'>

<a href="LINK REDE SOCIAL" target="_blank">
<img src="IMAGEM 1" onmouseout="this.src='IIMAGEM 1';" onmouseover="this.src='IMAGEM HOVER';" />
</a>

<a href="LINK REDE SOCIAL" target="_blank">
<img src="IMAGEM 1" onmouseout="this.src='IIMAGEM 1';" onmouseover="this.src='IMAGEM HOVER';" />
</a>

</div>
</div> 
 OBS: Na pasta do arquivo que disponibilizei para download tem a pasta Redes Sociais hospedem todas as imagens (recomendo que usem o site do Tumblr ou PicasaWeb para hospedar).

OBS 2: Para usar mais imagens de categoria, repita o código abaixo quantas vezes for necessário:
<a href="LINK REDE SOCIAL" target="_blank">
<img src="IMAGEM 1" onmouseout="this.src='IIMAGEM 1';" onmouseover="this.src='IMAGEM HOVER';" />
</a>

Em LINK REDE SOCIAL você deverá colocar o link da sua rede social.
 Para deixar o seu blog mais bonito, esse código tem a opção de imagem hover , ou seja, quando o cursor do mouse estiver em cima da imagem ela mudará de cor. Então em IMAGEM 1 você deverá colocar a imagem comum e em IMAGEM HOVER você deverá colocar a mesma imagem mas com uma cor diferente ou algum detalhe diferente. 

Caixinha de Pesquisa:
#barra-busca {
width:300px;
height:32px;
float:right;
margin-top:0px;
margin-right:0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura {
height:32px;
width:245px;
text-transform: uppercase;
margin-top:8px;
margin-left:8px;
color:#fff;
border:0px solid;
float: left;
padding:0px;
background:url(http://static.tumblr.com/wlnblxn/sfvnqu5yg/barra_de_pesquisa.png) no-repeat;
}
#bt-busca {
height:32px;
width:32px;
background:url(http://static.tumblr.com/wlnblxn/RdNnqu5tb/busca.png) no-repeat;
border:none;
margin-top:7px;
float: right;
cursos: pointer;
margin-right:10px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get action="http://www.LINK-DO-SEU-BLOG/search"><input id="sprocura" type=text name=q maxlength=255 value="" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="http://www.LINK-DO-SEU-BLOG/" /><input type="hidden" name="sitesearch" value="http://www.LINK-DO-SEU-BLOG/" />
</form></div></div>

 Coloquei os códigos separados para que você possa entender melhor mas é necessário que todos os códigos fiquem na mesma caixa da Gadget!
 Prestem bastante atenção e alterem o que está em negrito. Coloque o link da imagem, link do blog e das redes sociais onde solicitado.



 Dentro da caixinha procure por ]]>< e acima disso cole:

/* Perfil
---------------------------------------------------*/
#perfil {
background:none;
border-top:none;
border-bottom:none;
}
.foto {
margin-bottom:0px; /*margin da foto de perfil*/
}
.descricao {
text-align:justify; /*alinhamento do texto*/
font-size:13px; /*fonte do texto da descrição*/
color: #979797; /*cor da fonte*/
margin-bottom:8px;
}
.descricao a {
color: #e9cf78;
}
.redes {
text-align: center;
margin: 15px;
}




Estou editando todos os posts de tutoriais aqui do OAB ♥ 04.01.2016


13 comentários:

  1. Ótimo tutorial, Jaque!
    Pra quem não tem ideia de como mexer nessas coisas é super útil...

    Tô adorando essa série de tutoriais :D
    Obrigada por compartilhar <3

    Beijão!
    Dri.
    Diário de Casamento ❤

    ResponderExcluir
  2. Adorei o tutorial, eu sempre quis saber como colocava essa caixinha de pesquisa junto com a foto do perfil. Vou tentar fazer nas férias, já que terei mais tempo. Obg por compartilhar seus conhecimentos, beijão :*

    http://wave-over-wave.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tenta fazer sim, Vah, dai voce me mooostra *o*
      Tres beijos, lindaaaaa <3

      Excluir
  3. Como que bota as postagens do blog no meio igual o seu blog pra ficar as postagens no meio??Qual é a largura pra botar as postagens do blog no meio ?? Não consegui achar na internet.

    ResponderExcluir
    Respostas
    1. Juuuuh, respondi teus e-mail e vi que tu conseguiiiu õ/

      Excluir
  4. LIndo, Lindo, tô amando os #TutoriasdaJaque! Um beijãaaaao!!!

    ResponderExcluir
  5. Lindo seu blog!Você poderia ensinar a fazer topo psd,e dar umas aulas de photoshop,porque tem muita gente que não sabe fazer essas coisas!Tipo eu kk ^-^

    ResponderExcluir
    Respostas
    1. Nicole, obrigada <3
      Olha, não sou nada expert em PS kkkk tudo que eu sei fazer aprendi fuçando em várias coisas, em alguns tutoriais eu até ensino algumas coisas, através dessas coisas acho qu você consegue fazer várias outras... quem sabe eu não faça algum tutorial ensinando fazer alguma coisa né? kkkkk
      Um beijooo, sua linda ♥

      Excluir
  6. Adoreiiiii, so tenho um probleminha, como faço para centralizar tudo?

    ResponderExcluir
    Respostas
    1. Vaalééria, mil perdão, fui rever o tutorial e os códigos estavam errados, mas já corrigi e agora dará ceeertinhooo!
      Tenta ai e me fala?
      Beijoooos :*

      Excluir
  7. Nao consigoooooooooooooooo =/
    os icones ficam gigantes a barra lateral some metade da foto e a barra de busca naao aparece =(((((((((

    ResponderExcluir
    Respostas
    1. Que estranho, Gih. O código está correto, pode mudar só se você colocar outras imagem de icones, dai se elas forem em tamanho grande será assim que irá aparecer. Mas vi no teu blog que você conseguiu colocar ;)

      Excluir