Perfil Fofo no Blog (2)

 Olá! Trouxe outro modelinho para perfil ( veja o primeiro modelo  Clica  ) . Esse de hoje é mais simples, tem menu bem fofinho, com efeito, e texto dentro da imagem que no caso seria sua foto; encontrei ele, (creditando) no blog Reino Kawaii ,para usar, adicione no primeiro gadget HTML/JavaScript no seu layout, ou onde preferir, o código abaixo...

<style>
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
.imgmenu{ /**parte em que os textos aparecem quando o mouse passar**/
background:rgba(255, 255, 255, 0.99);
color: #FD6D8C;
text-shadow: 1px 1px #fff;
text-align: center;
font-size: 28px;
line-height: 1em;
font-family:'Lobster Two', cursive;
font-weight: bold;
width:460px;
height:300px;
margin-top: -348px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out; }
.imgmenu:hover{opacity:.7}
.img-menu {/**personaliza a imagem**/
-webkit-transition-duration:2.5s;
border-top: 5px solid #fcc;
border-left: 2px solid #fcc;
border-bottom: 5px solid #fcc;
border-right: 2px solid #fcc;
}
.img-menu:hover{/**imagem em hover**/
opacity:0.8;
-webkit-transition-duration:2.5s;
}
a.themenu{
font-family:'Lobster Two', cursive;
background: #EBDAFE;
color: pink;
text-shadow: 0 1px 1px #fff;
font-size:20px;
padding:5px;
text-align:center;
text-decoration:none;
width:100px;
display:inline-block;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
-moz-box-shadow:inset 200px 0px 0px #fcc;
-webkit-box-shadow:inset 200px 0px 0px #fcc;
box-shadow:inset 200px 0px 0px #fee;
outline-offset: -5px;
outline: 1px dashed #fcc;
border: 1px solid;
}
a.themenu:hover{
color: #CCA6F5;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
padding-left : 5px;
-moz-box-shadow:inset -200px 0px -200px -0.5px rgba(255, 255, 255, 0.51);
-webkit-box-shadow:inset -200px 0px -200px -0.5px rgba(255, 255, 255, 0.51);
box-shadow:inset -200px 0px 0px -0.5px rgba(255, 255, 255, 0.51);
outline-offset: -5px;
outline: 1px dashed #CCA6F5;
border: 1px solid;
}
</style>
<center>
<img class='img-menu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWo3X-jlT0Jc8NYm-QUmA7n1MXpQo8X0ahyphenhyphen4mkS8yKiyO39cbZ9c6e98f1SJPqoAROM2drYmo53DTcdfLgWdtwcyAPwdHpYcim0kTAIDUjDK7AlEqsbFjeQa1H0gNgDS-0jFp-IQVe_Co/s460/ttb.png'/>
<div class='imgmenu'>
Sejam todos bem-vindos!
Eu sou Thereza, autora desse blog e é com muito carinho que recebo sua visita! Espero que aqui seja um cantinho tão especial para você quanto é para mim!</div></center>
<center>
<a class='themenu' href="http://chiclete-funny.blogspot.com">Home</a>
<a class='themenu' href="http://chiclete-funny.blogspot.com">About</a>
<a class='themenu' href="http://chiclete-funny.blogspot.com">F.A.Q</a>
<a class='themenu' href="http://chiclete-funny.blogspot.com">Credits</a>
</center>

-

Resultado:

Sejam todos bem-vindos! Eu sou Thereza, autora desse blog e é com muito carinho que recebo sua visita! Espero que aqui seja um cantinho tão especial para você quanto é para mim!

Home About F.A.Q Credits -

Personalize ao seu modo, mudando larguras (width), alturas (height), cores, o texto de boas vindas, os links, a imagem...o código é bem simples! Espero que Gostem