Blogger Pro - Ultimate Code Runner

Blogger Pro Code Runner

The ultimate HTML/CSS/JavaScript playground designed specifically for bloggers and content creators

Write, Test, and Publish your code snippets in one place

Code Editor

HTML

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Blog Post</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header class="blog-header">
        <h1>The Future of Web Development</h1>
        <div class="post-meta">
            <span><i class="fas fa-user"></i> Jane Doe</span>
            <span><i class="fas fa-calendar"></i> October 15, 2023</span>
            <span><i class="fas fa-clock"></i> 5 min read</span>
        </div>
    </header>
    
    <div class="content">
        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?auto=format&fit=crop&w=1200" 
             alt="Web development" class="featured-image">
        
        <p>In the rapidly evolving world of web development, staying current with the latest trends and technologies is more important than ever. From progressive web apps to serverless architectures, the landscape is constantly changing.</p>
        
        <div class="highlight">
            <h3>Key Insight:</h3>
            <p>The most successful developers are those who embrace continuous learning and adapt to new paradigms.</p>
        </div>
        
        <h2>Emerging Technologies</h2>
        <ul>
            <li>WebAssembly for near-native performance in browsers</li>
            <li>Jamstack architecture for faster, more secure sites</li>
            <li>CSS Container Queries for component-based responsiveness</li>
            <li>Web Components for reusable UI elements</li>
        </ul>
        
        <div class="cta">
            <h3>Ready to level up your skills?</h3>
            <button class="subscribe-btn">Subscribe to Newsletter</button>
        </div>
    </div>
    
    <footer class="blog-footer">
        <p>© 2023 My Tech Blog. All rights reserved.</p>
    </footer>
</body>
</html>

/* Add custom styles for your blog post */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

.blog-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #4361ee;
}

.blog-header h1 {
    font-size: 2.8rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.post-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    color: #6c757d;
    font-size: 0.95rem;
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.featured-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin: 25px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

h2 {
    color: #7209b7;
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

.highlight {
    background: linear-gradient(135deg, #f5f7ff, #e6eeff);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4361ee;
    margin: 25px 0;
}

ul {
    padding-left: 30px;
    margin-bottom: 30px;
}

li {
    margin-bottom: 12px;
    position: relative;
}

li::before {
    content: "▹";
    color: #4361ee;
    position: absolute;
    left: -20px;
}

.cta {
    text-align: center;
    background: rgba(67, 97, 238, 0.05);
    padding: 30px;
    border-radius: 10px;
    margin: 40px 0;
}

.subscribe-btn {
    background: linear-gradient(to right, #4361ee, #7209b7);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.subscribe-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
}

.blog-footer {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #6c757d;
    font-size: 0.9rem;
}

// Add interactive features to your blog
document.addEventListener('DOMContentLoaded', function() {
    // Reading time indicator
    const article = document.querySelector('.content');
    const text = article.innerText || article.textContent;
    const wordCount = text.trim().split(/\s+/).length;
    const readingTime = Math.ceil(wordCount / 200);
    
    const timeBadge = document.createElement('div');
    timeBadge.className = 'reading-time';
    timeBadge.innerHTML = `⏱️ ${readingTime} min read`;
    timeBadge.style.position = 'fixed';
    timeBadge.style.bottom = '20px';
    timeBadge.style.right = '20px';
    timeBadge.style.background = '#4361ee';
    timeBadge.style.color = 'white';
    timeBadge.style.padding = '8px 15px';
    timeBadge.style.borderRadius = '20px';
    timeBadge.style.fontSize = '0.9rem';
    timeBadge.style.zIndex = '1000';
    timeBadge.style.boxShadow = '0 4px 10px rgba(0,0,0,0.2)';
    
    document.body.appendChild(timeBadge);
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Subscribe button animation
    const subscribeBtn = document.querySelector('.subscribe-btn');
    if (subscribeBtn) {
        subscribeBtn.addEventListener('click', function() {
            this.innerHTML = 'Subscribed! <i class="fas fa-check"></i>';
            this.style.background = 'linear-gradient(to right, #06d6a0, #05c495)';
            setTimeout(() => {
                this.innerHTML = 'Subscribe to Newsletter';
                this.style.background = 'linear-gradient(to right, #4361ee, #7209b7)';
            }, 2000);
        });
    }
    
    // Image zoom effect
    const images = document.querySelectorAll('.featured-image');
    images.forEach(img => {
        img.addEventListener('click', function() {
            this.classList.toggle('zoomed');
        });
    });
});

Live Preview

Real-time Rendering

See your HTML, CSS, and JavaScript changes instantly with live preview

Tabbed Interface

Easily switch between HTML, CSS, and JavaScript in one editor panel

Easy Sharing

Generate shareable links to collaborate or showcase your creations

Responsive Testing

Test your designs across different screen sizes with device emulator

Syntax Highlighting

Clean, readable code with intelligent syntax highlighting

Export Options

Download your project as HTML file or export to popular platforms

Website Tools Lab

Online HTML Code Runner | Test & Run HTML Code Instantly - Website Tools Lab