In my latest blog makeover, I set up a custom Blogger tab navigation bar:
What’s different about this custom tab navigation? Not all of the tabs are blog pages.
I first discovered custom tab navigation when I was reading Elaine’s blog (which everyone needs to read daily!). I have posts that pertain to different categories when I blog, so being able to have pages that show only those blog categories was ideal. By default, the Blogger Pages widget will create a tab navigation menu for you but you can only specify the different pages that you want in the tabs. If you want to have a tab that links to a blog category or a separate blog url, then you’re out of luck. This is where a custom tab navigation bar comes in.
For this tutorial on creating a custom tab navigation bar, you will need to modify a bit of HTML. But, I promise you I’ll try to keep it as simple as possible.
- I pulled this HTML from Elaine’s blog and have broken down the different components to help explain each section below (please click to enlarge):
You will want to copy / paste this code and modify the links to point to pages and links relevant for your blog:
<div id=”crosscol-wrapper” style=”text-align: center;”>
<div class=”crosscol section” id=”crosscol”>
<div class=”widget html” id=”html3″>
<h2> <a href=”http://cutenlittle.wpengine.com/p/about.html”>About </a> </h2>
<h2> <a href=”http://cutenlittle.wpengine.com/search/label/ootd”>Outfits </a> </h2>
- Paste in your modified HTML code into the popup dialog, leaving the Title field blank. Then click Save and close out of the configuration dialog.
- Now just drag that gadget to the top of the blog layout so that it will appear at the top of your blog:
- That’s it! Now just save your work and check to make sure that the tab shows up correctly on the blog! 🙂
Feel free to leave comments and ask questions. Hopefully this tutorial will be helpful for those out there looking to create your own custom Blogger tab navigation options!