Sunday, August 23, 2026

Blogger's license

I’m so proud of this one! Because I made it myself, based off a status bar that I found being used all around. You can copy my code below:

<div class="blogger-license-card">

  <div class="blogger-license-header">
    <span>BLOGGER'S LICENSE</span>
    <span class="blogger-license-id">ID No. 19082026</span>
  </div>

  <div class="blogger-license-body">

    <!-- NAME + ID PHOTO -->
    <div class="blogger-license-photo-area">

      <div class="blogger-license-name">
        <span class="blogger-license-name-value">YOUR NAME HERE</span>
      </div>

      <div class="blogger-license-photo">
        <img src="YOUR-PHOTO-URL-HERE" alt="ID photo" />
      </div>

    </div>


    <!-- BLOGGER INFORMATION -->
    <div class="blogger-license-info">

      <div class="blogger-license-item">
        <span class="blogger-license-label">STATUS</span>
        <span class="blogger-license-value">Your status here</span>
      </div>

      <div class="blogger-license-item">
        <span class="blogger-license-label">PERSONALITY</span>
        <span class="blogger-license-value">Your personality here</span>
      </div>

      <div class="blogger-license-item">
        <span class="blogger-license-label">NATIONALITY</span>
        <span class="blogger-license-value">Your nationality here</span>
      </div>

    </div>

  </div>


  <div class="blogger-license-footer">
    ✦ IF FOUND OFFLINE, RETURN TO BLOGGER ✦
  </div>

</div>


<style>

/* WHOLE ID CARD */

.blogger-license-card {
  width: 240px;
  padding: 10px;
  background: #f3eadb;
  border: 2px solid #b9a080;
  border-radius: 7px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  margin: 0;
  box-shadow: 3px 3px 3px #d8c8b1;
  color: #574839;
  box-sizing: border-box;
}


/* TOP OF CARD */

.blogger-license-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  color: #8b6f4f;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 2px solid #ddcdb6;
}

.blogger-license-id {
  font-size: 8px;
  color: #9e8261;
}


/* PHOTO + INFORMATION LAYOUT */

.blogger-license-body {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}


/* PHOTO + NAME AREA */

.blogger-license-photo-area {
  width: 72px;
  flex-shrink: 0;
  text-align: center;
}

.blogger-license-name {
  margin-bottom: 5px;
  text-align: center;
}

.blogger-license-name-value {
  display: block;
  font-size: 8px;
  font-weight: bold;
  color: #574839;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: break-word;
}


/* ID PHOTO */

.blogger-license-photo {
  width: 72px;
  height: 86px;
  padding: 3px;
  background: #faf6ef;
  border: 1px solid #b9a080;
  box-shadow: inset 0 0 0 2px #ddcdb6;
  box-sizing: border-box;
}

.blogger-license-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* STATUS INFORMATION */

.blogger-license-info {
  flex: 1;
  min-width: 0;
}

.blogger-license-item {
  padding: 3px 0 5px 0;
  margin-bottom: 3px;
  border-bottom: 1px dotted #cdb99d;
}

.blogger-license-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.blogger-license-label {
  display: block;
  font-size: 8px;
  font-weight: bold;
  color: #8b6f4f;
  letter-spacing: 0.7px;
}

.blogger-license-value {
  display: block;
  margin-top: 1px;
  color: #574839;
  white-space: normal;
  line-height: 1.25;
}


/* BOTTOM OF CARD */

.blogger-license-footer {
  margin-top: 8px;
  padding-top: 5px;
  border-top: 1px solid #ddcdb6;
  text-align: center;
  font-size: 7px;
  letter-spacing: 0.6px;
  color: #8b6f4f;
}

</style>

Now, let me show you the specific parts of the code that you should look for in order to customize the license.

The basic ones are name, photo, and info. Edit only what I’ll put in green, and keep in mind that the photo’s dimensions should be 72px (width) x 86px (height), otherwise it will look all wonky.

Name: <span class="blogger-license-name-value">YOUR NAME HERE</span>

Photo: <img src="YOUR-PHOTO-URL-HERE" alt="ID photo" />

