Step 1. Open Weebly's HTML/CSS Editor

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

---

step 2. Add HTML Coding

On the left under "Partials", click on "blog>post.tpl". On the right, add the following HTML code directly beneath your blog post's main content area:

​<div class="blogTags">Tags: </div>

---

step 3. Add CSS Codes

On the left, under "STYLES", click on "main.less". On the right, scroll down to your blog's CSS code and add the following CSS codes:

/* Blog Tags */
.blogTags {
  margin-bottom: 40px;
  font-size: 13px;
  display: none;
}
.blogTag {
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid #000;
  color: #000;
  text-transform: uppercase;
  margin: 0 5px;
  display: inline-block;
  font-size: 10px;
  border-radius: 5px;
}
.blogTag:hover {
  background: #000;
  color: #fff;
}

---

step 4. Add jQuery Codes

On the left, click on the "+" icon to the right of "ASSETS". Select "New File" and name this file "tags.js". Copy the jQuery code below and paste it into the new "tags.js" file on the right:

jQuery(function($) {

  // Stored Blog Posts on Currently Viewed Page
  var storedCategoryBlogPosts = [];
  var storedCategoryURL = [];
  function nextMove() {
    for (var i = 0; i < storedCategoryBlogPosts.length; i++) {
  var storedCategoryBlogPostsID = '#'+storedCategoryBlogPosts[i];
  var storedCategoryURLStripped = /[^/]*$/.exec(storedCategoryURL)[0].replace("-", " ");
  $(storedCategoryBlogPostsID).find(".blogTags").append('<a href="' + storedCategoryURL + '" class="blogTag">' + storedCategoryURLStripped + '</a>');
  storedCategoryBlogPosts.length = 0;
      storedCategoryURL.length = 0;
  // Show Blog Tags In Blog Posts If Blog Tags Are Present for This Blog Post
  if ($(".blogTag")[0]) {
    $(".wsite-blog-post .blogTags").show();
  }
    }
  }
  // Grab All Categories in the Sidebar
  $(".blog-category-list a:not(:first-child)").each(function() {
    var blogCategories = $(this).attr("href");
$.get(blogCategories, function(data) { // Go to Each Category's Page
  $(data).find(".blog-post").each(function() { // For Each Blog Post on the First Category Page
    var categoryBlogPosts = $(this).attr("id"); // Grab the ID of Each Blog Post on the First Page of Each Category Page
storedCategoryBlogPosts.push(categoryBlogPosts);
storedCategoryURL.push(blogCategories);
var a = $(data).find(".blog-page-nav-previous").length;
var b = $(data).find(".blog-page-nav-previous a").attr("href");
function getPosts() { // Grab the ID of Each Blog Post Beyond the First Page of Each Category Page
          if (a == 1) { // Check If More Than 1 Page Exists
            $.get(b, function(data) {
      $(data).find(".blog-post").each(function() {  // For Each Blog Post Beyond the First Category Page
                var categoryBlogPosts = $(this).attr("id");
storedCategoryBlogPosts.push(categoryBlogPosts);
storedCategoryURL.push(blogCategories);
              });
              var c = $(data).find(".blog-page-nav-previous a").length;
              var d = $(data).find(".blog-page-nav-previous a").attr("href");
              if (a == c) {
                b = d;
                getPosts();
              }  
          else {
    nextMove();
          } 
            });
          }  
      else {
            nextMove();
          }  
        }
        getPosts();
  });
});
  });

});

---

Step 5. Add HTML Script Tag

On the left under "HEADER TYPE", select the first page layout. On the right, scroll all the way to the bottom and add the following HTML script tag, preferably directly after the existing script tag that contains "custom.js":

<script type="text/javascript" src="/files/theme/tags.js"></script>

​Click "SAVE".

---

​You're Done! Publish Your Site To See Your New Blog Tags!

---

comments powered by Disqus