HubSpot Knowledge Base

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

Written by HubSpot Support | Oct 1, 2015 4:00:00 AM

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.

  • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • Click the name of your blog template. 
  • Click the Blog Content module
  • In the inspector under Post Templates, click Edit post template

  • Paste the following code in the HTML editor after

    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.

    • In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
    • Click the name of your blog template. 
    • Click the Blog Content module
    • In the inspector under Post Templates, click Edit post template

    • Paste the following code in the HTML editor after {{ content.post_body }}:
    <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>
    <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
    {% endif %}
    <p> <a href="{{ content.blog_post_author.website }}" target="_blank">Website</a></p>
    {% endif %}
    • Click Publish changes

    Alternatively, you can add an HTML module to your template from the marketplace:

    • In your HubSpot account, click the Marketplace icon marketplace in the main navigation bar.
    • In the left sidebar menu, use the All products dropdown menu to select Modules.
    • Hover over the HTML Module tile and click View details.
    • Click Get module to add this module to your design manager tool.
    • Return to your blog templates. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
    • Click the + Add tab in the inspector. 
    • Click and drag the HTML module into your template. Ask your designer to add the HTML above for the author bio.
    :
<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="http://knowledgeqa.hs-sites.com/author/hubspot-support">HubSpot Support</a>

<p></p>
<a href="" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook </a>
<a href="" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
<a href="" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter </a>
<a href="?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>

<p> <a href="" target="_blank">Website</a></p>
  • Click Publish changes

Alternatively, you can add an HTML module to your template from the marketplace:

  • In your HubSpot account, click the Marketplace icon marketplace in the main navigation bar.
  • In the left sidebar menu, use the All products dropdown menu to select Modules.
  • Hover over the HTML Module tile and click View details.
  • Click Get module to add this module to your design manager tool.
  • Return to your blog templates. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
  • Click the + Add tab in the inspector. 
  • Click and drag the HTML module into your template. Ask your designer to add the HTML above for the author bio.