Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

Music Player em hover!


Boa noite meus quindins, tudo bem? Como é bom estar aqui novamente, mesmo sabendo que muitos me abandonaram, muitos deixaram de comentar e interagir, mas tudo bem, mesmo acontecendo isso eu voltei e não larguei aqui justamente por aqueles que ainda comentam e seguem o meu trabalho. Sei que também dei motivos para pararem de acompanhar por eu estar muito ausente e por falta de posts, me desculpem por isso queridos leitores. Prometo estar mais presente!

Agora falando sobre os seguidores, falta somente um para atingir minha meta, a próxima será de 300 seguidores, obrigada de coração a todos que me seguem, espero sempre poder estar postando coisas legais para todos vocês!! Bem hoje estou trazendo um tuto bem fácil e muito útil, e além de útil deixa o blog com um ar diferente e mais original afinal quando um tira pra usar um modelo de algo, meio milhão copia atrás! Então ainda conseguem lembrar do tema da Ellie Goulding?

Até hoje foi o tema que menos ficou no blog, apenas 2 semanas, mas não por culpa minha e sim do blogger u.u! Eu amava também o tema dela, mas não estava fechando então saiu este, agora voltando ao player hover, eu peguei ele aqui neste tumblr, então créditos á ele. E se alguém lembra eu tinha o modelo desse player no blog, lá no canto esquerdo é um modelo que fica escondido quando você passa o mouse ele aparece!Então ao tuto?

Entre em layout e vá em editar modelo  html, dentro dê um F3 e procure por ]]/skin, acima dele cole o seguinte código:

#player
{position:fixed;z-index:999;
top:0px;
left:-202px;
height:auto;
padding:4px 8px 3px 2px;
letter-spacing:2px;
background-color: #COR DO FUNDO;
-moz-border-radius:0px 0px 10px 0px;
border-radius:0px 0px 10px 0px;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
border-bottom: 1px solid #COR DA BORDA DE BAIXO;
border-right: 1px solid #COR DA BORDA DIREITA;}
 #mus
{float:left;
color: #COR DA LETRA;
padding-left:120px;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;}
 #player:hover #mus
{padding-left:0px;
opacity:0;}
 #player:hover
{left:0px;

Coloque as cores que você quer onde se pede e onde fica left:-202px; mude até ficar no lugar desejado!
Salve e vá até layout, adicione um html java script e dentro cole este código:

<div id="player">
<div style="float:left;width:150px">CÓDIGO DO PLAYER</div>
<div id="mus">music ~ <img src="http://media.tumblr.com/tumblr_lkl75i7xUz1qfamg6.gif"></div>
</div>

Se quiser trocar a imagem, coloque o link da imagem desejada no lugar de 

http://media.tumblr.com/tumblr_lkl75i7xUz1qfamg6.gif 

Salve, veja se está tudo certo, fica super fofo, você pode escolher uns minis gifs bem fofos.
É isso pessoal espero que tenham gostado do tuto de hoje... ~ Chu


8 comentários:

  1. Pode ter perdido alguns, mas recupera eles e muitos mais *---*
    Amei o efeito e super legal, acho que vou usar.

    Bunny Crazy

    ResponderExcluir
    Respostas
    1. Que bom que gostou flor, fico bem feliz, usa sim vc pode mudar várias coisas nele como tamanho, cores mudar o gif que vai no ladinho das letras.. Beijos flor <3

      Excluir
  2. Ótima postagem, muito útil para quem não conhece USHSUAHSA :3

    @Oh!Let'sFly

    ResponderExcluir
    Respostas
    1. Verdade eu amei o efeito dele, super fofo e diferente >.<

      Excluir
  3. Pode me explicar que perfeição de layout? *OO* O melhor que tu já fez, Roh, sério ♥

    Adorei o efeito, fica suuuuuuuper lindo! Adorei :33

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Obrigada Flor, imagina.. a gente tenta neh? Eu tbm gostei do resultado desse ;)

      Beijocas =)

      Excluir
  4. Aii apaixonei, salvei para usar em algum theme de tumblr.
    Eu vi o layout passado Roh, mas acabei não comentando, eu estou com uma preguiça GIGANORME de comentar em qualquer blog, só quando a postagem ou a pessoa merece muito aí eu comento.
    O layout novo ficou tãããão lindo, vc já deve saber que eu amo azul néh? Não demorou nada para eu me apegar nesse. O cabeçalho está incrivel. Parabéns pelo trabalho e parece que você já passou da meta, parabéns.
    bye bye

    ResponderExcluir
    Respostas
    1. Obrigada amor >.<, verdade esse player fica super fofo nos themes do tumblr mesmo.. sim consegui a meta agora vamos partir para a outra!
      Kissus amore >.<

      Excluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)