Water Sort Puzzle - Blogger Embed Instructions

📋 Quick Summary: This guide shows you how to embed the Water Sort Puzzle game into your Blogger website using an iframe.

🚀 Method 1: Direct Iframe Embedding

Step 1: Copy the Embed Code

Copy and paste this HTML code into your Blogger post or page:

<div style="width: 100%; max-width: 800px; margin: 0 auto; text-align: center;">
    <iframe 
        src="https://tmoyhqei.manus.space" 
        width="100%" 
        height="600" 
        frameborder="0" 
        scrolling="no"
        style="border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);"
        allowfullscreen>
    </iframe>
    <p style="margin-top: 10px; font-size: 12px; color: #666;">
        🎮 <strong>Water Sort Puzzle</strong> - Sort the colors, solve the puzzle!
    </p>
</div>
        

Step 2: Customize the Iframe

You can adjust these parameters:

width: Set to "100%" for responsive design or specific pixel value
height: Recommended 600px minimum for full game visibility
style: Add custom CSS styling as needed

📱 Method 2: Mobile-Optimized Embedding

Responsive Iframe Code

For better mobile experience, use this responsive code:

<style>
.water-sort-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 75%; /* 4:3 Aspect Ratio */
    height: 0;
}
.water-sort-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
</style>

<div class="water-sort-container">
    <iframe 
        class="water-sort-iframe"
        src="https://tmoyhqei.manus.space" 
        frameborder="0" 
        scrolling="no"
        allowfullscreen>
    </iframe>
</div>
        

⚙️ Blogger Setup Instructions

Step 1: Access Blogger HTML Editor

Log into your Blogger dashboard
Create a new post or edit an existing one
Switch to HTML view (not Compose view)

Step 2: Paste the Code

Paste the iframe code where you want the game to appear
The URL is already included in the code above
Preview your post to test the embedding

Step 3: Publish

Save your post as draft first to test
Check that the game loads properly
Publish when everything works correctly

🔧 Troubleshooting

Common Issues & Solutions

Game doesn't load: Check that the URL is correct and accessible
Iframe too small: Increase the height value (try 700px or 800px)
Not responsive on mobile: Use the responsive iframe method above
Audio doesn't work: Some browsers require user interaction before playing audio

✨ Features Available in Embedded Version

💡 Pro Tip: Test the embedded game on different devices and screen sizes to ensure the best user experience for your blog visitors!

🎮 Water Sort Puzzle - Blogger Embedding Guide