Skip to content
Sign upLog in
← Back to Community

Badges

Profile icon
CoolCoderSJHacker

Have you ever wanted to add a tiny badge to your website? Or perhaps wanted to add a copyright symbol telling users who made the website without a full blown sticky footer? Now you can!

Introducing Badges

Very innovative name, I know.

Just add this piece of code to your website and you're all set! Just make sure to replace YOUR TEXT HERE with your text.
Also make sure to replace the link in line 2 of the following codeblock with your own link.

<link rel="stylesheet" href="https://badge.coolcodersj.repl.co/style.css"> <a class="badge" href="https://repl.it/@USER" target="_blank"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Repl.it_logo.svg" alt="replit" />YOUR TEXT HERE</a>

The badge is a small sticky badge in the bottom right corner. Example repl linked.

Multiple badges

Badges has support for up to 4 badges total. To add a badge, copy the same code, but change the class in line 2 to one of these classes -
badge This class is the bottom-most badge
badge2 This class is the second bottom-most badge
badge2 This class is the second topmost badge
badge4 This class is the topmost badge

Animations

When you hover over a badge, the replit logo spins. To prevent this, or if you're putting in your own image, add the class no-animate. An example of this is the Github badge (last badge on example). The replit logo spins, but the Github logo does not.

Edit: Thanks for trending guys!

Voters
Profile icon
DroidSerif
Profile icon
DaCuteRaccoon
Profile icon
k9chelsea2
Profile icon
ch1ck3n
Profile icon
Hibaosama
Profile icon
ItBCode
Profile icon
Knecinedit
Profile icon
clit
Profile icon
piphi
Profile icon
thkc
Comments
hotnewtop
Profile icon
johnnyfrancis

And don't forget to chance the link. Otherwise it will bring you to:
https://coolcodersj.repl.co/
DID YOU JUST TRY TO GET FREE ADVERTISING?!?!?!?!

Profile icon
CoolCoderSJ

@johnnyfrancis
that is an example repl. The above code says "
@user
", where user is your username. I needed to put a valid url for it to work.

Profile icon
CoolCoderSJ

@johnnyfrancis
I have never and will never self-advertise on replit. I may put my content in a post, but will never try to advertise.

Profile icon
nbbcsf

@CoolCoderSJ
how did you make a single subdomain for your site? Usually it's https://..repl.co but yours is just https://.repl.co ??

Profile icon
CoolCoderSJ

@nbbcsf
Name the repl your exact username. For example, that repl is named "CoolCoderSJ"

Profile icon
johnnyfrancis

@CoolCoderSJ
k i understand

Profile icon
nbbcsf

@CoolCoderSJ
cool thanks!

Profile icon
idontknoiw

@nbbcsf
If you create a repl named "nbbcsf", the URI will be something like "nbbcsf.repl.co" (assuming you using something that needs a site).

Profile icon
RohilPatel

If u go to freenom.com u can get like even more of a custom domain!

@nbbcsf

Profile icon
[deleted]

@RohilPatel
freenom is a scam. sure they give you free domains, at the cost of your personal info exposed on the dark web, and the peace of mind that if your website is underated or overrated they will deregister it, and the fact that they have redirected people's registered domains to adult sites. get a free domain from the github student developer pack or buy one.

Profile icon
RohilPatel

Well, that's what people may say. Now show me evidence that any of what you are claiming is true

@novaflippers

Profile icon
Whippingdot

Luv tis, tho we should be able to customize the CSS and the icon, but in an easy way...

Profile icon
catchacoled

You probably could change the image on it if you changed the name of the source for that image and it could possible change the image on is and the

@Whippingdot

Profile icon
CoolCoderSJ

@Whippingdot
the image is customizable, just change the image source

as for the css, you can override it by using the badge CSS class

Profile icon
Whippingdot

k

@CoolCoderSJ

Profile icon
RohilPatel

If you want I could make something that does that

@Whippingdot

Profile icon
CoolCoderSJ

@RohilPatel
if you know decent web dev customization is pretty easy as is.

Profile icon
Whippingdot

make it pease

@RohilPatel

Profile icon
RohilPatel

Best and cleanest if you just make an api smh

@CoolCoderSJ

Profile icon
CoolCoderSJ

@RohilPatel
again- The code is literally 3 lines. If you know almost any html and/or css, you can customize it. The code is made for people who know html and/or css, I don't see any other way you could implement it without knowing any html at all.

Profile icon
RohilPatel

Using a link bruh

@CoolCoderSJ

Profile icon
Whippingdot

fine i will customize it myself 😒😭 im lazy

@CoolCoderSJ

