How to Create Dynamic Label-Wise Sections on Your Blogger

Dhanjee Rider

In today’s blogging world, having a homepage that intelligently showcases content by category not only looks professional — it also helps your users find what they care about faster and boosts important SEO signals, so we made a code which shows label wise post on your blogger website and it can be handled Easyli from layout

How DK Technozone Does It

At DK Technozone, we use a smart JavaScript system that fetches posts from Blogger’s JSON feeds by label and displays them in multiple layouts like these:

Layout Type	Command
Standard Grid	`/grid/6/LabelName`
Big Grid	`/grid2/6/LabelName`
List View	`/list/6/LabelName`
Featured	`/feature/4/LabelName`
Trending	`/trending/6/LabelName`

You simply add these commands inside HTML widgets in your layout, and the script handles the rest — fetching and displaying content without manual editing.

Here’s a simple example for Biography label:

/grid2/6/Biography

This means:
✅ Grid2 layout
✅ 6 posts per load
✅ Only posts labeled Biography will show

This makes your homepage smartly organized by topic, and readers can keep browsing more content they care about

Best 4 styles post layout label wise post widget code

 <b:if cond='data:view.isHomepage'>
  <b:section class='cuatumpost' id='dkbhai' name='Page Body' showaddelement='true'>
   <b:widget id='HTML85' locked='false' title='Biography' type='HTML' visible='true'>
     <b:widget-settings>
       <b:widget-setting name='content'>/grid2/6/Biography</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
   </b:widget>
   <b:widget id='HTML94' locked='false' title='Biography' type='HTML' visible='true'>
     <b:widget-settings>
       <b:widget-setting name='content'>/list/6/Biography</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
   </b:widget>
   <b:widget id='HTML93' locked='false' title='Biography' type='HTML' visible='true'>
     <b:widget-settings>
       <b:widget-setting name='content'>/feature/4/Biography</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
   </b:widget>
   <b:widget id='HTML92' locked='false' title='Biography' type='HTML' visible='true'>
     <b:widget-settings>
       <b:widget-setting name='content'>/trending/6/Biography</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
   </b:widget>
   <b:widget id='HTML19' locked='false' title='Biography' type='HTML' visible='true'>
     <b:widget-settings>
       <b:widget-setting name='content'>/grid/6/Biography</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
   </b:widget>
 </b:section>
           

