Sugar kissed Letters

♡ ONLINE GAME PAGE ♡

Want to add a little online game to your blog (like my playroom)? ♡ This creates a cute full-page game window that you can customize with any game that allows embedding.

♡ QUICK TUTORIAL ♡

01. find an online game ♡
Find an online game you'd like to add to your page. The game needs to allow itself to be embedded on other websites.

02. find the game's embed link ♡
Some game websites provide an Embed option or an iframe code. If they provide an iframe, look for the src link inside it.

It will look something like:

  https://example.com/your-game

03. replace the game link ♡
In the code below, find:

  src="PASTE YOUR GAME LINK HERE"

Replace the placeholder with the URL of your chosen game.

04. add it to a page ♡
Create a new Blogger Page, switch to HTML view, and paste the entire code there.

05. that's it! ♡
Save and publish your page! Your game should appear inside the cute little game window. 🎀

♡ CODE ♡

<style>

#online-game-page {
width:100%;
max-width:950px;
margin:0 auto;
text-align:center;
font-family:"Cardo", serif;
color:#c47799;
}

#game-page-title {
font-family:"Cardo", serif;
font-size:25px;
font-weight:bold;
color:#d875a2;
margin:5px 0 3px;
letter-spacing:.5px;
}

#game-page-subtitle {
font-size:12px;
color:#c991aa;
margin-bottom:18px;
}

.game-page-line {
width:70%;
max-width:600px;
margin:0 auto 20px;
border-top:1px solid #f2c5d8;
}

#game-window {
width:100%;
max-width:900px;
height:720px;
margin:0 auto;
background:#fff8fc;
border:2px solid #f2bfd5;
border-radius:18px;
padding:10px;
box-sizing:border-box;
box-shadow:
0 0 10px #f8dce9,
inset 0 0 12px #fff0f6;
}

#game-window iframe {
width:100%;
height:100%;
border:none;
border-radius:11px;
display:block;
}

#game-page-footer {
margin-top:15px;
font-size:11px;
color:#cf91aa;
}

.game-page-sparkle {
color:#e58db3;
margin:0 6px;
}

@media screen and (max-width:600px) {

#game-page-title {
font-size:21px;
}

#game-window {
height:600px;
padding:6px;
}

}

</style>

<div id="online-game-page">

  <div id="game-page-title">
    ♡ my little playroom ♡
  </div>

  <div id="game-page-subtitle">

<span class="game-page-sparkle">✦</span>

play & have fun!

<span class="game-page-sparkle">✦</span>

  </div>

  <div class="game-page-line"></div>

  <div id="game-window">

<iframe
  src="PASTE YOUR GAME LINK HERE"
  title="Online Game"
  loading="lazy">
</iframe>

  </div>

  <div id="game-page-footer">
    ♡ a little place to play ♡
  </div>

</div>

♡ click the code box to select the code ♡

✧ make sure the game website allows iframe embedding ✧