Build a Samehada-Style Popular Posts Widget in Blogger (2 Easy Methods) - KodeRian

If you’ve ever browsed anime fansub sites like Samehada, you’ve probably noticed their eye-catching Popular Posts list: a large hero item on top with a bold thumbnail and title overlay, followed by compact rows of ranked posts complete with tiny thumbnails and dates. It’s clean, scannable, and perfect for surfacing binge-worthy content.

This guide shows you how to recreate that look in Blogger—without heavy frameworks—using only HTML/CSS and a sprinkle of JavaScript. We’ll walk through two practical versions so you can choose the setup that fits your theme and appetite for customization:

• Version 1 — Style the built-in PopularPosts widget: Fastest path. Add a widget, paste CSS, and run a tiny JS helper to fix thumbnail sizes and render dates. Minimal template edits.
• Version 2 — Custom template block: Gives you more control over markup, consistent thumbnails, and cleaner date rendering via Blogger tags. Slightly more editing, but far more flexible.

Along the way, you’ll get accessibility tips, performance tweaks, troubleshooting, and an FAQ. The code is copy-paste friendly and works on modern responsive Blogger themes.

---

What “Samehada-Style” Means (and Why It Works)

Design-wise, the layout does three things very well:

1. Emphasizes the #1 post: A wide image up top with a gradient overlay and title makes the winner hard to miss.
2. Ranks the rest compactly: Items 2–5 (or more) appear as concise rows with small thumbnails, numbers, and dates—great for quick scanning.
3. Signals freshness: The visible date stamp helps readers decide if a post is still relevant.

We’ll replicate that visual rhythm: a hero card (post #1), then a ranked list (#2–#n) with small images and dates. Everything’s responsive, so it looks good on phones and desktops.

---

Version 1 — Style the Default PopularPosts Widget

Use this if you want the simplest integration. You’ll add the PopularPosts widget from Blogger’s Layout panel, then paste a custom CSS block and a small JavaScript helper.

Step 1: Add the PopularPosts widget

1. Open Blogger → Layout.
2. Click Add a Gadget in your sidebar (or preferred area).
3. Select Popular Posts. Keep Thumbnails: ON, Snippets: OFF, and a range like Last 7 days or Last 30 days.

Step 2: Paste the CSS (above </b:skin> or inside your theme’s CSS)

This block styles the first item as a hero and the rest as ranked rows. Adjust colors as needed.

Show CSS

/* ======= Popular Posts — Samehada Style (Version 1) ======= */
#PopularPosts1 .widget-content.popular-posts{margin:auto}
#PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden}
#PopularPosts1 ul li{margin:auto;padding:10px 0;position:relative}
#PopularPosts1 ul li .item-title a{
  color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3
}
/* Hero (rank #1) */
#PopularPosts1 ul li:first-child{padding:0;overflow:hidden;min-height:135px}
#PopularPosts1 ul li:first-child .item-thumbnail-only{
  position:absolute;inset:0;min-height:152px;width:100%
}
#PopularPosts1 ul li:first-child .item-thumbnail img{
  width:100%;height:140px;object-fit:cover;padding:0;display:block
}
#PopularPosts1 ul li:first-child .item-thumbnail-only .item-title{
  position:absolute;bottom:17px;left:0;right:0;padding:10px 10px 10px 45px;
  background:linear-gradient(to bottom,rgba(0,0,0,.05) 6%,rgba(0,0,0,.85) 70%);
  z-index:1
}
/* Ranked rows (#2+) */
#PopularPosts1 ul li:nth-child(n+2){
  background:#262626;color:#fff;border-radius:6px;padding:10px;margin:8px 0
}
#PopularPosts1 ul li:nth-child(n+2) .item-thumbnail{
  float:left;max-width:50px;max-height:50px;margin-right:10px;border-radius:4px;
  overflow:hidden;padding:1px;border:1px solid rgba(255,255,255,.15)
}
#PopularPosts1 ul li:nth-child(n+2) .item-meta{
  font-size:11px;padding:6px 0 0;opacity:.8
}
/* Numeric badges */
#PopularPosts1 ul li:before{
  float:left;padding:5px 8px;border:1px solid rgba(255,255,255,.25);
  margin:12px 7px 0 0;border-radius:5px;font-size:12px;color:#fff
}
#PopularPosts1 ul li:nth-child(1):before{
  content:'1';position:absolute;bottom:0;left:10px;z-index:2;border:none;
  background:#F44336;color:#FFF;padding:10px;border-radius:0;min-height:50px
}
#PopularPosts1 ul li:nth-child(2):before{content:'2'}
#PopularPosts1 ul li:nth-child(3):before{content:'3'}
#PopularPosts1 ul li:nth-child(4):before{content:'4'}
#PopularPosts1 ul li:nth-child(5):before{content:'5'}
/* Small polish */
#PopularPosts1 .item-thumbnail{position:relative;float:none;margin:auto}
#PopularPosts1 ul li:nth-child(n+2) img{padding:0;display:block}

