(Squarespace) How to add a fullwidth black background with blog title, metadata to top of blog post

[tuanphan]

To add a fullwidth black background with blog title, metadata to top of blog post, like this.

You can also use Blog Post Banner Plugin so you can achieve this easier without using complex code.

#1. First, use this code to Code Injection > Footer (or Blog Page Header Injection)

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.blog-item-wrapper')) {
        var topWrapper = document.querySelector('.blog-item-top-wrapper');
        
        if (topWrapper) {
            var bannerHTML = '<section class="page-section page-banner-custom">' + topWrapper.outerHTML + '</section>';
            
            var targetElement = document.querySelector('.blog-item-wrapper');
            
            if (targetElement) {
                targetElement.insertAdjacentHTML('beforebegin', bannerHTML);
                topWrapper.remove();
            }
        }
    }
});
</script>

#2. Use this code to Custom CSS

/* blog fullwidth black banner */
.blog-item-meta-wrapper {
    display: flex;
    align-items: center;
    font-size: 18px;
    flex-wrap: wrap;
    gap: 11px;
}
.blog-item-author-date-wrapper {
    display: flex;
}
.blog-meta-item--date::after, .blog-item-category-wrapper:not(:last-child)::after {
    content: "•";
    padding: 0 0.5em;
}
section.page-section.page-banner-custom {
    background-color: #000;
    padding-bottom: 30px;
}
section.page-section.page-banner-custom * {
    color: #fff;
    text-align: center !important;
    justify-content: center;
}