🔥 Popular Posts Widget Design Guide

🎨 Widget Design Styles

💻 HTML & CSS Implementation

Style 1: Thumbnail List

<!-- HTML -->
<aside class="popular-posts-widget">
  <h3 class="widget-title">🔥 Trending Now</h3>
  <div class="popular-posts-list" id="popularPosts">
    <!-- Dynamically populated від JavaScript -->
  </div>
</aside>

<!-- CSS -->
<style>
.popular-posts-widget {
  background: white;
  border-radius: 12px;
  padding: 25px;
  border: 2px solid #e9ecef;
}

.widget-title {
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 20px;
  color: #2c3e50;
}

.post-item {
  display: flex;
  gap: 15px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e9ecef;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}

.post-item:hover {
  transform: translateX(5px);
}

.post-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.post-thumbnail {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  background: #84fab0;
  border-radius: 8px;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-content {
  flex: 1;
}

.post-title {
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.4;
  color: #2c3e50;
  margin-bottom: 6px;
}

.post-meta {
  font-size: 0.8em;
  color: #6c757d;
}

.view-count {
  color: #84fab0;
  font-weight: 600;
}
</style>

JavaScript: Fetch Popular Posts

// Fetch popular posts від API або static data
class PopularPostsWidget {
  constructor(containerSelector, count = 5) {
    this.container = document.querySelector(containerSelector);
    this.count = count;
    this.init();
  }
  
  async init() {
    // Option 1: Від API
    const posts = await this.fetchPopularPosts();
    
    // Option 2: Static data (for demo)
    // const posts = this.getStaticPosts();
    
    this.render(posts);
  }
  
  async fetchPopularPosts() {
    const response = await fetch(`/api/popular-posts?limit=${this.count}`);
    return await response.json();
  }
  
  getStaticPosts() {
    // Demo data
    return [
      {
        title: "Complete PF Tek Guide",
        url: "/cultivation/pf-tek",
        thumbnail: "/images/pf-tek.jpg",
        views: 12300,
        date: "2026-01-22"
      },
      // ... more posts
    ];
  }
  
  render(posts) {
    const html = posts.map(post => `
      <a href="${post.url}" class="post-item">
        <div class="post-thumbnail">
          ${post.thumbnail ? `<img src="${post.thumbnail}" alt="${post.title}">` : ''}
        </div>
        <div class="post-content">
          <div class="post-title">${post.title}</div>
          <div class="post-meta">
            <span class="view-count">${this.formatViews(post.views)} views</span>
            <span> • ${this.formatDate(post.date)}</span>
          </div>
        </div>
      </a>
    `).join('');
    
    this.container.innerHTML = html;
  }
  
  formatViews(views) {
    if (views >= 1000) {
      return (views / 1000).toFixed(1) + 'K';
    }
    return views.toString();
  }
  
  formatDate(dateString) {
    const date = new Date(dateString);
    const now = new Date();
    const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
    
    if (diffDays === 0) return 'Today';
    if (diffDays === 1) return 'Yesterday';
    if (diffDays < 7) return `${diffDays} days ago`;
    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
    return `${Math.floor(diffDays / 30)} months ago`;
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  new PopularPostsWidget('#popularPosts', 5);
});

📊 Analytics Integration

Option 1: Google Analytics API

// Backend (Node.js example)
const { BetaAnalyticsDataClient } = require('@google-analytics/data');

async function getPopularPages() {
  const analyticsDataClient = new BetaAnalyticsDataClient();
  
  const [response] = await analyticsDataClient.runReport({
    property: `properties/${PROPERTY_ID}`,
    dateRanges: [{ startDate: '30daysAgo', endDate: 'today' }],
    dimensions: [{ name: 'pagePath' }, { name: 'pageTitle' }],
    metrics: [{ name: 'screenPageViews' }],
    orderBys: [{ metric: { metricName: 'screenPageViews' }, desc: true }],
    limit: 10
  });
  
  return response.rows.map(row => ({
    url: row.dimensionValues[0].value,
    title: row.dimensionValues[1].value,
    views: parseInt(row.metricValues[0].value)
  }));
}

Option 2: Database Query (Simple)

-- SQL query
SELECT 
  title,
  slug,
  thumbnail_url,
  view_count,
  published_at
FROM articles
WHERE published = true
ORDER BY view_count DESC
LIMIT 5;

✅ Popular Posts Widget Checklist