Step 3: Add JavaScript to clean thumbnail sizes and inject dates

Many PopularPosts thumbs default to tiny versions. This JS replaces the size token in the image URL (e.g., w80-h80-p-k-no-nu) with a crisper crop (e.g., w347-h140-c) for the hero image. It also fetches each post page to grab the published date and displays it under the title for ranks #2+.

Show JavaScript

<script>//<![CDATA[
$(function () {
  // 1) Improve the hero image quality
  $('#PopularPosts1 ul li:first-child .item-thumbnail img').each(function () {
    var src = $(this).attr('src') || '';
    $(this).attr('src', src.replace(/w\d+-h\d+[^/]+/, 'w347-h140-c'));
  });

  // 2) Append date for items #2+
  $("#PopularPosts1 ul li:nth-child(n+2)").each(function () {
    var $li = $(this);
    var $link = $li.find(".item-title a");
    var href = $link.attr("href");
    if (!href) return;

    $.ajax({ url: href, type: "get" })
      .done(function (html) {
        var dateTxt = $(html).find(".published").first().text().trim();
        if (dateTxt) {
          $link.parent().after(
            '<div class="item-meta"><span class="item-date">'+ dateTxt +'</span></div>'
          );
        }
      });
  });
});
//]]></script>

Why Version 1? It’s quick, minimal, and plays nicely with existing themes. The trade-off is that the date injection requires an extra HTTP request per item, which adds a little overhead. If you want cleaner markup and native dates without extra fetches, try Version 2.

---

Version 2 — Custom Markup (More Control, Cleaner Dates)

This variant uses a <b:widget type='PopularPosts'> block with a custom <b:includable id='main'> so you control the rendered HTML. You’ll get:

• Consistent, responsive thumbnails using resizeImage() and sourceSet() helpers.
• Native published dates via <time class='published'> (no extra fetches).
• Semantic structure ready for accessibility and SEO.

Step 1: Add the CSS (above </b:skin>)

Show CSS

/* ======= Popular Posts — Samehada Style (Version 2) ======= */
.PopularPosts { counter-reset: num; }
.PopularPosts .post-main{position:relative;margin:10px 0;border-radius:8px;overflow:hidden}
.PopularPosts .post-main:first-child{min-height:135px}
.PopularPosts .post-main:first-child .post-content{
  position:absolute;inset:0;min-height:152px;width:100%
}
.PopularPosts .post-main:first-child .post-img img{
  width:100%;height:140px;object-fit:cover;display:block
}
.PopularPosts .post-main:first-child .post-title{
  position:absolute;bottom:17px;left:0;right:0;padding:10px 10px 10px 45px;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 6%,rgba(0,0,0,.85) 70%)
}
.PopularPosts .post-main:first-child:before{
  content:"1";position:absolute;bottom:0;left:10px;z-index:2;background:#262626;
  color:#fff;padding:10px;min-height:50px;border-radius:0
}
/* Ranked rows */
.PopularPosts .post-main:nth-child(n+2){
  background:#262626;color:#fff;padding:10px;display:block
}
.PopularPosts .post-main:nth-child(n+2):before{
  float:left;padding:5px 8px;border:1px solid rgba(255,255,255,.25);
  margin:12px 7px 0 0;border-radius:5px;font-size:12px;color:#fff;
  content:counter(num); counter-increment: num
}
.PopularPosts .post-main:nth-child(n+2) .post-img{
  float:left;max-width:50px;max-height:50px;margin-right:10px;border-radius:3px;
  overflow:hidden;padding:1px;border:1px solid rgba(255,255,255,.2)
}
.PopularPosts .post-content .post-title h3{
  font-size:13px;font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.3;margin:0
}
.PopularPosts .post-content .post-title h3 a{
  color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis
}
.PopularPosts .post-date,.PopularPosts .post-desc{
  font-size:11px;padding:6px 0 0;opacity:.8
}

Step 2: Insert the custom PopularPosts widget block

Place this near the end of your sidebar section (above </b:section>) or wherever you want it to render.

Show Widget Markup

