Blog. For Companies Who Want to Grow

How to Create Tabbed Posts Navigation for Hubspot COS Blog Sidebar

[fa icon="calendar"] December 15, 2015 - Fred Thompson

Files tabs in file drawer: Tabbed Posts Navigation for Hubspot COS Blog Sidebar

If you’re used to having a blog on WordPress, you’re accustomed to allowing visitors to index your blog posts by parameters such as date, popularity, and by category.

Hubspot’s COS is not only an ultra-powerful web and marketing platform, its ability to add customization is also nearly limitless. Here’s a tutorial on how to add tabbed indexing of blog posts to a sidebar widget—in the growth-driven design circles, this add-on affectionately is called, “Tabber Tabs.” We’re using this code on our website. Just take a look at the sidebar to the right.

1) Download the Code.

Click here for the landing page that links to the the CSS and Hubl code you'll need for this project. You’ll need to copy and paste the code into a Hubl module and into a stylesheet.

After you get the code, paste it into a text editor like Notepad first. This step will make sure the code is “scrubbed” of additional code if somehow the code were to land in a word processor.

The tutorial below should be clear enough if you haven’t had much experience with the Hubspot COS or with manipulating markup code. Just make sure you don’t skip any steps and that you backup your stylesheet as I suggest.

2) Find Your Template

Let's  get started.

  1. In your Hubspot dashboard, click on “Blog.”
  2. Click on “Manage List Template” in the left sidebar.

3) Install a HUBL Module

Image showing tabber in Hubspot COS templateYou now should be viewing your Hubspot COS Design Manager portal (Content > Design Manager) and the template you’re going to modify. Don’t worry too much if you mess something up on your template. You can roll back by clicking the Actions > View revisions.

  1. Find a </> HubL Template module on the left sidebar of the Design Manager.
  2. Drag the module onto your Blog Sidebar.
  3. Click on the module's drop down and click on Edit options.
  4. Paste in all the Hubl code, from the file you download, into the Hubl field.
  5. Click Done in the module.
  6. Click Publish  at the top right to publish your template with changes.

4) Locate Your CSS Stylesheet

Image showing location of Head editing section of Hubspot COS TemplateYou’ll now need to modify the CSS stylesheet to position and style your new module. In Hubspot COS, this can get more involved since there are four main ways to add CSS styles. Let’s try to keep this simple and go with the logic that would have come with your original Hubspot theme. But if the structure of your Hubspot COS website has been modified heavily you still can finish this task but you’ll first need to find the best stylesheet to modify.

  1. Let’s find the CSS stylesheet.
  2. Still within Design Manager blog template, click on the Edit button at the top left.
  3. Click on Edit Head to open that dialog.
  4. If you see a Template Stylesheet, click on that link to open file.
  5. If you don’t see a Template Stylesheet, follow this path:
  6. Go to Content > Content Settings.
  7. Scroll down to the field labeled, Attached Stylesheets.
  8. If you see one, click on it to automatically open it in Design Manager.

5) Paste in the CSS

You should be veiwing the stylesheet in Design Manager. Hit CTRL/F and search for the blog section. It’s not important where you insert the code but it’s always nice to keep an organized stylesheet.

  1. Now, perform another search within the stylesheet, this time for the CSS code to make sure it's not there already. Search for any piece of the code, such as, “tabs.” You don’t want to redundantly paste in the code if it's already there. If you can't find it, proceed.
  2. Before you modify the stylesheet, copy all the text in the stylesheet (CTRL/A) and paste into a text editor and back up the file, saving it as a *.txt file—with that extension.
  3. Hit Enter a few times to open up a little white space to prepare to paste in the styles from our download.
  4. Paste in the CSS code.
  5. Hit Publish Changes.

That’s it! You’re done. If you have trouble, feel free to comment in the form below or contact us. Note that if you have separate templates for blog posts and blog listings you’ll need to add the module (but not the CSS) to the other template.

Your website is your businesses’ most valuable asset. Make it work for you!Get a free Growth-Driven Design Analysis  

Topics: Web Development

Fred Thompson

Written by Fred Thompson

Fred Thompson is the owner of New Destiny Media; Fred loves working side-by-side with business owners to create successful marketing campaigns that grown their business. When Fred is not working, he is spending time with his three very active children at home. He is an avid problem solver (MacGyver), Loves anything Martial Arts related and Social Media gets him excited about work.