19.6.21

Modelos de mini music players

Hello xuxuzes! Tudo bem nenéns? Que dia chuvoso e frio goitoso sô, eu fiquei o dia inteiro na cama e assistindo um dos animes meus preferidos hehe. Qual Roh? Adivinhem? Hihi Naruto né amores. Mas Cara, tu ainda está vendo Naruto? Sim queridos eu estou u.u, eu não terminei o Shippuden e eu sei que ele terminou em 2017 mas por vários motivos eu nunca conseguia terminar, se não era pela faculdade era por causa do trabalho. Agora está faltando exatamente 20 episódios e eu termino e amigos, mesmo com filers os episódios canônicos são foda demais, alguns são repetitivos mas mesmo assim são ótimos. Terminando quero começar logo Boruto >3<

Não lembro se eu já havia comentado de animes em algum post, provável que já mas caso não pois não lembro eu amo animes, além de Naruto eu estava acompanhando Demon Slayer que por sinal é bom demais, ahh tinha esquecido um que vi e que falta terminar a 2º temporada é o anime One Punch, gente esse anime é bom demais, além da história o protagonista é engraçado demais e tenho certeza que se verem não irão se arrepender e claro, se gostarem desse tipo de anime né rsrs. Outro que terminei e que é bom demais é o original da Netflix o anime Beastars, vejam esse gente por favor!

Mudando de assunto, esse post eu fiz pois a Oceane pediu em um comentário que queria que eu postasse um modelo de music player parecido com o meu e com isso eu fiquei pensando sobre e resolvi editar 3 modelos e trazer aqui. E falando sobre mini players eu estava fuçando na net para procurar tutos sobre e infelizmente descobri que o nosso amado Billy Player aquele site que íamos lá para gerar um mini player fofo acabou de vez ou seja, aqueles tutoriais de mini players feitos por tumblrs não funfam mais =(. Os únicos que ainda funfam são os do tumblr Gentle Themes e os modelos que trago hoje são modelos de lá, no caso dois modelos, o 3º ,modelo é edição minha >-<

Bora lá então?

LIVE PREVIEW 

Modelo 1

Vá até o seu modelo e clique em editar html, dentro procure por <head> e abaixo dele cole o código da que irá fazer seu player funfar.


<!-------MUSIC PLAYER 02 BY GLENTHEMES------->  

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

 

Após ter feito isto, agora procure por ]]skin; e acima dele cole o código abaixo:


/*-------MUSIC PLAYER BY GLENTHEMES-------*/

#glenplayer02 {

background: #fff;

border: solid 1px #dbc5e1;

width:228px;

height: 20px;

padding-top: 3px;

padding-bottom: 3px;

padding-left:10px;

padding-right: 10px;

display:flex;

z-index:99;

}

#glenplayer02 a {

text-decoration:none;

}

#glenplayer02 > div {

align-self:center;

-webkit-align-self:center;

}

.music-controls {

user-select:none;

-webkit-user-select:none;

width:13px;

font-size:13px;

cursor:pointer;

}

.playy, .pausee {color:#af95b6;} /* color of play & pause buttons */

.pausee {display:none;

}

.sonata {

margin-left:10px;

color:#d2c267; /* color of music note symbol */

}

.labeltext {

margin-left:20px;

font-family:Calibri;

font-size:11px;

text-transform: uppercase;

text-align: center;

color:#8c7492; /* color of song title */

letter-spacing: 1px; 

}


Salve, agora vá até layout e adicione um gadget de html copie o código abaixo cole dentro e salve:


<div style="position: fixed; margin-left:134px; margin-top: -120px;margin-bottom:0px; z-index:99999;">

<!-------MUSIC PLAYER BY GLENTHEMES------->

<div id="glenplayer02">

<div class="music-controls" onclick="songstart();">

<div class="playy">❤</div>

<div class="pausee">❚❚</div>

</div>    

<div class="sonata">♫</div>

<div class="labeltext">Olivia Rodrigo - Deja vu</div>

</div>

<audio id="tune" src="https://dl.dropbox.com/s/8n2qrldzor4ypdx/deja%20vu%20mp3" type="audio"></audio>

</div> 

</div>


Abaixo notem que o link da música é retirado de um site de hospedagem, nos links usados nesses players peguei os links do site dropbox.



Código original do site:

https://www.dropbox.com/s/83j540fdv334zij/Kiss%20Me%20More%20mp3.mp3?dl=0

Porém, para poder usar no blogger e fazer ele realmente funcionar vocês terão que usar o código exatamente como o de baixo:

https://dl.dropbox.com/s/8n2qrldzor4ypdx/deja%20vu%20mp3

Para isso, na hora que vocês forem copiar o link da música, recortem o link da parte do .com em diante até onde tem mp3.

Exemplo: com/s/83j540fdv334zij/Kiss%20Me%20More%20mp3

Após recortar colem junto ao código abaixo:

https://dl.dropbox

Salve e verifique se seu player escolhido funciona. Sobre o modelo dele vocês podem editar o fundo e as cores da fonte e para isso recomendo que edite apenas nos códigos citados abaixo:

#glenplayer02 {
background: #fff;
border: solid 1px #dbc5e1;
width:228px;
height: 20px;
padding-top: 3px;
padding-bottom: 3px;
padding-left:10px;
padding-right: 10px;
display:flex;
z-index:99;
}

