Design Category Tabs in Blogger

Design Blog Category TabsHow To Create Your Own Unique Category Tabs

This weeks blog design tip is all about how you can create individual and unique category tabs for your blog instead of just the standardised version that comes with your blog.
I don’t know about you but when I’m visiting a blog the tabs section at the top of the page is one of the first places my eyes go to.
I love to scan the various different topics that the blog is covering.  It also makes navigating the blog much easier when you can just click to the category you want most. Whether it’s “Blogging Tips”, “Recipes” a “Shop” page or a “Media and Advertising” page  you are after, it’s nice to know that these are just a click away.

If you have an “About Me” tab and a “Media Kit”  you want these details easily accessible also.

Step 1 – Design Your Tabs

Decide what theme you want your tab buttons to take.  As you can see with mine, my blog is all about girls and the colour tone of my blog is very “Pink”, hence my tab buttons are too.

Design Blog Category Tabs

I designed mine through Canva, a free photo editing application.

You can import one of your own pictures and edit that to your liking or you can design a picture from scratch.

  • Decide on the size you want your tabs to be, mine are approximately 40mm (width) X 10 mm (height)
  • There are lots of different design options you can use, whether they are small banners like mine or text only. The limit is only your imagination.
  • Save your designs for easy access for the next stage.
Design Blog Category Tabs

Step 2 – Coding and Importing Your Category Tabs into Blogger

Once you have all your tabs designed and saved, import them into “Photo Bucket”.

Design Blog Category Tabs

Now comes the fun part, coding and importing your tabs into your blog.

<a href=”Your Tab Address“><img src=”Your Direct IMG Code from Photobucket“/></a>
  • Copy and paste the above code into a word document, this makes changing the highlighted sections to your details for each tab that much easier.
  • Change the highlighted sections with your own details.
  • Do this for every tab you are creating.
  • Go to the “Layout” section in “Blogger”
  • Click “Add a Gadget” 
  • Select “HTML/JavaScript”
  • Copy and paste your code from your word document into this section
  • Click “Rich Text” just so you can see that your tabs are coming through correctly.
Design Blog Category Tabs

  • Once done, save and move your tabs into your desired position on your blog, whether that be along the top or in your sidebar.
I hope these tips can help you achieve a bit of uniqueness to your blog.
Don’t forget to check out next weeks blogger tip.

If you have any blogging tips of your own please feel free to add it to the following link up.



  1. Susan {ofeverymoment} says

    A helpful post – I LOVE how you provided directions specifically for Blogger. You make it sound like something even I might be able to tackle! Glad I found this post at the #WonderfulWednesdayBlogHop this week!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CommentLuv badge