Que tal usar um lindo menu tooltip redes sociais animado com CSS3
Olá leitores. Eu venho aqui para dar um presente ao seu blog, pelo tempo que estive ausente, trata-se de um menu 'sexy', que usa a técnica tooltip e será animado com CSS3. Você pode seu funcinamento aqui.
Siga o bloggermin no Twitter e no Google+, e fique por dentro das novidades para o seu blog. E curta também a nossa página no Facebook.
Adicionar menu ao blog.
A primeira coisa que devemos fazer é adicionar o HTML no blog. Entrando no Editar HTML do seu modelo, procure <body> ou <body expr:class='"loading" + data:blog.mobileClass'> acrescentando dentro de <body> ou <body expr:class='"loading" + data:blog.mobileClass'>, na seção onde você deseja ver o menu social.
Devem também substituir o # que está no href = "#" pelos links das contas sociais.
Adicionando estilos (CSS3):
É a vez de os estilos, em seguida, procure em seu modelo ]]></b:skin> e coloque o código CSS antes logo acima:
Opções
Apenas como exposto, obteremos a funcionalidade do menu social, mas discutiremos algumas opções, caso queira personalizar mais a seu gosto.
Adicionar ou remover o ícone e link.
Para adicionar ou remover marcadores, que só deve ir para HTML procurarclass= "nav-tt" , onde iremos encontrar o mesmo acima (o primeiro código).
Para adicionar um novo link, é preciso acrescentar antes </ul> e editar seus dados conforme descrito nos comentários no código:
efeitos:
Para alterar o tempo de como mostrar o tooltip somente procure ".nav-tt li a span" (sem aspas) e editar isto:
Para alterar a escala ou tamanho precisa editar isto:
Bem caros leitores espero que gostem desse belo trabalho e espero que seja de utilidade em seus projetos e ações.
Siga o bloggermin no Twitter e no Google+, e fique por dentro das novidades para o seu blog. E curta também a nossa página no Facebook.
A primeira coisa que devemos fazer é adicionar o HTML no blog. Entrando no Editar HTML do seu modelo, procure <body> ou <body expr:class='"loading" + data:blog.mobileClass'> acrescentando dentro de <body> ou <body expr:class='"loading" + data:blog.mobileClass'>, na seção onde você deseja ver o menu social.
Devem também substituir o # que está no href = "#" pelos links das contas sociais.
<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="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li>
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
</ul>
É a vez de os estilos, em seguida, procure em seu modelo ]]></b:skin> e coloque o código CSS antes logo acima:
}
.nav-tt{
padding: 50;
width: 70%;
height: 70px;
margin: 80px auto 30px auto;
}
.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/AVvXsEiUe9ugADnXY9iR50pOqJS7gcskNId-vZ4-SCK65HHtEmLkFqz5G6ojtqIB-CuuvArWevA2NEQdkLKxIv_SHPIb0ig7jiLlfbJfiYSMlmnemxA5gp-ijXSN6lbc2hNe6E_ihgt8D-j71XYH/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjasaMSwc31jRNlhskL2Ew5z5sbbB875RzTOYHTFBjKPt0jF-fnrfW6T9DAeFsElzSWI3AfL7glN9rbCwzlpcAC48KPmOpqcgFvkHW8IrRBUp_yqnYX-5ppmlcXzkWZhfkUTaKwylOyYnC6/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRVn9h6d5rm3x6xWR0Za3D5LmtO_PWj66cmtsl6qyFtZUfuPXINUJKZ3hd0KzBbC0cAkpZys6yayQ6qElvZmPKBats2OKz1fhuDVgVebj2oK4Of3GMuyHjUvltPkCqPi6qFXTkwd8Gwor/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WKzRJlwUyWRLQv5Sx3OKJA7kRdEH_r7xX_C_KTd3OtY9eR8MR-HHTCidzgT9cDVNQzxkGW-TOl1j_BcI912tgrX7nxy-XaRPPhxC26E86KTViAmTFgepxSgHUr_DkUKfmdxlj44cSEeE/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi235wBMro9WifIJxlOHEQPFvASQdsV2j_mt4wQi8fMUxHMD11kVisC4A7X6Dx6klHw_I04gPckg41xJFCuxx-IloCf2E4rNzFfozKsatoMUfhnJYi7PtrnjTyGMhPlQVhv8JhJ8LJzk0D3/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ZMcFNU9mwNAeAwVwEgZRJchZfF__U7D2jtDsMwnpwaWl9Ih_vLDnRIvJDpmeIaSD5h5iPSmZCrwlbDhckdfUjWFFpTiKdUgKMIs3Zdlvv_mpp70j5pQocd_ns7iaOigYbM-wpL3POr5C/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_-iTlsaUXdoDq9JDfVPPVPcYmBAv5jHtovR8TRPsA1H6Xum8-Hlt6Q4z4kT_1did_MGTWX7RKhC9rN7L3kL45Y7f2xmPF62eASKTercZJpdvwyFX9_0uReA4SI-vz5tMyx965Jkm_fdl/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTGTwb7TNAkuiypQEe5sbUO4hU8Ku1cQ-B4BqnYFUUSOpxZSlM_joASzm0rjx1dMKge8eKlH_jVVKw70Ke-4AQDHHBcP1Lw-yunBP6FRNB3yY1BJ6X3Zhnhigj1J6qSjWb8QcSFMDSwpH/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbs7CganHkTk7a0grUGTYQq9uIkA9Ib2xZGe6lThOGoEGa2RszZt2f_ZFlcqfHo6ymRFC1w5L55cAnzmagKZjHFzPlpVEXejW5pVD2y8sz-lanZlMn1jZNOT8GZjQAbrpHu4PggcIZHWf/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: #719DAB;
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);
}
Apenas como exposto, obteremos a funcionalidade do menu social, mas discutiremos algumas opções, caso queira personalizar mais a seu gosto.
Para adicionar ou remover marcadores, que só deve ir para HTML procurar
Para adicionar um novo link, é preciso acrescentar antes </ul> e editar seus dados conforme descrito nos comentários no código:
<li><a class="nome-class" href="http://www.seulinkaqui.com" target="_blank"><span>Nome do link</span></a></li>Então, devemos ir ao CSS do nosso modelo procurando ".nav-tt li a span"(sem aspas) e antes dela adicionar.
<!--class="nome-class" (Para reconhecê-lo altere para nome da class que está no CSS).-->
<!--href="http://www.seulinkaqui.com" (Você deve alterá-lo para o seu link).-->
<!--<span>Nome do link</span> (Nome para mostrar quando passar o mouse)-->
.nav-tt li .Nome-class-anterior{Para remover somente deve fazer o oposto (apagar o link CSS e seu HTML).
/*Adicione o nome da class anterior chamada no HTML*/
background: url(Cole aqui o link de seu ícone) no-repeat;/*Link do ícono*/
}
Para alterar o tempo de como mostrar o tooltip somente procure ".nav-tt li a span" (sem aspas) e editar isto:
-webkit-transition: all 0.3s ease-in-out; /*-------------------------------*/Exemplo com o tempo de 1 segundo
-moz-transition: all 0.3s ease-in-out;/*Alterar 0.3 pelo tempo que você*/
-o-transition: all 0.3s ease-in-out;/* Deseja, é mostrado em */
-ms-transition: all 0.3s ease-in-out;/* Segundos (0.3 segundos) */
transition: all 0.3s ease-in-out;/*------------------------------------*/
Para alterar a escala ou tamanho precisa editar isto:
-webkit-transform: scale(0);/*-------------------------------*/Exemplo escala de 10 com o tempo 0.5 segundos:
-moz-transform: scale(0);/*Alterar (0)*/
-o-transform: scale(0);/* Pelo tamanho */
-ms-transform: scale(0);/* que queira */
transform: scale(0);/*------------------------------------*/
Bem caros leitores espero que gostem desse belo trabalho e espero que seja de utilidade em seus projetos e ações.
COMENTÁRIOS