.playy, .pausee {color:#af95b6;} /* color of play & pause buttons */
.pausee {display:none;
}
.sonata {
margin-left:10px;
color:#d2c267; /* color of music note symbol */
}
.labeltext {
margin-left:20px;
font-family:Calibri;
font-size:11px;
text-transform: uppercase;
text-align: center;
color:#8c7492; /* color of song title */
letter-spacing: 1px; 
}

Modelo 2

Vá até o seu modelo e clique em editar html, dentro procure por <head> e abaixo dele cole o código da que irá fazer seu player funfar.


<!-------MUSIC PLAYER 07 BY GLENTHEMES------->  

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla" rel="stylesheet"/>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

<script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>


Após ter feito isto, agora procure por ]]skin; e acima dele cole o código abaixo:

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
--Circle-Size:38px;
--Progress-Border-Size:1px;
--Progress-Empty:#e1d384;
--Progress-Fill:#c0b260;
--Player-Background:#fbfbfb;
--Play-Pause-Buttons-Size:10px;
--Play-Pause-Buttons-Color:#caaad3;
--Player-Text-Margin:15px;
--Song-Name-Font-Size:10px;
--Song-Name-Color:#8c7492;
--Artist-Name-Font-Size:10px;
--Artist-Name-Color:#b7a74f;
}
#glenplayer07 {
background: #fff;
border: solid 1px #dbc5e1;
width:228px;
height: 38px;
padding-top: 3px;
padding-bottom: 3px;
padding-left:10px;
padding-right: 10px;
z-index:999999999999999999;
}
.flamingo {
display:flex;
align-items:center;
}
.circleofdeath {
width:var(--Circle-Size);
height:var(--Circle-Size);
border-radius:100%;
overflow:hidden;
}
.tinfoil {
width:var(--Circle-Size);
height:var(--Circle-Size);
background:var(--Progress-Empty);
border-radius:100%;
}
.oven {
background:var(--Progress-Fill);
}
.oliveoil {
width:100%;
height:100%;
}
.crust {
position:absolute;
top:0;
display:flex;
align-items:center;
justify-content:center;
width:var(--Circle-Size);
height:var(--Circle-Size);
}
.cherry {
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
background:var(--Player-Background);
border-radius:100%;
cursor:pointer;
z-index:1;
}
.music-controls {display:flex;align-items:center}
.music-controls .material-icons {
font-size:var(--Play-Pause-Buttons-Size);
color:var(--Play-Pause-Buttons-Color);
}
.pausee {display:none;}
.beff {display:none;}
.aff {display:block;}
.music-info {
margin-left:var(--Player-Text-Margin);
line-height:1em;
}
.song-name {
font-family:ABeeZee;
font-size:var(--Song-Name-Font-Size);
text-transform:uppercase;
letter-spacing:1.5px;
color:var(--Song-Name-Color);
}
.artist-name {
margin-top:3px;
font-family:karla;
font-size:var(--Artist-Name-Font-Size);
letter-spacing:0.3px;
color:var(--Artist-Name-Color);
}

Salve, agora vá até layout e adicione um gadget de html copie o código abaixo cole dentro e salve:

<div style="position: fixed; margin-left:194px; margin-top: 5px;margin-bottom:0px; z-index:99999;"> 
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer07">
<div class="flamingo">
<div class="circleofdeath">
<div class="tinfoil">
<div class="oliveoil"></div>
</div>
<div class="crust">
<div class="cherry">
<div class="music-controls">
<i class="material-icons playy">play_arrow</i>
<i class="material-icons pausee">pause</i>
</div>
</div><!--cherry-->
</div><!--crust-->
</div><!--circleofdeath-->
<div class="music-info">
<div class="song-name">Kiss me more</div>
<div class="artist-name">Doja Cat</div>
</div><!--music-info-->
</div><!--flamingo-->
</div><!--glenplayer07-->
<audio id="audio" src="https://dl.dropbox.com/s/83j540fdv334zij/Kiss%20Me%20More%20mp3" type="audio"></audio>
<!----end music player---->           
</div>

