To get Tags appear in Blog Page, next to Category/Date, like this.
#1. First, edit Blog Page > Enable Category + Date
#2. Next, use this code to Custom CSS
/* blog tag */
.blog-tags-wrapper {
font-size: 18px;
font-family: var(--blog-basic-grid-list-meta-font-font-family);
font-style: var(--blog-basic-grid-list-meta-font-font-style);
font-weight: var(--blog-basic-grid-list-meta-font-font-weight);
line-height: var(--blog-basic-grid-list-meta-font-line-height);
letter-spacing: var(--blog-basic-grid-list-meta-font-letter-spacing);
text-transform: var(--blog-basic-grid-list-meta-font-text-transform);
color: #000;
}
.blog-basic-grid--text {
width: 100% !important;
}
#3. Next, use this code to Code Injection > Footer
You can also use this free blog tool so you can customize blog easier without using code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
/* by @tuanphan, email me to get priority support + free install */
jQuery(document).ready(function(){jQuery(".blog-basic-grid--container").each(function(){var a=jQuery(this),b=a.find(".blog-title a").attr("href");b&&jQuery.ajax({url:b+"?format=json",dataType:"json",success:function(c){if(c.item&&c.item.tags&&0<c.item.tags.length){var d=c.item.tags,e='<span class="blog-meta-delimiter blog-category-delimiter"></span><span class="blog-tags-wrapper" style="margin-top:10px;display:block;">';d.forEach(function(f,g){e+='<a href="/blog04-1?tag='+encodeURIComponent(f)+'" class="blog-tag">'+f+"</a>",g<d.length-1&&(e+='<span class="blog-tag-comma">, </span>')});e+="</span>";a.find(".blog-meta-section").append(e)}},error:function(c,d,e){console.log("Error: "+b)}})})});
</script>