<b:widget id='PopularPosts1' locked='false' title='Popular Anime' type='PopularPosts' version='3' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
    <b:widget-setting name='showThumbnails'>true</b:widget-setting>
    <b:widget-setting name='showSnippets'>false</b:widget-setting>
    <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
  </b:widget-settings>

  <b:includable id='main' var='this'>
    <div class='widget-title'>
      <h3><span><data:title/></span></h3>
    </div>

    <div class='widget-content PopularPosts'>
      <b:loop values='data:posts' var='post'>
        <article class='post-main' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
          <div class='post-content'>
            <div class='post-img'>
              <b:if cond='data:postDisplay.showFeaturedImage'>
                <a expr:href='data:post.link ? data:post.link : data:post.url'
                   expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
                  <img expr:alt='data:post.title ? data:post.title : data:messages.image'
                       expr:src='data:post.featuredImage ? resizeImage(data:post.featuredImage, 1400, "1400:700") : "https://placehold.it/240x240/222/eee?text=" + data:blog.title + ""'
                       expr:srcset='sourceSet(data:post.featuredImage, [240,360], "240:240")'
                       expr:title='data:post.title ? data:post.title : data:messages.image'/>
                </a>
              </b:if>
            </div>

            <div class='post-title'>
              <h3>
                <a expr:href='data:post.link ? data:post.link : data:post.url'
                   expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
                  <b:eval expr='data:post.title ? data:post.title : data:messages.noTitle'/>
                </a>
              </h3>
            </div>

            <div class='post-info'>
              <span class='post-date'>
                <i class='fa fa-clock-o'/>
                <a expr:href='data:post.link ? data:post.link : data:post.url'
                   expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
                  <time class='published'
                        expr:datetime='data:post.date.iso8601'
                        expr:title='data:post.date.iso8601'>
                    <data:post.date/>
                  </time>
                </a>
              </span>
            </div>

            <div class='post-desc'>
              <b:if cond='data:postDisplay.showSnippet'>
                <b:eval expr='data:post.snippets.long snippet { length: 150, links: false, linebreaks: false, ellipsis: false }'/>
              </b:if>
            </div>
          </div>
        </article>
      </b:loop>
    </div>
  </b:includable>

  <b:includable id='snippetedPostByline'/>
  <b:includable id='snippetedPosts'/>
</b:widget>

Step 3 (Optional): Bump image quality in one pass

If your theme still forces small thumbs, you can run a one-liner to upgrade s72-c tokens to a larger size like s640:

Show JavaScript

<script>//<![CDATA[
$(function(){
  $('img').attr('src', function(i, src){ return src ? src.replace('s72-c','s640') : src; });
});
//]]></script>

Why Version 2? Cleaner HTML, native dates, and reliable thumbnails. It’s better for long-term maintainability and SEO friendliness.

---

Accessibility & UX Tips

• Tap targets: Keep row padding comfortable (10–12px), so mobile users can tap titles easily.
• Contrast: On dark backgrounds (#262626), ensure white text meets WCAG contrast for readability.
• Focus styles: If your theme strips outlines, add a visible focus for keyboard users (e.g., outline: 2px solid rgba(59,130,246,.5)).
• Heading order: Inside sidebars, <h3> for item titles is safe and semantically clear.

Performance Hints

• Prefer Version 2 for dates: It avoids per-item AJAX.
• Use object-fit: cover: Prevents image distortion while keeping layout tight.
• Limit items: Start with 5–10 popular posts; more can look cluttered and increase load.
• Lazy loading: If your theme supports it, add loading="lazy" on images for non-hero rows.

Styling Variations (Make It Yours)

• Color theme: Swap #262626 with your brand color or a neutral from your palette.
• Rounded corners: Adjust border-radius values (6–10px) to match your site.
• Ranking depth: Extend numeric badges beyond 5 (add CSS :before rules or switch to counters as in Version 2).
• Dark Mode: If your site has Dark Mode, wrap selectors under .nightmode and invert backgrounds/text accordingly.

---

Troubleshooting

• Images look blurry or stretched: Ensure the URL token replaces to a bigger size (e.g., w347-h140-c for hero) and add object-fit: cover for crops.
• Dates don’t show (Version 1): The AJAX selector .published might differ in your theme. Inspect your post page and update the query to match.
• Widget ID mismatch: CSS targets #PopularPosts1. If your gadget renders as #PopularPosts2, update the selector or make it more generic.
• Layout breaks on mobile: Reduce font sizes slightly (e.g., 12–13px for rows) and keep thumbnails at 50×50 for compactness.
• Icons not visible: If using .fa classes, ensure Font Awesome (or your icon set) is loaded in your theme.

---

FAQ

1) Which version should I use?

