25 outubro 2014

Menu Sombra

| |
Olá. Aqui estou eu, novamente, depois de muitos e muitos dias fora. Eu não vou falar o que eu fiquei fazendo, pois eu realmente não fiz nada, a não ser, comer, dormir, ler (meio off-topic, mas Jogos Vorazes e o Pequeno Príncipe são ótimos!) e assistir meus seriados e animes.

Como podem ver, o blog está com um novo template e algumas novidades. (1) eu formarei uma equipe de 2-3 para postar resources, para ajudar a deixar o blog mais ativo; (2) tumblr para themes e templates, está meio desatualizado, mas isso irá mudar em breve; (3) página de downloads, com links do PS, aTube Chatcher e outros programas muito importantes.

Sobre o tutorial, é um menu com imagem é bem discreto. Você pode usar no gadget de introdução. Exemplo.




Vá em Modelo - Editar HTML - procure por ]]>< - cole o código abaixo em cima da tag

#oii-isa:hover #menu-suddenly-isa{
opacity: 1;
}
#menu-suddenly-isa{
opacity: 1;
position:absolute;
-webkit-transition: all .60s ease-in-out;
-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;
margin-left: 1px; /* Move o menu para os lados */
margin-top: -228px; /* Move o menu para cima ou para baixo */
}
#menu-suddenly-isa a {
color: white; /* Cor do texto */
background: transparent;
margin-bottom: 0px;
margin-left:-1px;
float:left; /* posição */
font-family: trebuchet ms; /* Nome da fonte */
overflow:hidden;
height: 20px;
padding:2px;
width: 13px; /* Deixa apenas o coração a mostra */
text-decoration:none;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;}
#menu-suddenly-isa a:hover {
-moz-box-shadow:inset 800px 0px 0px #f1f1f1; /* Cor da sombra */
-webkit-box-shadow:inset 1000px 0px 0px #f1f1f1; /* Cor da sombra */
-o-box-shadow:inset 800px 0px 0px #f1f1f1; /* Cor da sombra */
-ie-box-shadow:inset 800px 0px 0px #f1f1f1; /* Cor da sombra */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
border-right:solid 6px #e7196b; /* Cor da borda */
width: 190px; /* Deixa o resto do título a mostra Aumente se não der */}

Depois de mudar o que foi pedido, vá em Layout - Adicionar Gadgets - HTML/JavaScript

<img src="URL DA IMAGEM" />
<div id="menu-suddenly-isa">
<a href="/">♥ Home</a><br><p>
<a href="/">♥ Home</a><br><p>
<a href="/">♥ Home</a><br><p>
<a href="/">♥ Home</a><br><p>
<a href="/">♥ Home</a><br><p>
<a href="/">♥ Home</a><br><p>
</div>

Qualquer problema com o código, vá na ask ou avise pelos comentários. Aproveitem ^.^ Mas se repassar, dê créditos, hein?

5 comentários:

  1. O novo template do blog está lindo! *u* As SNSD's são muito lindas, né?! ♥
    Boa sorte com a equipe, acredito que muitas pessoas tentarão ^u^ Eu queria muito tentar me inscrever mas não teria tempo para postar :c

    Esse menu é bem prático e fica com um efeito bem fofinho, adorei <3
    Até mais! || ♡ miki candy。

    ResponderExcluir
  2. Seu blog está incrível! E achei o menu super fofo e realmente super discreto! Talvez eu coloque no meu próximo layout!
    Amei o tuto !

    Apaixonada por Sonhos

    ResponderExcluir
  3. Seu novo template tá lindíssimo *--*
    Esse menu é um amorzinho, amei! Acho que vou usar no meu próximo layout.

    ~XoXo, Cat In My Coffee

    ResponderExcluir
  4. Quando eu pesquiso por ]]>< não dá

    ResponderExcluir
    Respostas
    1. Ao pesquisar, é preciso clicar dentro da caixa que contém o código e apertar Ctrl F.

      Excluir

« »