Nesta postagem compartilho com vocês este código das redes sociais com tooltip bola pouco popular na net, por que geralmente as pessoas usam mais em seus blogs o tooltip normal. Este além de ser bem chamativo, deixa o design do blogger mais bonito.
Para colocar no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela o seguinte código.nav-tt{
padding: 0;
width: auto;
height: auto;
margin: 10px auto;
}
.nav-tt li{
float: left;
list-style: none;
}
.nav-tt li a{
display: block;
width: 40px;
height: 40px;
margin: 0 5px;
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/AVvXsEjV6SzRtqVqKYyvkNILLR5SrvTfS8w6gPiwDaJEsL996GCLpQD0dEmGJPBd3GO3NpT_8Wa3silXUIMH7LlglR6jDR0o-Dh3WwBMCI3Xsxo-1IY6qHxvapbF0gEW0fp44e1ckE-GdzE3KKiq/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHi2E14uNKgMKlMv7MKrLHq9uFAzaHyfyfaO_BSygSEIMcVbnQSzrwRk5kX6eUHwgpX1VbNdufG_XabIIiQ6ahhz0k_1rZ8G_67m4kLxUn-4LbqiWnitVxnSfd_7KH5Z8BPS42pvbgjmX/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxWT-6g5THqmtAVpRHAIFrbwkG8rC1LD1iUAmMuTnBP_tslePeOXrd2RPN68stD0jZ9Bvbtz8vlCXLVDecz8db49oOVG8vq0OOgWjIsdcFs5RcNt04gV2DmdXTtSP-wS8q0sBB14ZAMKg/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHn3r6rYuAk-lcJA_jx6euhhlgTRW2NT3LwYCicW8wGK7ODnanFOIQ1pC19jO1oO0UV00xepjxzt3VMyt7jTTqzJ2z8Cig8NB3bqBGrCY48ZK4OcPKRXOpGnkGH7S75RDvc2p3CvFrOtTX/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEe5j8m_mfhtVFPUcEwYOi7QC6JZ4np_peMhiC1N_2qoEgNwVCczDzmqw9aOtbDLn-3hFCiQ61DFwDLm57ukqRiryED7G5gRZH3CqChVsZurWNBgDEo5HqU_q7YmzDI6VZ77xtIy-RsOy/s128/linkedin.png)no-repeat;
}
.nav-tt li .youtube{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqlcRosXDGAD-gf-4R5QCWsiSwxcaf-bc-9sl081Ar9Pt2r1CvY_05X7A0yQlB4Goapf8541R6v3KWjAA1b9PD4Jvj9tvpYpxFq2s5WApWGDkb1_agUeGk8xTRoTLjZlWKG5nqYtwmXGlO/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga-gLQivgA_2N4MVmn2djWO8tYoE6YpVHCmjczDIlft50aEcQ63osWv87OnXWwiCoHj3_zf91xAd02SdXhmBluJU1jm1k3EZmZKo0DsvH_BlkSq2WyycfnuxipFX3pBjzSCI9qj6FGFKx-/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXeqjkVvaANXpsumGcJu36EcfeYdboGQBHhYT2PHZCQV6-FQqjxPktGDxITCJS9QucAqHpO04G2HRKXzvsHsTyb5bYeWG8rVFUuot6D2frATrFi2MkZX2ZvhwB2JoHs7hF75n_ySbHsLn/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: Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #fff;
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);
}
Tendo colado o código, salve e feche por que esta parte já está finalizada.Agora, entre em "Layout" - "Adicionar um Gadget" e cole o seguinte código
<ul class='nav-tt'><li><a class='twitter' href='#' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='#' target='_blank'><span>Google Plus</span></a></li>
<li><a class='facebook' href='#' target='_blank'><span>Facebook</span></a></li>
<li><a class='youtube' href='#' target='_blank'><span>Youtube</span></a></li>
</ul>
Coloque o link das redes sociais no #.Tendo feito isto no código, basta salvar e pronto!!!
Nenhum comentário:
Postar um comentário