Salve e verifique se seu player escolhido funciona. Sobre o modelo dele vocês podem editar o fundo e as cores da fonte e para isso recomendo que edite apenas nos códigos citados abaixo:

:root {
--Circle-Size:38px;
--Progress-Border-Size:1px;
--Progress-Empty:#e1d384;
--Progress-Fill:#c0b260;
--Player-Background:#fbfbfb;
--Play-Pause-Buttons-Size:10px;
--Play-Pause-Buttons-Color:#caaad3;
--Player-Text-Margin:15px;
--Song-Name-Font-Size:10px;
--Song-Name-Color:#8c7492;
--Artist-Name-Font-Size:10px;
--Artist-Name-Color:#b7a74f;
}
#glenplayer07 {
background: #fff;
border: solid 1px #dbc5e1;
width:228px;
height: 38px;
padding-top: 3px;
padding-bottom: 3px;
padding-left:10px;
padding-right: 10px;
z-index:999999999999999999;
}

Modelo 3

/*-------MUSIC PLAYER BY ROH OF GNMH-------*/
#musictab {
position:fixed;
display:block;
width:242px;
height:20px;
line-height:20px; 
background:#fff; 
border: solid 1px #dbc5e1;
padding:3px 3px 3px 3px;
text-transform:uppercase; 
text-align:center;
letter-spacing: 1px; 
font-family:Calibri;
font-size:11px;
overflow:hidden;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}
#musictab:hover { 
color:#542619; 
text-shadow: 2px 1px 1px #fff;
padding:3px 3px 3px 3px;
height:42px; 
width:242px;
}   
#musictab a{
color:#8c7492; 
text-shadow: 1px 1px 1px #;
}
audio controls { 
background: #000;
box-shadow: ;
transform: scale(1.05);
}      

Salve, agora vá até layout e adicione um gadget de html copie o código abaixo cole dentro e salve:

<div style="position: fixed; margin-left:194px; margin-top: 53px;margin-bottom:0px; z-index:99999;">  
<!-------MUSIC PLAYER BY ROH GNMH------->
<div id="musictab"> 
<a style=";">♬ Who are playing? ♪</a>
<br />
<audio controls preload="metadata" style=" width:240px; height:20px;">
<source src="https://dl.dropbox.com/s/hvajpkk4k9y5m2h/Lil%20Nas%20X%20-%20MONTERO%20%28Call%20Me%20By%20Your%20Name%29%20mp3" type="audio/mpeg">
</audio><br/>
</div></div>  
<!----end music player---->

Esse modelo que editei pode ser mexido em tudo, fontes, cores, fundo etc.. Caso usarem esse modelinho favor creditar meu broguinho, agora caso use os dois primeiros modelos credite o tumblr gentle themes também por favor pois os códigos são dele, eu só modifiquei do meu jeito.

