🎯 PROPER BLOGGER HEADER SIZES
I've created 3 different sizes - choose the one that fits your blog best!
📸 HOW TO USE:
- Scroll down and choose your preferred size
- Take a screenshot of the EXACT banner area (use Snipping Tool on Windows or Cmd+Shift+4 on Mac)
- Save as PNG or JPG
- Upload to Blogger: Theme → Customize → Header → Upload Image
✅ Option 1: Standard Blogger Size (RECOMMENDED)
Perfect for most Blogger themes. Works on desktop and mobile.
1600 × 400 pixels
✅ Option 2: Wide Banner (For Full-Width Themes)
Best for modern, wide Blogger themes. Maximum visual impact.
1920 × 400 pixels
✅ Option 3: Compact Banner (For Minimal Themes)
Smaller height, perfect for blogs that want more content visible above the fold.
1600 × 200 pixels
📸 Screenshot Instructions
Windows:
- Press
Windows Key + Shift + S
- Click and drag to select the banner area
- Screenshot saves to clipboard - paste into Paint and save
Mac:
- Press
Cmd + Shift + 4
- Click and drag to select the banner area
- Screenshot saves to Desktop automatically
Alternative: Use browser extensions like "Awesome Screenshot" or "Full Page Screen Capture"
🔧 Adding Your Photo
BEFORE taking screenshot:
- Right-click this HTML file → Open with → Notepad (Windows) or TextEdit (Mac)
- Find the line:
<div class="photo-placeholder">👤</div>
- Replace with:
<div class="photo-placeholder"><img src="path-to-your-photo.jpg" alt="Your Name"></div>
- Put your photo in the same folder as this HTML file
- Replace
path-to-your-photo.jpg with your actual photo filename (e.g., my-photo.jpg)
- Save the file and refresh your browser
- Now take the screenshot!
💡 TIP: If you don't have your photo ready, take the screenshot with the placeholder (👤) and you can add your photo later using photo editing software like Canva or Photoshop!
📤 Upload to Blogger
- Login to your Blogger dashboard
- Click on Theme in the left sidebar
- Click Customize button
- In the left panel, click Header
- Click Choose Image or Upload
- Select your screenshot file
- Adjust positioning if needed (usually "Center" works best)
- Click Done
- Click Apply to Blog in the top right
- View your blog to see the new header!
⚠️ IMPORTANT: If the header looks stretched or squished in Blogger, try the "Compact Banner" (Option 3) - it fits better in some themes. Or adjust the "Instead of title and description" setting in Blogger's header customization.
🎨 Which Size Should You Choose?
Choose Option 1 (1600×400px) if:
- You're using a standard Blogger template
- You want a balanced header size
- You're not sure which to pick (this is the safest choice!)
Choose Option 2 (1920×400px) if:
- Your blog has a full-width theme
- You want maximum visual impact
- You're comfortable with larger file sizes
Choose Option 3 (1600×200px) if:
- You want a minimal, compact header
- You want more content visible without scrolling
- Your current theme has a small header area
✨ Pro Tips
- Photo Quality: Use a high-resolution, professional-looking photo (smile!)
- File Size: Keep your final image under 1MB for fast loading
- Format: PNG for best quality, JPG for smaller file size
- Mobile Test: Always check how your header looks on mobile after uploading
- Consistency: Match your blog's color scheme to the header colors
Posts
Subscribe To