Saiba: "Como fazer um "meme" ou "PERFIL" Sobre Box Blog"
Autor: Edilene brandao da silva | Publicado: 2013-07-25T18:54:00-07:00


Saiba: "Como fazer um "meme" ou "PERFIL" Sobre Box Blog"


"Como fazer uma caixa Sobre Mim,

&nbsp;perfil&nbsp;

ou&nbsp;

Simples blogs"



























DEMO 

 &nbsp;
&nbsp;
procurar por&nbsp; &lt;head&gt; 
e, ao
encontrá-lo;

copie&nbsp;
e&nbsp;
cole&nbsp;
após &lt;head&gt;&nbsp;
o código: 

&lt;link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/&gt;



 . HTML &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; 

E,
em seu código HTML,
ou
no "lay-out" do seu blog,

colar o código:







&lt;div id="hulu"&gt;
&nbsp;&lt;div id="social"&gt;
&lt;div id="left_social"&gt;&lt;i class="icon-facebook"&gt;&lt;/i&gt;
&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/div&gt;
&lt;div id="right_social"&gt;&lt;i class="icon-google-plus"&gt;&lt;/i&gt;
&lt;i class="icon-pinterest"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="profile-pic"&gt;
&lt;div class="cover"&gt;
&lt;/div&gt;
&lt;div id="prof"&gt;&lt;img 
src="https://lh4.googleusercontent.com/-oAKJOQeF0Q8/UY5906EWXFI/AAAAAAAAEc8/LZFKhzkvbpA/w165-h166-no/It%2527s+me.jpg"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="details"&gt;
&lt;h1&gt;&lt;span&gt;Panjz Mackenzie&lt;/span&gt;&lt;/h1&gt;
&nbsp;&lt;/div&gt;
&lt;div id="info"&gt;
&nbsp;&lt;ul&gt;
&lt;li&gt;&lt;div class="link"&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/div&gt;
&lt;/li&gt;
 &lt;li&gt;&lt;div class="link"&gt;&lt;a href="#"&gt;My Skills&lt;/a&gt;&lt;/div&gt;
&lt;/li&gt;
 &lt;li&gt;&lt;div class="link"&gt;&lt;a href="#"&gt;Work Experience&lt;/a&gt;&lt;/div&gt;
&lt;/li&gt;
 &lt;li&gt;&lt;div class="link"&gt;&lt;a href="#"&gt;Say Hello!&lt;/a&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;  
  &lt;/div&gt;




onde:

https://lh4.googleusercontent.com/-oAKJOQeF0Q8/UY5906EWXFI/AAAAAAAAEc8/LZFKhzkvbpA/w165-h166-no/It%2527s+me.jpg = ENDEREÇO DE SEU AVATAR


Panjz Mackenzie= SEU NOME

&nbsp;About Me=Quem sou eu

&nbsp;My Skills= Minhas habilidades

&nbsp;Work Experience = Experiência de Trabalho

&nbsp;Say Hello! = Diga Olá!

. CCS &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; 


E,
em seu código CSS,
colar o código:


#hulu{
width:300px;
height:auto;
margin:0 auto;
background:#000;
position:relative;
border-radius:0px 0px 20px 20px;
background:#f8f8f8;
padding:0px 0px 20px 0px;
-moz-box-shadow:&nbsp;&nbsp;&nbsp; inset 0 0 10px #E3E3E3;
-webkit-box-shadow: inset 0 0 10px #E3E3E3;
box-shadow:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; inset 0 0 10px #E3E3E3;
}
#social{
padding:10px 20px;
overflow:auto;
background:#9a2418;
border-bottom:2px solid #9a2418;
position:relative;
}
#left_social{float:left;}
#right_social{float:right;}
#social i{
margin-right:0px;
padding:5px 0px;
width:30px;
display:block;
float:left;
text-align:center;
color:#fff;
font-size:1.2em;
transition:0.5s ease;
-webkit-transition:0.5s ease;
}
#social i:hover
{
background:#fff;
color:rgb(223, 97, 19);
transition:0.5s ease;
-webkit-transition:0.5s ease;
border-radius:50%;
}
img{
width:85px;
height:auto;
border-radius:50%;
margin:7px;
z-index:100;
position:relative;
}
#prof{
width: 100%;
height: 100%;
border-radius: 50% 50% 50% 50%;
border: 2px solid #6B2F0A;
background:#9a2418;
}
.cover{
position: absolute;
width: 104px;
height: 49px;
top: 0px;
left: 0px;
z-index: 1;background:#9a2418;
}
#profile-pic
{
margin: -51px auto 0px;
position: relative;
z-index: 100;
width: 100px;
height: 100px;
}
h1{
font-family:&amp;amp;amp;quot;Roboto Slab&amp;amp;amp;quot;;
margin:0px; padding:10px 0px;
text-align:center;
font-size:1.3em;
}
#info ul{margin:0px; padding:0px;list-style-type:none;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
#info li{margin:0px;text-align:center;font-family:&amp;amp;amp;quot;Roboto Slab&amp;amp;amp;quot;;font-size:1.2em;}
#info li a{display:block;color:#000;text-decoration:none;padding:15px 0px;-webkit-transition:all .5s ease-out;
&nbsp; -moz-transition:all .5s ease-out;
&nbsp; -ms-transition:all .5s ease-out;
&nbsp; -o-transition:all .5s ease-out;
&nbsp; transition:all .5s ease-out;}
#info li div:hover a{background:#9a2418;color:#fff;-webkit-transform:translate(0px,10px);
&nbsp; -moz-transform:translate(0px,-10px);
&nbsp; -ms-transform:translate(0px,-10px);
&nbsp; -o-transform:translate(0px,10px);
&nbsp; transform:translate(0px,-10px);text-shadow: 2px 2px 3px #000;}




.Visualize
.Estando tudo correto!
.Salve!!! 



fonte:
panjz-online