6 comentários:

  1. Oi nenê!

    Eu sou péssima com animes, o último que tentei assistir foi, também, Naruto. Eu até tinha gostado e tal, mas eu não me animei ao ponto de querer continuar, me senti muito "noob" por não entender por onde começar e desisti antes mesmo que começar de verdade :) eeeee

    AWN que anjinho ♡ Obrigada por atender o meu pedido, já faz uns bons anos que procuro tutoriais que funcionassem, mas eu só fui entender um pouco mais de HTML e códigos no geral de uns 3 anos pra cá e nesse meio tempo não procurei mais esse tipo de tutorial. A parte que eu mais me perdia era de como colocar a música no player. OBRIGADA ROH <3 Vou usar esse tuto no meu próximo layout.

    Desculpa o comentário ruim e curto, hoje é a 1º comunhão do meu irmão e pra variar eu não estou conseguindo me concentrar em uma só coisa. Até a próxima anjo, muito obrigada pelo tutorial. Os modelos são lindos.

    With love, Océane.
    Peach Aesthetic꒱ (〃^▽^〃) ♡

    ResponderExcluir
    Respostas
    1. Olá xuxu >3<

      Tudo bem hahaha anime é caso de amor e ódio, ou você ama ou odeia não tem meios termos hihi.

      Sobre os players eu só fui entender como o link da música funcionava fuçando mesmo pois a maioria não funfava, só os do billy player davam certo hahaha.

      Não foi curto não e mesmo com pouco tempo agradeço por parar aqui e comentar >.<

      De nada e sempre que quiser algo pode pedir que se eu souber e puder fazer eu faço ;)

      Kissus =3

      Excluir
  2. oi roh, como você tá?
    esse foi um dos primeiros blogs de tutoriais html que eu conheci, junto com o da Wendy a alguns anos, e ver ele ativo ainda é simplesmente tudo pra mim. Esse layout da Rosé é a coisa mais linda, eu amei.

    eu também amo animes e eu amo naruto, eu cheguei a terminar o shippuden em 2018, mas eu tô assistindo de novo também, faltam tipo, uns 80 episódios pra terminar, por conta da facul. O meu anime favorito é hxh e o motivo é o hisoka.

    eu amei o tutorial, o player 2 é tão bonitinho, espero que continue postando mais tutoriais.

    anthemis ♡

    ResponderExcluir
    Respostas
    1. Olá Milla, tudo bem?

      Ahhh sério? Poxa que gostoso de ler isso, sim está ativo até porque se eu parasse de novo e não voltasse mais eu iria deixar ele aberto..

      Naruto é tão bom né? Não posso dizer o mesmo de Boruto pois não vi mas já li tantos comentários ruins sobre que meio que me deu um desânimo de assistir..

      O tutorial ajuda né? A maioria dos player não funfa mais pois utilizavam muito o billy player e ele acabou não existe mais, ainda bem que existe outros métodos para usar >.<

      Beijoo =3

      Excluir
  3. Oi Roh! Tudo bem contigo? Aaah eu sempre visitei seu blog, sempre usei os tutoriais, mas acho que nunca cheguei a comentar, fico feliz que tenha voltado pra cá ♥

    Aaah eu amo um tempinho frio também, viu? com chuva ainda, hmnnn! Queria ter ficado em casa vendo série também, tentar inclusive voltar a assistir animes, eu amei BEASTARS inclusive! Mas, acho que esse foi o último que eu vi, queria começar demon slayer tbm porque tá sendo muuuuito bem comentado, né? espero que consiga terminar seu narutinho~

    AAA finalmente um tutorial de player!! Nossa, depois que o Billy Player morreu e também o bang do java acabou tudo virou um caos nessa parte e eu tava doida atrás de algum tutorial atualizado sobre os players! Já vou procurar usar no meu próximo layout, obrigada pelo tuto e os modelos ficaram lindãos ♥

    inclusive, esse layout da rosé tá a coisa mais perfeita! Eu queria muito saber como que faz esse layout parecendo uma caixinha sabe? é só background que acrescenta? fica tudo tão encaixadinho, acho uma graça ♥

    vou ficando por aqui, até!
    beeeeeeeeeeeeeeeeijos!
    Neko

    lilimerence.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá Neko, como vai?

      Ah que pena que nunca comentou rsrs, mas fico feliz por utilizar as coisas daqui, obrigada pelo carinho..

      Eu amo frio, não aqueles de cair o cu da bunda mas amo frio, contando que eu fique quentinha rsrs.

      Pois é, fiquei triste que o billy player acabou, na verdade a versão do flash player cagou com tudo né? Então por isso acabou.. Que bom que gostou, o bom é que dá de editar como quiser >.<

      Awwwm obrigada more, que bom que gostou, eu particularmente não curti muito não pois não era o que eu queria de início.. =( Mas dá pro gasto.

      Beijos xuxu =3

      Excluir

Olá! Se chegou até aqui é porque leu toda a postagem certo? Não? Poxa, comenta antes de sair e por favor, tente ler todo o conteúdo do post pois, por mais que a maioria do que eu escrevo seja sobre css e html, eu também comento sobre vários assuntos no mesmo post.

E abaixo, algumas regrinhas para seguir e fazer um comentário bem maroto:

1 - Comente apenas se sentir a vontade e queira.

2 - Seja educado, não use palavras inapropriadas, respeite os outros comentários e opiniões alheias.

3 - Se eu fico feliz quando comentam algo? Ô se fico, na verdade adoro!

4 - Antes de sair além de comentar deixe o link do seu bloguinho caso queira pois assim conseguirei lhe visitar e deixar um recadinho.

5 - Quer ser afiliado ao blog? Só pedir nos comentários ou na própria página direcionada a isto, estou precisando de afiliados mesmo rsrs.

Obrigada por tanto e obrigada por me acompanhar até aqui, fico muito feliz e grata pela sua companhia!

Roh ~

GNMH - LAYOUT E DESIGN POR RDS / CRIADOS EXCLUSIVAMENTE PARA ESTE BLOGUINHO ❤