04 abril, 2017

PERFIL PERSONALIZADO | TUTORIAL

Olá amores, tudo bem?

Perguntei lá no grupo duvidas que vocês tinham e uma de vocês disse que queria deixar seu perfil do blog centralizado e não sabia como, então vou mostrar como geralmente faço ok?

Vou fazer com um modelo teste do assessoria, apenas para verem na pratica como se faz, agora chega de enrolação e vamos ao tutorial...

Esse é o blog antes do perfil da blogueira:

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. </div>

Icones das Redes Sociais:


<div class='redes'>
<a href="LINK REDE SOCIAL" target="_blank">
<img src="IMAGEM 1" onmouseout="this.src='IMAGEM 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> 

 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>
Substitua tudo que está grifado pelos links devidos. Para trocar a imagem da barra de pesquisa basta trocar o link azul, por um de sua preferência.


Cole acima do código ]]>< esse outro código que está aqui abaixo:
/* 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;
}


E ai meninas? O que acharam desse tutorial bem fácil e rápido? Gostaram do resultado? Espero ter ajudado beijos e tchau, tchau...

Postado por: Leticia Miranda
Do blog: Miranda Bastos

Nenhum comentário:

Postar um comentário

Assessoria Digital Influencer - créditos

Tema Base por Butlariz Persnalizado por Doce Design