Articles on: Blogs

How to add blog post author

This guide will show you how to add the author of a blog post.

Step 1

Add a Raw HTML section at the end of your blog post. To do this, open the toolbar by pressing tab button and select Raw HTML.

Step 2

Copy this code:

<script>
  const authorImageSrc =
    "https://up-blog-prod.s3.amazonaws.com/avatar 1-ucmwc.png";
  const authorName = "Jane Doe";
  const authorBio =
    "Jane is a software engineer who loves to write about technology.";

  const postAuthorHTML = `
    <img src="${authorImageSrc}" alt="Author" class="post-author__image" />
    <div class="post-author__info">
      <h3 class="post-author__name">${authorName}</h3>
      <div class="post-author__bio">${authorBio}</div>
    </div>
`;

  const postTitleElement = document.querySelector(".post-title");

  const postAuthorElement = document.createElement("div");
  postAuthorElement.classList = "post-author";
  postAuthorElement.innerHTML = postAuthorHTML.trim();
  postTitleElement.insertAdjacentElement("afterend", postAuthorElement);
</script>

Step 3

Paste the copied code in the Raw HTML section.

Step 4

Make sure to include a link to your image, specify the name of the author of the blog post, and provide the author's bio at the start of this code, in places as shown in the screenshot.
It is important to maintain the punctuation exactly as it appears in the code.

Step 5

Copy this code:

<style>
  .blog_post-01 .post-title {
    border: none;
    margin-bottom: 0.5em;
    padding-bottom: 0;
  }
  .post-author {
    display: flex;
    gap: 1.25rem;
    border-bottom: 1px solid #efefef;
    margin-bottom: 30px;
    padding-bottom: 30px;
    align-items: center;
  }
  .post-author__image {
    height: 64px;
    border-radius: 999px;
  }
  .post-author__bio {
    font-size: 14px;
    line-height: 20px;
    opacity: 0.8;
  }
  .post-author__info {
    max-width: 24rem;
  }
  .post-author__name {
    margin: 0 0 0.25rem;
  }
</style>

Step 6

Paste the copied code in Blog > Each blog post <head> custom HTML code

That's it!

Updated on: 18/12/2023

Was this article helpful?

Thank you!