Version 1 if you want something quick and simple using the existing widget; Version 2 if you want clean markup, native dates, and future-proof control.

2) Can I change the number of posts?

Yes. In the widget settings, change numItemsToShow (e.g., 5–10). Make sure your CSS still looks balanced with the new count.

3) How do I translate dates?

Version 2 uses <data:post.date/>, which respects your blog’s locale. To customize, replace it with your own formatted snippet or show relative time with JS.

4) Does this affect SEO?

Indirectly. Stronger internal discovery keeps readers on site longer. Version 2’s semantic HTML and optimized images are also more crawler-friendly.

5) Can I add snippets under titles?

Yes. Toggle showSnippets to true and style .post-desc. For compact rows, keep snippets short (1 line).

---

Copy-Paste Reference (Quick Blocks)

Version 1 — CSS

#PopularPosts1 .widget-content.popular-posts{margin:auto}
#PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden}
#PopularPosts1 ul li{margin:auto;padding:10px 0;position:relative}
#PopularPosts1 ul li .item-title a{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
#PopularPosts1 ul li:first-child{padding:0;overflow:hidden;min-height:135px}
#PopularPosts1 ul li:first-child .item-thumbnail-only{position:absolute;inset:0;min-height:152px;width:100%}
#PopularPosts1 ul li:first-child .item-thumbnail img{width:100%;height:140px;object-fit:cover;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail-only .item-title{position:absolute;bottom:17px;left:0;right:0;padding:10px 10px 10px 45px;background:linear-gradient(to bottom,rgba(0,0,0,.05) 6%,rgba(0,0,0,.85) 70%);z-index:1}
#PopularPosts1 ul li:nth-child(n+2){background:#262626;color:#fff;border-radius:6px;padding:10px;margin:8px 0}
#PopularPosts1 ul li:nth-child(n+2) .item-thumbnail{float:left;max-width:50px;max-height:50px;margin-right:10px;border-radius:4px;overflow:hidden;padding:1px;border:1px solid rgba(255,255,255,.15)}
#PopularPosts1 ul li:nth-child(n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.8}
#PopularPosts1 ul li:before{float:left;padding:5px 8px;border:1px solid rgba(255,255,255,.25);margin:12px 7px 0 0;border-radius:5px;font-size:12px;color:#fff}
#PopularPosts1 ul li:nth-child(1):before{content:'1';position:absolute;bottom:0;left:10px;z-index:2;border:none;background:#F44336;color:#FFF;padding:10px;border-radius:0;min-height:50px}
#PopularPosts1 ul li:nth-child(2):before{content:'2'}
#PopularPosts1 ul li:nth-child(3):before{content:'3'}
#PopularPosts1 ul li:nth-child(4):before{content:'4'}
#PopularPosts1 ul li:nth-child(5):before{content:'5'}

Version 1 — JavaScript

<script>//<![CDATA[
$(function(){
  $('#PopularPosts1 ul li:first-child .item-thumbnail img').each(function(){
    var src = $(this).attr('src') || '';
    $(this).attr('src', src.replace(/w\d+-h\d+[^/]+/, 'w347-h140-c'));
  });
  $("#PopularPosts1 ul li:nth-child(n+2)").each(function(){
    var $li = $(this), $a = $li.find(".item-title a"), href = $a.attr("href");
    if(!href) return;
    $.ajax({url:href,type:"get"}).done(function(html){
      var dt = $(html).find(".published").first().text().trim();
      if(dt) $a.parent().after('<div class="item-meta"><span class="item-date">'+dt+'</span></div>');
    });
  });
});
//]]></script>

Version 2 — Widget Block

<b:widget id='PopularPosts1' locked='false' title='Popular Anime' type='PopularPosts' version='3' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
    <b:widget-setting name='showThumbnails'>true</b:widget-setting>
    <b:widget-setting name='showSnippets'>false</b:widget-setting>
    <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main' var='this'>... (see full block above) ...</b:includable>
</b:widget>

Where to place in sidebar

<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
  <b:section class='sidebar' id='sidebar'>
    <!-- Put the widget code here -->
  </b:section>
</aside>

---

Conclusion

That’s the Samehada-style Popular Posts, done two ways. If you want the fastest possible setup, start with Version 1 and refine from there. If you’d prefer long-term control with semantic markup and native dates, go straight to Version 2. Either way, you’ll end up with a clean, ranked list that highlights your best content and nudges readers deeper into your site.

Was this helpful? Bookmark this guide, share it with a Blogger friend who loves polishing UI, and subscribe for more hands-on tutorials—Dark Mode, performance wins, and even how to customize scrollbar in Blogger with modern CSS.