<script>
//<![CDATA[
(function(){

setTimeout(init,100);

function init(){

  var section = document.getElementById("dkbhai");
  if(!section) return;

  section.querySelectorAll(".widget").forEach(function(widget){

    var content = widget.querySelector(".widget-content");
    if(!content) return;

    var cmd = content.textContent.trim();
    content.innerHTML = ""; // raw text hide

    if(!cmd.startsWith("/")) return;

    var p = cmd.replace(/^\/+/,"").split("/");
    var mode  = p[0];
    var limit = parseInt(p[1],10) || 6;
    var label = p.slice(2).join(" ").replace(/-/g," ").trim();
    if(!label) return;

    content.innerHTML = loader();
    appendShowMore(widget,label);

    var start = 1;
    var busy  = false;

    function load(){
      if(busy) return;
      busy = true;

      var cb = "cb_" + Math.random().toString(36).slice(2);
      window[cb] = function(j){

        // ❌ overwrite mat karo
        if(!j.feed || !j.feed.entry){
          var btn = content.querySelector(".dk-load");
          if(btn) btn.style.display="none";
          busy = false;
          return;
        }

        var wrap = content.querySelector(".dk-wrap");
        var html = render(j.feed.entry);

        if(!wrap){
          content.innerHTML =
            `<div class="dk-wrap row">${html}</div>` +
            (mode!=="trending" ? loadBtn() : "");
        }else{
          wrap.insertAdjacentHTML("beforeend", html);
        }

        start += limit;   // 🔥 SAME COUNT NEXT TIME
        busy = false;
        bindLoadMore();
      };

      var s = document.createElement("script");
      s.src =
        "/feeds/posts/summary/-/" + encodeURIComponent(label) +
        "?alt=json-in-script&start-index=" + start +
        "&max-results=" + limit +
        "&callback=" + cb;

      document.body.appendChild(s);
    }

    function bindLoadMore(){
      var b = content.querySelector(".dk-load");
      if(b) b.onclick = load;
    }

    load();

    /* ---------- RENDER (NO BUTTONS) ---------- */
    function render(items){
      var out = "";

      items.forEach(function(e,i){

        if(mode==="trending" && i>=9) return;

        var img = e.media$thumbnail?.url
          ? e.media$thumbnail.url.replace(/\/s\d+(-c)?/,"/s600")
          : "https://via.placeholder.com/640x360";

        var url   = e.link.find(l=>l.rel==="alternate")?.href || "#";
        var title = e.title.$t;
        var date  = new Date(e.published.$t).toLocaleDateString();

        var cats = (e.category||[])
          .map(c=>`<span class="badge bg-light text-dark me-1">${c.term}</span>`)
          .join("");

        if(mode==="grid") out += gridCard(img,title,url,date,cats);
        else if(mode==="grid2") out += grid2Card(img,title,url,date);
        else if(mode==="list") out += listCard(img,title,url,date,cats);
 else if(mode==="trending") out += trendingCard(i+1,img,title,date);     
else if(mode==="feature") out += featureCard(img,title,url,date);

});

      return out;
    }

    /* ---------- CARD TEMPLATES (NO BUTTONS) ---------- */

function gridCard(i, t, u, d, c){
  return `
  <div class="dk-card-wrap dk-grid">
    <a href="${u}" class="dk-card dk-anim">
      <div class="dk-thumb">
        <img src="${i}" loading="lazy" alt="${t}"/>
      </div>
      <div class="dk-body">
      
        <div class="dk-extra">${c || ""}</div> <span class="dk-date">${d}</span> <h3 class="dk-title">${t}</h3>
        
      </div>
    </a>
  </div>`;
}

function grid2Card(i, t, u, d){
  return `
  <div class="dk-card-wrap">
    <a href="${u}" class="dk-card dk-anim">
      <div class="dk-thumb">
        <img src="${i}" alt="${t}"/>
      </div>
      <div class="dk-body">
       <span class="dk-date">${d}</span> <h3 class="dk-title">${t}</h3>
        
      </div>
    </a>
  </div>`;
}

function listCard(i, t, u, d){
  return `
  <a href="${u}" class="dk-list-card dk-anim">
    <div class="dk-list-thumb">
      <img src="${i}" alt="${t}">
    </div>
    <div class="dk-list-body">
      <h3 class="dk-title">${t}</h3>
      <span class="dk-date">${d}</span>
     
    </div>
  </a>`;
}

function featureCard(i, t, u, d, c){
  return `
  <a href="${u}" class="dk-feature-card">
    <div class="dk-thumb">
      <img src="${i}" alt="${t}">
    </div>
    <div class="dk-feature-body">
     <span class="dk-date">${d}</span>
      <div class="dk-extra">${c || ""}</div><h3>${t}</h3>
      
    </div>
  </a>`;
}

function trendingCard(n, i, t, d){
  return `
  <div class="dk-trending dk-anim">
    <span class="dk-rank">${n}</span>
    <div class="dk-list-thumb">
      <img src="${i}" alt="${t}">
    </div>
    <div class="dk-list-body">
      <h3 class="dk-title">${t}</h3>
      <span class="dk-date">${d}</span>
    </div>
  </div>`;
}

function loader(){
  return `
  <div class="dk-loader">
    <span></span><span></span><span></span>
  </div>`;
}

function loadBtn(){
  return `
  <div class="dk-load-wrap">
    <button class="dk-load-btn dk-load">Load More</button>
  </div>`;
}
    function appendShowMore(w,l){
      var h = w.querySelector("h3.title");
      if(h && !w.querySelector(".dk-more")){
        h.insertAdjacentHTML(
          "afterend",
          `<a class="dk-more ms-2" href="/search/label/${encodeURIComponent(l)}">
            Show more
          </a>`
        );
      }
    }

  });
}

})();
//]]>
</script>
<style>/* --- GLOBAL STYLES (Required for all) --- */
#dkbhai .widget { margin-bottom: 30px; font-family: sans-serif; padding:10px; }
#dkbhai .widget-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
#dkbhai .widget-title h3 { margin: 0; font-size: 1.2rem; text-transform: uppercase; color: #222; }
.dk-more { font-size: 12px; text-decoration: none; color: #007bff; font-weight: bold; }
.dk-load-wrap { text-align: center; margin-top: 20px; width: 100%; }
.dk-load-btn { padding: 11px 25px; background :#111; border:none;box-shadow: 2px 3px 15px #888 inset;

 cursor: pointer; border-radius: 10px; font-size: 13px;color:#fff; transition: 0.3s;font-weight:bold; }
.dk-load-btn:hover {border:none; background: cyan; color: #fff; box-shadow:0px 4px 22px cyan;}
.badge { font-size: 10px; padding:1px 5px;border:.5px solid #ccc; border-radius: 4px; margin-bottom: 5px; display: inline-block; background:rgba(0,0,0,0.3); text-decoration: none; margin-right:4px; }

/* -----------------------------------------------------------
   1. GRID LAYOUT: STANDARD CARD (Used for HTML85)
   Classic image-on-top grid
----------------------------------------------------------- */
#dkbhai .dk-wrap.row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
#dkbhai .dk-card {
    text-decoration: none;
    display: block;
    
    border: 1px solid #f0f0f0;
    transition: 0.3s ease;
}
#HTML85 .dk-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
#HTML85 .dk-thumb { height: 180px; overflow: hidden; }
#HTML85 .dk-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
#HTML85 .dk-card:hover img { transform: scale(1.05); }
#HTML85 .dk-body { padding: 15px; }
#HTML85 .dk-title { font-size: 16px; font-weight: 700; color: #222; margin: 0 0 8px; line-height: 1.4; display: block; }
#HTML85 .dk-date { font-size: 12px; color: #999; }

/* -----------------------------------------------------------
   2. GRID LAYOUT: OVERLAY STYLE (Used for HTML19)
   Text inside the image for a modern look
----------------------------------------------------------- */
#HTML19 .dk-wrap.row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}
#HTML19 .dk-card {
    position: relative;
    aspect-ratio:16/10;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}
#HTML19 .dk-thumb { height: 100%; width: 100%; }
#HTML19 .dk-thumb img { width: 100%; height: 100%; object-fit: cover; }
#HTML19 .dk-body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
}
#HTML19 .dk-title { font-size: 15px; font-weight: 600; color: #fff;  }
#HTML19 .dk-date { font-size: 11px; color: #fff;margin-bottom: 5px }

/* -----------------------------------------------------------
   3. BIG TRENDING LAYOUT (Used for HTML93)
   Large hero-style banner
----------------------------------------------------------- */
#HTML93 .dk-feature-card {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    width:100%; aspect-ratio:16/11;
    text-decoration: none;
}
#HTML93 .dk-thumb { height: 100%; width: 100%; }
#HTML93 .dk-thumb img { width: 100%; height: 100%; object-fit: cover; }
#HTML93 .dk-feature-body {
    position: absolute;
    bottom: 0; padding: 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    width: 100%; box-sizing: border-box;
}
#HTML93 h3 { color: #fff; font-size: 1rem; margin: 0 0 10px; line-height:1.4em;}
#HTML93 .dk-date { color: #fff; font-size: 14px; }

/* -----------------------------------------------------------
   4. STANDARD LIST LAYOUT (Used for HTML94)
   Image on left, text on right
----------------------------------------------------------- */
#HTML94 .dk-list-card {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
}
#HTML94 .dk-list-thumb { width: 120px; height: 90px; flex-shrink: 0; border-radius: 5px; overflow: hidden; }
#HTML94 .dk-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
#HTML94 .dk-list-body { flex: 1; }
#HTML94 .dk-title { font-size: 14px; font-weight: bold; color: #333; margin: 0 0 5px; line-height: 1.3; }
#HTML94 .dk-date { font-size: 12px; color: #000; }

/* -----------------------------------------------------------
   5. NUMBERED TRENDING LAYOUT (Used for HTML92)
   Vertical list with rank numbers
----------------------------------------------------------- */
#HTML92 .dk-trending {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #f9f9f9;
}
#HTML92 .dk-rank {
    font-size: 33px;
    font-weight: 600;
    color: #666; 
    width: 40px;
    text-align: center;
    font-style: italic;
}
/* Color highlights for top 3 positions */
#HTML92 .dk-trending:nth-child(1) .dk-rank { color: #ff4757; }
#HTML92 .dk-trending:nth-child(2) .dk-rank { color: #ffa502; }
#HTML92 .dk-trending:nth-child(3) .dk-rank { color: #2ed573; }
#HTML92 .dk-trending:nth-child(4) .dk-rank { color: #5000ff }
#HTML92 .dk-trending:nth-child(5) .dk-rank { color: #ff4757; }#HTML92 .dk-trending:nth-child(6) .dk-rank { color: #ff9d00; }#HTML92 .dk-trending:nth-child(7) .dk-rank { color: #ff0a00; }#HTML92 .dk-trending:nth-child(8) .dk-rank { color: #ff00b2; }#HTML92 .dk-trending:nth-child(9) .dk-rank { color: #8f00ff; }


#HTML92 .dk-list-thumb { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
#HTML92 .dk-list-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio:16/ }
#HTML92 .dk-title { font-size: 14px; font-weight: 600; color: #333; margin: 0; flex: 1; line-height: 1.3; }
#HTML92 .dk-date { display: none; } /* Hide date for compact trending list */

/* Responsive Adjustments */
@media (max-width: 768px) {
    #HTML93 .dk-feature-card { height: 220px; }
    #HTML93 h2 { font-size: 20px; }
    #HTML94 .dk-list-thumb { width: 128px; height: 75px; }
}</style> </b:if>

See the Pen Label wise post widget code demo for blogger by Dk technozone (@Dktechnozone) on CodePen.

How to use label wise post widget code on your blogger theme

Copy my all code
Go to themes and then edit html from dropdown
Find <main> tag and paste above it Save

Now go to layout open all biography html js widget and add your category name

📈 What This Means for Your Blog

🚀 Better User Engagement
Users don’t have to scroll through unrelated posts — they see categories clearly.

🚀 Improved CTR
More relevant snippets and well-structured sections mean higher chance of clicks from search results and internal navigation.

🚀 SEO-Friendly Structure
Label-based architecture helps search engines understand your content hierarchy, which is always good for visibility.

🚀 Easy to Manage
No complicated plugins, no server-side code — just Blogger labels and JS.

💡 Tips for Best Results

📌 Choose clear, focused labels (e.g., Tech Tips, Coding Guides, Movie Reviews)
📌 Use meaningful featured images for each post

📝 Conclusion

Organizing your homepage with dynamic label-wise sections gives your blog a modern, category-driven look that users and search engines both love. It helps grow organic clicks, engagement time, and overall user satisfaction without heavy coding or APIs.

Last word

In this post we will provided information about How to Create Dynamic Label-Wise Sections on Your Blogger, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller, Blogger, Seo Expert, Wordpress Geek etc. Telegram