To show Meta Location on Blog Summary Page, next to Category/Date, like this.
#1. First, make sure you entered Location in blog post.
#2. Edit Blog Page > Enable Category + Date
#3. Use this code to Custom CSS
You can also use this free blog tool so you can customize blog easier without using code.
/* blog location */
.blog-location-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;
}
#4. Use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
/* 05-07-2025 */
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.location){var d=c.item.location,e='<span class="blog-meta-delimiter blog-category-delimiter"></span><span class="blog-location-wrapper" style="margin-top:10px;display:block;">';var f=[];d.addressLine1&&f.push(d.addressLine1);d.addressLine2&&f.push(d.addressLine2);d.addressCountry&&f.push(d.addressCountry);e+=f.join(", ");e+="</span>";a.find(".blog-meta-section").append(e)}},error:function(c,d,e){console.log("Error: "+b)}})})});
</script>
