foxes research's profile picture

Published by

published
updated

Category: Web, HTML, Tech

a small compilation of code to make your profile a bit nicer!


GOOGLE HAS CRASHED TWICE WHILE MAKING THIS HELP

ANYWAYS


adding images

to add images use this code

<img src="image adress" border="0" "width="250px">

you need very specifically the image adress else it wont work!

now to add your own images you can post them to

imgur  imgbb  postimg


youtube and spotify

this is what normally code should look like


the youtube code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

now replase VIDEO ID with the end of the share link youtube gives you

https://youtu.be/osmsrLjV484

the highlighted yellow part is the ID part of the link


spotify embed code:

for the bigger music box

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2l3C8yPgLJ9NE9C7uA7rJD?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>


for the smaller code

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2l3C8yPgLJ9NE9C7uA7rJD?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>


the yellow parts are the track IDs, now you cannot just replace the link that'll break the code you need

https://open.spotify.com/track/61oHQm9nARB1EHdt4JTENp?si=9840a3ce5ed74b6c

this highlited code!


drop-down list

this for example is a drop down list

your title here

in this box music, images, videos and links work!


the code for the list

<details><summary style="font-size: 13px;" class="mb8"><u>your title</u> </summary>

<p>
and your content right here
</p>
</details></p>


flag counter

use this website to add a flag counter to your blog//profile!

Flag Counter

now this might have... a lot of german flags at the end

since i am german and will be editing this blog a lot!


tamanotchi

with this website you can have practically a tamagochi or however theyre spelled

and they exist in smaller and bigger

It's tamaNOTchi! Click to feed! It's tamaNOTchi! Click to feed! It's tamaNOTchi! Click to feed!

It's tamaNOTchi! Click to feed! It's tamaNOTchi! Click to feed! It's tamaNOTchi! Click to feed!


blinkies

now if you want to make your own but are lazy blinkies.cafe is your best friend

now if you want even more tumblr is also a good source!

even stamps are pretty popular on tumblr! 

again like how i started you can use this code

<img src="image adress" border="0" "width="250px">

to add the blinkies/stamps


loading screen

when someone clicks on your profile a loading screen apears for a second or more



<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('YOUR URL');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>



raining objects

for the small images raining down on your profile

 https://www.glitter-graphics.com/generators/falling_objects.php


OR the code!


<div class="snowflakes">

  <div class="snowflake">

   <img src="URL"/>

  </div>

  <div class="snowflake">

  <img src="URL"/>

  </div>

  <div class="snowflake">

  <img src="URL"/>

  </div>

  <div class="snowflake">

  <img src="URL"/>

  </div>

  <div class="snowflake">

  <img src="URL"/>

  </div>

  <div class="snowflake">

  <img src="URL"/>

  </div>

  <div class="snowflake">

    <img src="URL"/>

  </div>

  <div class="snowflake">

    <img src="URL"/>

  </div>

  <div class="snowflake">

     <img src="URL"/>

  </div>

  <div class="snowflake">

    <img src="URL"/>

  </div>

  <div class="snowflake">

    <img src="URL"/>

  </div>

  <div class="snowflake">

    <img src="URL"/>

  </div>

</div>

<style>

/* customizable snowflake styling */

.snowflake {

  color: #27cff5;

  font-size: 2em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 0px rgba(0,0,0,0.7);


}


@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


</style>


just replace "URL" with the actual URL!



72 Kudos

Comments

Displaying 9 of 9 comments ( View all | Add Comment )

𝐌𝐚𝐫𝐬

𝐌𝐚𝐫𝐬 's profile picture

ty this is very helpful!


Report Comment

Rai

Rai's profile picture

This looks cool


Report Comment

chewbecca

chewbecca's profile picture

I’m v new to this site and this is so so helpful, thank you!!


Report Comment

XxXLizzyxViciousxXx

XxXLizzyxViciousxXx's profile picture

I knew most of these but still super useful !! *gives 2 kudoz*


Report Comment

kmila_w4y

kmila_w4y's profile picture

definitivamente esto es muy practico!!!


Report Comment

deriii ♠

deriii ♠'s profile picture

this is sooo helpful, will definitely be using some of this :)


Report Comment

★DONNIE★

★DONNIE★'s profile picture

Aaaaa this is so helpful tysm!! :D /gen


Report Comment

Ae

Ae's profile picture

nice!


Report Comment

Jazmine/Tabitha

Jazmine/Tabitha's profile picture

Thx!!!! :)


Report Comment