(Squarespace) Author Box with Left (Photo) – Right (Author Name/Post Date)

[tuanphan]

To achieve author box like this. You can follow these steps

#1. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
 
 var $timePublished = $('.dt-published.blog-meta-item.blog-meta-item--date');
 var $authorName = $('.author-name');
 
 $authorName.after($timePublished);
 $('.author-name, .dt-published').wrapAll('<span class="author-right-box"></span>');
 var $authorBox = $('.blog-item-author-profile-wrapper');
 var $blogTitle = $('.blog-item-title');
 
 $blogTitle.after($authorBox);
 
});
</script>

#2. Use this code to Custom CSS.

div.blog-item-author-profile-wrapper>a {
    display: flex;
    align-items: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
}
div.blog-item-author-profile-wrapper time:after {
    display: none;
}
span.author-right-box {
    margin-left: 10px;
}
.blog-item-author-profile-wrapper {
    order: 2;
    margin-top: 0px !important;
}
.blog-item-author-profile-wrapper time {
    text-align: left;
}

#3. Result