⋮ 𝐺𝑎𝑟𝑜𝑡𝑎 𝑛𝑜 𝑀𝑢𝑛𝑑𝑜 𝐻𝑡𝑚𝑙 ⋯

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.

<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;">

<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.

<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;">

<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>
</div>
</div>
<div class="music-info">
<div class="song-name">Kiss me more</div>
<div class="artist-name">Doja Cat</div>
</div>
</div>
</div>
<audio id="audio" src="https://dl.dropbox.com/s/83j540fdv334zij/Kiss%20Me%20More%20mp3" type="audio"></audio>

</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;">

<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>

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:

océanejunho 20, 2021
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
Millajunho 20, 2021
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
Nekojunho 30, 2021
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

Adicionar comentário

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 ~

{ 환영 G N M H 사랑 }

19.6.21

Modelos de mini music players

6 comentários: