Google blogger post new theme Gadget

Google blogger post new theme Gadget

Use it as new gadget and get new looks on webpage without an error.

<b:widget id='HTML15' type='HTML' version='2' locked='false' title='Latest Articles'>

  <b:widget-settings>

    <b:widget-setting name='content'>

        <div class="rp-heading">

          <h2>Latest Articles</h2>

          <p>Explore our latest posts and updates</p>

        </div>

        <div id="rp-container">Loading posts...</div>

        <div id="rp-pagination"></div>

      

    </b:widget-setting>

  </b:widget-settings>

  <b:includable id='main'>

    <div class='widget-content'>

      <style>

        #recent-posts-box {width:100%;max-width:1200px;margin:25px auto;font-family:Arial,sans-serif;box-sizing:border-box}

        #recent-posts-box * {box-sizing:border-box}

        .rp-heading {text-align:center;margin-bottom:25px}

        .rp-heading h2 {font-size:27px;color:#202124;margin:0 0 8px}

        .rp-heading p {color:#777;font-size:14px}

        #rp-container {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

        .rp-card {display:flex;flex-direction:column;text-decoration:none!important;color:inherit!important;background:#fff;border:1px solid #eaeaea;border-radius:14px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.06);transition:.25s;cursor:pointer}

        .rp-card:hover {transform:translateY(-5px);box-shadow:0 9px 25px rgba(0,0,0,.12)}

        .rp-image {width:100%;height:205px;object-fit:cover;display:block;background:#f0f0f0}

        .rp-content {padding:18px;display:flex;flex-direction:column;flex:1}

        .rp-date {font-size:12px;color:#888;margin-bottom:10px}

        .rp-title {color:#222;font-size:18px;line-height:1.45;font-weight:700;margin:0 0 10px}

        .rp-description {color:#666;font-size:14px;line-height:1.65;margin:0}

        #rp-pagination {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:35px 0}

        .rp-page {min-width:42px;height:42px;padding:0 12px;border:1px solid #e5e7eb;border-radius:9px;background:#fff;color:#333;font-size:14px;font-weight:700;cursor:pointer}

        .rp-page:hover {background:#eef2ff;color:#4f46e5}

        .rp-page.active {background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-color:transparent}

        .rp-page:disabled {opacity:.4;cursor:not-allowed}

        .rp-loading,.rp-error {text-align:center;padding:30px;color:#777;grid-column:1/-1}

        @media(max-width:900px) {#rp-container {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}}

        @media(max-width:600px) {#rp-container {grid-template-columns:1fr}.rp-image {height:220px}.rp-heading h2 {font-size:23px}.rp-page {min-width:36px;height:38px;padding:0 9px}}

      </style>

      <script type='text/javascript'>

      //<![CDATA[

      (function() {

        var container = document.getElementById("rp-container");

        var pagination = document.getElementById("rp-pagination");

        if (!container || !pagination) return;

        var currentPage = 1;

        var perPage = 9;

        var totalPages = 1;

        var loading = false;

        function esc(s) {

          return String(s || "").replace(/[&<>"']/g,function(c) {

            return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];

          });

        }

        function plain(s) {

          var d = document.createElement("div");

          d.innerHTML = s || "";

          return (d.textContent || "").replace(/\s+/g," ").trim();

        }

        function imageOf(p) {

          if (p.media$thumbnail) {

            return p.media$thumbnail.url.replace(/\/s72-c\//,"/s600/");

          }

          var html = p.content ? p.content.$t : "";

          var m = html.match(/<img[^>]+src=["']([^"']+)["']/i);

          return m ? m[1] : "";

        }

        function urlOf(p) {

          var links = p.link || [];

          for (var i=0;i<links.length;i++) {

            if (links[i].rel === "alternate") return links[i].href;

          }

          return "#";

        }

        function card(p) {

          var title = p.title ? p.title.$t : "Untitled";

          var html = p.content ? p.content.$t : (p.summary ? p.summary.$t : "");

          var desc = plain(html).substring(0,140);

          if (plain(html).length > 140) desc += "...";

          var date = p.published ? new Date(p.published.$t).toLocaleDateString() : "";

          var img = imageOf(p);

          var a = document.createElement("a");

          a.className = "rp-card";

          a.href = urlOf(p);

          a.innerHTML =

            (img ? '<img class="rp-image" src="' + esc(img) + '" alt="' + esc(title) + '" loading="lazy"/>' : '<div class="rp-image"></div>') +

            '<div class="rp-content"><div class="rp-date">' + esc(date) + '</div>' +

            '<h3 class="rp-title">' + esc(title) + '</h3>' +

            '<p class="rp-description">' + esc(desc) + '</p></div>';

          container.appendChild(a);

        }

        function button(label,page,active,disabled) {

          var b = document.createElement("button");

          b.type = "button";

          b.className = "rp-page" + (active ? " active" : "");

          b.textContent = label;

          b.disabled = disabled;

          b.addEventListener("click",function() {

            if (!disabled) load(page,true);

          });

          pagination.appendChild(b);

        }

        function renderPages() {

          pagination.innerHTML = "";

          if (totalPages <= 1) return;

          button("\u00AB",currentPage-1,false,currentPage===1);

          var start = Math.max(1,currentPage-2);

          var end = Math.min(totalPages,currentPage+2);

          if (start > 1) {

            button("1",1,currentPage===1,false);

            if (start > 2) pagination.appendChild(document.createTextNode("..."));

          }

          for (var i=start;i<=end;i++) {

            button(String(i),i,currentPage===i,false);

          }

          if (end < totalPages) {

            if (end < totalPages-1) pagination.appendChild(document.createTextNode("..."));

            button(String(totalPages),totalPages,currentPage===totalPages,false);

          }

          button("\u00BB",currentPage+1,false,currentPage===totalPages);

        }

        function load(page,scroll) {

          if (loading || page < 1) return;

          loading = true;

          container.innerHTML = '<div class="rp-loading">Loading posts...</div>';

          var start = (page-1)*perPage+1;

          var feedURL = window.location.origin +

            "/feeds/posts/default?alt=json&start-index=" +

            start + "&max-results=" + perPage;

          fetch(feedURL)

            .then(function(r) {

              if (!r.ok) throw new Error("Feed error");

              return r.json();

            })

            .then(function(data) {

              var feed = data.feed;

              var posts = feed.entry || [];

              var total = parseInt(feed.openSearch$totalResults.$t,10) || 0;

              totalPages = Math.ceil(total/perPage);

              currentPage = page;

              container.innerHTML = "";

              posts.forEach(card);

              renderPages();

              if (!posts.length) {

                container.innerHTML = '<div class="rp-error">No posts found.</div>';

                pagination.innerHTML = "";

              }

              if (scroll) {

                var section = document.getElementById("recent-posts-box");

                var top = section.getBoundingClientRect().top + window.pageYOffset - 90;

                window.scrollTo({top:top,behavior:"smooth"});

              }

            })

            .catch(function() {

              container.innerHTML = '<div class="rp-error">Unable to load posts. Check your Blogger feed settings.</div>';

            })

            .finally(function() {

              loading = false;

            });

        }

        window.addEventListener("popstate",function() {

          var page = parseInt(new URLSearchParams(location.search).get("rp-page"),10) || 1;

          load(page,false);

        });

        var initial = parseInt(new URLSearchParams(location.search).get("rp-page"),10) || 1;

        load(initial,false);

      })();

      //]]>

      </script>

    </div>

  </b:includable>

</b:widget>