> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add blog post author

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


![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-how-ai-is-revolutioni_1h8nqdc.png)

# 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**.


![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2566-05-11-at-09221_bg3ijc.png)

# Step 2

Copy this code:

```javascript
<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.


![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1cnelv1.png)

# 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.


![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/scr-25660511-ilqk_8kldks.png)

# Step 5

Copy this code:

```css
<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, and click the save icon.&#32;**

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/screenshot-2025-07-15-133309_55n92a.png)


That's it!