CMS Development

kdmeg
HubSpot Employee
HubSpot Employee

Add a custom blog author bio to the bottom of your blog posts

Adding the blog author's bio to the bottom of your blog posts involves changing some HTML within your blog template. If you don't have experience with code, work with a designer to ensure that all edits are made correctly.

 

If you're comfortable working with HTML yourself, you can add the following code to your HTML blog template after the content.post_body tag:

 

<p id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author" >

<span class="hs-author-label">Posted by</span>

<a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a>

{% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img width="35 px" src="{{ content.blog_post_author.avatar }}"> </div> {% endif %}
 <p>{{ content.blog_post_author.bio }}</p>

<a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook </a>

<a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>

<a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter </a>

<p> <a href="{{ content.blog_post_author.website }}" target="_blank">Website</a></p> 

 Alternatively, you can purchase an HTML template from the marketplace and add the code that way. 

2 Replies 2
McKenzie97
Member

Add a custom blog author bio to the bottom of your blog posts

Hi there, 

Thank you for sharing this code. For the code to pull the authour blog bio's information, do we need to input all of the bio's into hubspot first?

 

Thanks,

McKenzie 

0 Upvotes
jennysowyrda
Community Manager
Community Manager

Add a custom blog author bio to the bottom of your blog posts

Thanks for sharing @kdmeg

0 Upvotes