Step 1. Add HTML Code

On the left, grab the "Embed Code" element and add it to your Weebly site. Now copy the HTML code below and add it to the "Embed Code" element:

<div class="mostPopular"></div>

Note: Where you add this HTML is where your most popular widget will appear. You can add this HTML code to your Weebly site as many times as you want.

---

​Step 2. Open Weebly's HTML/CSS Editor

At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.

---

Step 3. Add CSS codes

On the left under "STYLES", click on "main.less". On the right, scroll down to your blog's CSS codes. Copy the CSS codes below and add them directly beneath your blog's CSS codes:

/* Most Popular Blog Posts */
.article {
  display: flex;
  margin-bottom: 20px;
}
.article:not(:last-child) {
  margin-bottom: 10px;
}
.articleImage {
  max-width: 55px;
  width: 100%;
  height: 55px;
  margin-right: 10px;
}
.articleImage .wsite-image {
  padding-top: 0px!important;
  padding-bottom: 0px!important;
}
.articleImage a {
  display: flex;
}
.articleImage img {
  height: 55px;
  object-fit: cover;
  border-radius: 50%;
}

---

Step 4. Add jQuery Codes

​On the left under "ASSETS", click on the "custom.js" file. On the right, add the below jQuery code directly beneath "jQuery(function($) {":

​// Most Popular Blog Posts
  var blogPosts = $();
  
  $.get('/blog.html', function(data) {
    var a = $(data).find(".blog-page-nav-previous").length;
    var b = $(data).find(".blog-page-nav-previous a").attr("href");
$(data).find(".blog-post").each(function() {
      var comments = $(this).find(".blog-comments a").html();
  var title = $(this).find(".blog-title a").parent().html();
  var image = $(this).find(".wsite-image").parent().html();
      var commentSplit = comments.split(" ");
  var commentCount = commentSplit[0];
  var commentInteger = parseInt(commentCount);
  blogPosts = blogPosts.add('<div class="article">' + '<div class="articleImage">' + image + '</div>' + '<div class="articleTitle">' + title + '</div>' + '<span class="articleComment">' + commentInteger + '</span>' + '</div>');
    });
    function getMore() {
      if (a == 1) {
        $.get(b, function(data) {
      var c = $(data).find(".blog-page-nav-previous a").length;
      var d = $(data).find(".blog-page-nav-previous a").attr("href");
      $(data).find(".blog-post").each(function() {
            var comments = $(this).find(".blog-comments a").html();
        var title = $(this).find(".blog-title a").parent().html();
        var image = $(this).find(".wsite-image").parent().html();
            var commentSplit = comments.split(" ");
        var commentCount = commentSplit[0];
          var commentInteger = parseInt(commentCount);
        blogPosts = blogPosts.add('<div class="article">' + '<div class="articleImage">' + image + '</div>' + '<div class="articleTitle">' + title + '</div>' + '<span class="articleComment">' + commentInteger + '</span>' + '</div>');
  });
      if (a == c) {
            b = d;
    getMore();
      }
  else {
            blogPosts.sort(function(a, b) {
              var valueA = $(a).find("span").text();
              var valueB = $(b).find("span").text();

              if (valueA < valueB) return 1;
              if (valueA > valueB) return -1;
              return 0;
            });
blogPosts == blogPosts.find(".articleComment").remove();
var articleSlice = blogPosts.slice(0,3);
            $(".mostPopular").empty().append(articleSlice);
$(".article").each(function() {
  var articleLink = $(this).find(".articleTitle a").attr("href");
  $(this).find(".articleImage a").attr('href', articleLink);
});
  }
    });
      }
  else {
    blogPosts.sort(function(a, b) {
          var valueA = $(a).find("span").text();
          var valueB = $(b).find("span").text();
          if (valueA < valueB) return 1;
          if (valueA > valueB) return -1;
          return 0;
        });
        blogPosts == blogPosts.find(".articleComment").remove();
    var articleSlice = blogPosts.slice(0,3);
        $(".mostPopular").empty().append(articleSlice);
$(".article").each(function() {
      var articleLink = $(this).find(".articleTitle a").attr("href");
  $(this).find(".articleImage a").attr('href', articleLink);
});
  }
    }
    getMore();
  });

---

Step 5. Add Blog URL

In the jQuery code you just added in the previous step, add the URL of your blog to the jQuery code as shown below in orange:

​​// Most Popular Blog Posts
  var blogPosts = $();
  
  $.get('/blog.html', function(data) {
    var a = $(data).find(".blog-page-nav-previous").length;
​...

​Click "SAVE".

---

You're done! Publish your site to see your new Most Popular blog posts widget!

---

comments powered by Disqus