
1° Passo - Adicionando ao Blog
Procure por
e acima do fechamento da div (</div>) cole o código a seguir:
<ul class='nav-tt'>
<li><a class='twitter' href='LINK DA REDE AQUI' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='LINK DA REDE AQUI' target='_blank'><span>Google Plus</span></a></li>
<li><a class='facebook' href='LINK DA REDE AQUI' target='_blank'><span>Facebook</span></a></li>
<li><a class='linkedin' href='LINK DA REDE AQUI' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='tumblr' href='LINK DA REDE AQUI' target='_blank'><span>Tumblr</span></a></li>
<li><a class='pinterest' href='LINK DA REDE AQUI' target='_blank'><span>Pinterest</span></a></li>
<li><a class='youtube' href='LINK DA REDE AQUI' target='_blank'><span>Youtube</span></a></li>
<li><a class='mail' href='LINK DA REDE AQUI' target='_blank'><span>Mail</span></a></li>
<li><a class='rss' href='LINK DA REDE AQUI' target='_blank'><span>RSS</span></a></li>
</ul>
</div>
2° Passo - Adicionando o Estilo (CSS3)
Em seguida, procure em seu modelo:
E coloque o código CSS logo acima:
---------------------------------*/
.nav-tt{
padding: 50;
width: 120px;
height: 70px;
margin: -20px 0px 30px 20px;
float:left;
}
.nav-tt li{
float: left;
list-style: none;
}
.nav-tt li a{
display: block;
width: 40px;
height: 40px;
margin: 0 2px;
outline: none;
position: relative;
z-index: 2;
text-indent: -9000px;
text-decoration: none;
}
.nav-tt li .gplus{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifeelqfJMBVBV7oQaAubSJuAqVsFJmWvHBx-IrgbRnfjw2W4npR310zMi0MQAq1IxFJvu0ASbjlnVm5XjRWIL-nGoxLVOdsRtU5TsIpHZuq6toHGaDAyIiwnDF1oTd_M2dIFTs9LZkFYYU/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gky_FF-3xYzhbypKhjFoVGBNl5mceNBg8SYqyTAqpQv-K9jMUccHOp6eDRXkr4AmxfF_zLZAxqwQh5q_7xGLh9NykpZBewVhp5KzGkkAwOI0BNmF71U9G_yI3yudh3BEfoFyV9JLSNEW/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Eg-U5MCHIhB5pkjxYD7CTRxtcwNFQ_yYDVV28SzS-2L2uuB4d0Cl52TdVyGNJoLBvBbS_xtofrzAK1fqa1xo-EaorG2Ga04PvSEN_nFsP5GQ190R4A5jMmL3zE7gHy0X9fzty2zFdgTd/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5sRVSsL4lu8ifxHdRtygB5wpPJNXGAvvwOw51i4V05XTPpls4wMYmorKFrIU9Pu2s9VmfwSnSPBErNJSW3Vd2aC2eXbFNriiMECPfcjsZ1BmjnrXRAfRC5yt0FAJ3xPUzXslG1DHdiWGS/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LCC3sHn-UPGt_kgDAxfE5zXCfgL1YW_JLhyr1bOQNACYyTx_P9Xzo-NNrwM7YNU5FYnZHyrG1IUu5hqpvYf0ABC_mqSEibG9Qp_evhABFh7rCQaH6l0VV86RzWJNT-msir4chu8Atqjr/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFv4IAzA3RI11kn6yzi68FtKpxzy419cjV0hG5HRmdHoi5svMg9n08hWOJOLPjKeVuw8kHJHtzLczJjlheYFPOF9fq5joMk8nlB55Tcx6gFyGK3VO7vWipTC2J02zYngASWXOEtnTib9E/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_5rRn_KWDm8VAIXldZFyek4b7KJZKkrYwImJPZ9gZR9FlAWMw4B1jsTvFb7DoKe8fHw4yaGA26dPAWYrQULFzbffvWsKdAPR-pFCdPIw-AH_BmG8NJJ2hY02PuTXEIFBzdSjea2KlEUal/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrC8JNGMKKkki7mFpMwNH3aIAy7t4mwQv19eamXpjP7VQ37ah16EEDnD8yJrTM76apuCZJWErjLeyR0ftmNknxvJfcM8cTkFJozTdR8qCotWZezO7qsst9AlSlJVQmjwajOmj9jeFW9XT/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmHju3Swym0bHd2jvgfA1r6rsmpJVC8ycye9qLWvdDNUO7VxueHg9AVGAxaOFFiz1vvbVj3xqt_ojoDPO6vBsnRtkrPLg4THIpnl-Lc_OUettA55uqvWGrHswT4TcQfZKbZnxtZiHBnsSJ/s128/rss.png) no-repeat;
}
.nav-tt li a span{
width: 80px;
height: 80px;
line-height: 80px;
padding: 10px;
left: 50%;
margin-left: -60px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #f5f5f5;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #ffffff;
background: rgba(255,255,255,0.5);
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 50%;
bottom: -40px;
opacity: 0;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-tt li a span:before,
.nav-tt li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 11px solid rgba(0,0,0,0.1);
}
.nav-tt li a span:after{
bottom: -13px;
margin-left: -10px;
border-top: 10px solid #ffffff;
}
.nav-tt li a:hover span{
opacity: 0.9;
bottom: 50px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
É isso pessoal espero ter ajudado e até uma próxima
Este comentário foi removido pelo autor.
ResponderExcluir