HTML For Formatting Badge Blogs

+11
Many people have been creating badge blogs like these recently. Copy the HTML code down below and edit the hyperlinks & text to make your own badge blog!

<style>

table, th, td {

  border: 1px grey;

}

</style>


<h1 style="text-align:center;">

<b>Badge Name</b>

</h1>


<p style="text-align:center;">

1 user has earned this badge

</p>


<table class="standard-table" align="center">


<tr>

<th>Quiz</th>

<th>Required Score</th>

</tr>


<tr>

<td>

<a href="First Hyperlink">Name of First Quiz</a>

</td>

<td>Score Required</td>

</tr>


<tr>

<td>

<a href="Second Hyperlink">Name of Second Quiz</a>

</td>

<td>Score Required</td>

</tr>


<tr>

<td>

<a href="Third Hyperlink">Name of Third Quiz</a>

</td>

<td>Score Required</td>

</tr>


<tr>

<td>

<a href="Fourth Hyperlink">Name of Fourth Quiz</a>

</td>

<td>Score Required</td>

</tr>


<tr>

<td>

<a href="Fifth Hyperlink">Name of Fifth Quiz</a>

</td>

<td>Score Required</td>

</tr>


</table>

As you can see, you can copy and paste each “set” of code to add more rows to the badge’s table. The outcome should look something like this:

Badge Name

1 user has earned this badge

Quiz Required Score
Name of First Quiz Score Required
Name of Second Quiz Score Required
Name of Third Quiz Score Required
Name of Fourth Quiz Score Required
Name of Fifth Quiz Score Required
Thank you for reading my blog. I hope you found it useful.

-Pandora

Back to Top
+1
Level 55
Oct 3, 2021
Updated - Fixed an error in the code which caused the table to add an unnecessary row at the bottom.
+1
Level 66
Aug 26, 2020
Or, you could open the source code and copy the code from there. That’s what I did, hehehe...
+1
Level 55
Aug 26, 2020
Lol
+4
Level 14
Aug 26, 2020

Vatican City Badge

1 user has earned this badge

QuizRequired Score
Vatican City Country Quiz 17/18
Countries Closest to Vatican City with a Radial Map 27/27
Vatican City Map Quiz 12/14
Vatican Multiple Choice 15/15
+1
Level 61
Feb 12, 2021
Nice looking thing ya got there
+2
Level 15
Aug 26, 2020
Nice blog!
+1
Level 55
Aug 26, 2020
Thanks!
+1
Level 52
Nov 30, 2020
Hmm...the checkbox doesn't seem to work.
+1
Level 55
Nov 30, 2020
why?
+1
Level 52
Nov 30, 2020
Dunno...I type it, but saving my blog deletes it. Is it same with you?
+1
Level 43
Dec 4, 2020
DON'T REMOVE THIS!
+2
Level 65
Mar 3, 2021
He won't I think
+1
Level 61
Feb 12, 2021
Thank you Pandora!
+1
Level 65
Mar 2, 2021
How do you make invisible text?
+1
Level 55
Mar 2, 2021
...and why would you need that?
+1
Level 65
Mar 3, 2021
Just because I want to know :)
+1
Level 55
Mar 30, 2021
change font size to white
+1
Level 51
Apr 5, 2021
color:white;
+5
Level 39
Jul 12, 2021
Yes, white is my favorite font size lol
+1
Level 55
May 9, 2022
color* lol
+1
Level 62
Sep 8, 2021
@SirPhilippines invisible text so you reach threshold for minimum characters without having to write 'something more substantial'??
+1
Level 51
Mar 2, 2021
Aww... why can't the input type date work here?
+1
Level 55
Mar 2, 2021
Wdym
+1
Level 51
Mar 2, 2021
< input type="date"> that's the best way I can explain it...
+1
Level 51
Mar 2, 2021
Here
+1
Level 68
Mar 28, 2021
I promise this is not Rickroll lol! Hopefully that link works... Good blog btw!
+1
Level 61
Apr 26, 2021
What about how to add VIDEOS?
+1
Level 55
Apr 26, 2021
Can't do that anymore
+1
Level 55
Apr 29, 2021
what happened to part 3? I have searched all over but I can't find it
+1
Level 55
May 9, 2022
deleted it
+1
Level 70
Aug 2, 2021
First of all: huge thanks for the work you did with those blog entries! That helped me a lot when creating my unofficial badges :)

Btw I would like to make the classic thin gray border of the table invisible. Is there a way to do so?

+1
Level 55
Oct 3, 2021
Everything is fixed now!
+1
Level 54
Nov 14, 2021
the rickrolling in blurb was cool