oa noite, povo.
Estou com várias atividades na cabeça para amanhã, acho até que vocês vão gostar. Pretendo também lançar metas no dia de amanhã. Será que vamos conseguir chegar à 1.800 seguidores amanhã mesmo? Vamos tentar ganhar 100 seguidores em um dia, é apenas um desafio para os leitores. Além disso teremos divulgações, atividades e até avaliações que farei em alguns blogs. Tomara que não haja nenhum imprevisto e tudo corra bem, pois é uma data muito importante.
Prosseguindo, trouxe um tutorial do menu que usei naquele template da Demi Lovato. Uma engraçadinha fez um discurso inteiro dizendo que transformar para blogger deu muito trabalho e etc, mas digo a vocês que não há dificuldade alguma em transformar códigos. O que muda do Tumblr para cá, são os lugares que você vai colocar. Como faz tempo, não lembro de onde foi. Procurei, procurei e não achei.
O primeiro é a visualização normal do menu e o segundo ao passar o mouse.
A transição não é direta, o menu gira antes de passar para a outra "fase".
1. Em editar HTML, procure por ]]></b:skin> e acima do código, cole:
#menu
{background: #ffa1be;
color: #ffffff;
font: normal 20px Capriola;
text-shadow:0 1px #ccc;
width: 70px;
height: 50px;
display: inline-block;
padding: 25px 5px 5px 5px;
margin: 5px;
margin-right: 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
text-align: center;
-moz-box-shadow: inset 0 0 0px 8px #ea649a;
-webkit-box-shadow: inset 0 0 0px 8px #ea649a;
box-shadow: inset 0 0 0px 8px #ea649a;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
#menu:hover
{opacity: .80;
-moz-box-shadow: inset 0 0 0px 38px #7dd3ef;
-webkit-box-shadow: inset 0 0 0px 38px #7dd3ef;
box-shadow: inset 0 0 0px 38px #7dd3ef;
-webkit-transform: rotate(360deg) scale(1.1) skew(1deg) translate(0px);}
/*
FILE ARCHIVED ON 13:40:36 Dec 27, 2023 AND RETRIEVED FROM THE
INTERNET ARCHIVE ON 00:10:34 May 10, 2024.
JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
SECTION 108(a)(3)).
*/
/*
playback timings (ms):
captures_list: 0.661
exclusion.robots: 0.085
exclusion.robots.policy: 0.076
esindex: 0.01
cdx.remote: 11.108
LoadShardBlock: 77.199 (3)
PetaboxLoader3.datanode: 95.76 (5)
load_resource: 75.556
PetaboxLoader3.resolve: 30.327
loaddict: 16.649
*/
2. Depois de personalizar como desejar, cole o seguinte código em um gadget de HTML/JavaScript:
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOMECOMMOUSE'"onmouseout="this.innerHTML='SEMMOUSE'">SEMMOUSE</div></a> <br />
Não tem muito o que explicar.
Em seulink.com, cole a url do que quiser.
Nome com mouse: Cole o que vai aparecer quando passarem o mouse na bolinha.
Sem mouse: é o que aparece normalmente.
Nenhum comentário:
Postar um comentário