Profile icon
ch1ck3n
.badge:hover{ background-color: rgb(26, 43, 63) !important; } .badge{ transition: 0.2s !important; } .badge img:hover, .badge:hover > img, .badge2 img:hover, .badge2:hover > img, .badge3 img:hover, .badge3:hover > img, .badge4 img:hover, .badge4:hover > img{ animation-name: spin !important; animation-duration: 2s !important; animation-timing-function: cubic-bezier(0.80, 0, 0.20, 1) !important; animation-iteration-count: infinite !important; } @keyframes spin{ 0% { transform: scale(1) rotate(0); } 25% { transform: scale(1) rotate(90); } 50% { transform: scale(1) rotate(180); } 75% { transform: scale(1) rotate(270); } 100% { transform: scale(1) rotate(360deg);} }

add this to your css

Profile icon
CoolCoderSJ

@ch1ck3n
not sure what most of it is just by skimming, but it made things a lot better by adding transition: 0.2s !important;, thanks.

Profile icon
johnnyfrancis

WAIT WHAT?!?!?!? Instead it brought me here:https://replit.com/@user?tab=comments

Profile icon
CoolCoderSJ

@johnnyfrancis
Sorry if it wasn't clear enough, but you have to change the link in the code in line 2 of the codeblock above. I have edited the post to make it clearer now.

Profile icon
noway15

POG

I want to get into webpage design someday, but I have no clue where to start. This is better than anything I could make

Profile icon
CoolCoderSJ

@noway15
https://w3schools.com/ is always a great place to start :)

Profile icon
noway15

thx

@CoolCoderSJ
looks like I'll learn HTML and then once I have that down I gotta take up Java bcuz I want to make my own mobile app one day

Profile icon
PyraxisYT

@noway15
codecademy is another great option for you

Profile icon
noway15

too late

@PixelblockYT

Profile icon
noway15

@CoolCoderSJ
how do I upload an image to HTML?

Profile icon
CoolCoderSJ

@noway15
do you mean a repl? If you mean a repl, click the three dots on the top right corner of the files bar, click upload file

To use an image in html, do

<img src="IMAGE URL HERE" alt="ALT TEXT HERE" />
Profile icon
noway15

@CoolCoderSJ
yeah but like how do I find the image URL

Profile icon
CoolCoderSJ

@noway15
right click on image > Copy Image Link

the text may vary between browsers

Profile icon
DSAJagat20

@noway15
HTML is the best language for webpages

Profile icon
noway15

ik

@DSAJagat20
but my ultimate goal is to create mobile apps

Profile icon
DSAJagat20

@noway15
oh. mobile apps? I suggest python or JavaScript for that

Profile icon
noway15

why

@DSAJagat20

Profile icon
CoolCoderSJ

@noway15
Mobile apps are not made with HTML. To make a mobile app, you need one of the following languages -

  • Swift - iOS and macOS apps
  • Python - Desktop apps
  • Kotlin or Java - Android Apps

You can most certainly turn a website into a desktop app, but your goal is mobile.

Profile icon
IMightBeMe

You could also use unity and build for iOS/android. It uses C# which is really similar to Java

@DSAJagat20

Profile icon
mollthecoder

@IMightBeMe
Not really

Profile icon
noway15

ik

@CoolCoderSJ
which is why I want to make webpages first, then apps

Profile icon
IMightBeMe

What do you mean? C# is similar to Java. The syntax is basically the same and C# was built off of Java.

@mollthecoder

Profile icon
noway15

@IMightBeMe
I have no clue what this argument is about but please don't use this comment thread to argue. Just make a post saying that

"C# and Java are almost the same."

settle your differences there.

Profile icon
IMightBeMe

kk

@noway15

Profile icon
CoolCoderSJ

@noway15
@IMightBeMe
I prefer you guys open a new repl and use multiplayer chat or threads as I get notifications for each message sent on this post.

Profile icon
IMightBeMe

Yea sorry about that.

@CoolCoderSJ

Profile icon
PyraxisYT

@noway15
ok

Profile icon
tussiez

@noway15
@CoolCoderSJ
Uhh, a lot of apps on the App Store are now just web apps (e.g Amazon).

Profile icon
Glitterpoop

@noway15
two main ways:
if the image is online, and you're using chrome, right-
click>copy image address (provided that the website you're
copying from, did not use a local link from their local
computer)

now, if the image is offline:
1) if the image is 'example.jpeg' and it is located
locally on your pc, then in your code, you can just call
it 'example.jpeg'
2) if the image is 'example.jpeg' , and its located
locally on your disk, then open its file location, in file
explorer(windows). Right-click it > open with > google
chrome (or any other browser). Now, once browser pops up
with the image, copy the url from the url bar. it will be
something like c:/user/folder/subfolder/example.jpeg

Profile icon
LiamBerube

@noway15
There is also mimo on mobile

Profile icon
noway15

ok then

@Glitterpoop

Profile icon
hg0428

When I hover it gets a little bigger, then if I hover one more second it gets even bigger. Could you make the size change smother and remove the second size change?

Profile icon
lthon09

that is kewl

Profile icon
LingWu1
Profile icon
FlaminHotValdez

SO COOL! I added it to my site