Info: look for <!-- BLOGGER INFORMATION --> and edit the fields below it. They'll all follow the same rule:

<span class="blogger-license-label">STATUS/OTHER INFO</span>

<span class="blogger-license-value">Your status/other info here</span>

They don’t have to be status / personality / nationality. You can make it anything you want! Let me show my little gallery of examples, and I’ll include some color variety as well, so you can simply click on the “copy” button and you’ll have the code for that style of card.

BLOGGER'S LICENSE ID No. 05041998
ELLE A.
ID photo
šŸæ COMFORT MOVIE The Barbie Diaries
šŸŽø COMFORT RECORD Hannah Montana
šŸ¤“ COMFORT BOOK Pretty Little Liars
šŸ’— GIRLS JUST WANNA HAVE FUN šŸ’—



BLOGGER'S LICENSE ID No. 08061994
STACY B.
ID photo
⭐ ZODIAC SIGN Gemini sun/moon
☕ COFFEE ORDER Skinny vanilla latte
šŸ¦„ DREAM JOB Fashion designer
šŸ’œ IF YOU SAW ME SHOPLIFT, NO YOU DIDN'T šŸ’œ



BLOGGER'S LICENSE ID No. 08061994
LINA M.
ID photo
šŸ’ CRIME Starting a riot
šŸ’ MOTIVE Creative differences
šŸ’ PUNISHMENT Catch me if you can
❤️ ASK ME ABOUT MY GUILLOTINE ❤️



BLOGGER'S LICENSE ID No. 04091994
AVERY K.
ID photo
šŸŽ“ CLASS Valedictorian
⚖️ ALIGNMENT Lawful evil
šŸ† SPECIAL ABILITY Winning arguments
šŸ’™ HISTORY IN THE MAKING šŸ’™



BLOGGER'S LICENSE ID No. 14021997
JENNY V.
ID photo
šŸŒø CELEBRITY CRUSH Joe Jonas
šŸŒø FICTIONAL CRUSH Light Yagami
šŸŒø HEAR ME OUT Louis XIV, anyone?
šŸ©· VOTED MOST LIKELY TO MARRY RICH šŸ©·



BLOGGER'S LICENSE ID No. 23121998
KATY C.
ID photo
šŸ’£ FATAL FLAW Know-it-all
šŸ’Ž REDEEMING QUALITY Secret keeper
šŸ… HIDDEN TALENT Social engineering
šŸ§” MANIC PIXIE DREAM BITCH šŸ§”



BLOGGER'S LICENSE ID No. 11091998
ANGIE D.
ID photo
šŸ¤  WANTED FOR French exiting
šŸ„ø LAST SEEN Frolicking in a field
šŸ˜µ‍šŸ’« APPROACH WITH Wellbutrin XL 150 mg
šŸ’› SHINY HAPPY PEOPLE HOLDING HANDS šŸ’›



BLOGGER'S LICENSE ID No. 13101998
VICKY L.
ID photo
šŸ¦– SPECIES Common mall goth (Gothicus dramaticus)
šŸŒ³ HABITAT Antique/curio shop
šŸ„‘ DIET Family secrets
šŸ’š ALL DRESSED UP WITH NOWHERE TO HAUNT šŸ’š

Tip: you can put in any photo, of course, as long as it fits the dimensions. But if you want to make one of these cute pixel dolls, this is the website I use.

Finally, in your Blogger dashboard, just go to Layout, then +Add a gadget, and then select HTML/Javascript. That’s where you should paste the finished code, and ta-da! It should be visible in your main page.

Now if you don’t mind, leave a comment below with a link to your blog so I can check out how you customized your license! Thanks for reading this far šŸ™ƒ

PUT IN A GOOD WORD FOR ME? I'M TRYING TO IMPRESS MARK RUFFALO ↗ COPY LINK ✿ REBLOG ♥ PIN IT ★ TUMBLR

1 comment:

Subscribe to: Post Comments (Atom)

The quick brown fox jumps over the lazy dog!?

Hi! My name is Anissa (not really) and I just turned 30 (well, almost). I feel just like the character from 13 Going On 30 (in that my body...

Pink iPod music player
Now Playing
Album cover
Loading...
0:00
0:00