Dividing Blogger Pages into Top Tabs and Side Links | Rebecca Baer® Artful Living: Dividing Blogger Pages into Top Tabs and Side Links

27 February 2013

Dividing Blogger Pages into Top Tabs and Side Links

Yes, it can be done!  It took me a while to discover the work-around and it is actually very simple.  All the wisdom of the web (even blogger help) said it couldn't be done. Your pages were either top tabs or side links but not both.  It takes a little back-and-forth, working between the layout widgets and pages, but is very easy to do.  Let's get started!


Fig. 1
In the dashboard select "layout" from the column on the left [Fig. 1].  

You are going to add two widgets. Add the "pages" widget at the top (between the header and blog posts sections). This will become your top tabs. In the sidebar add the "links" widget.
Fig. 2

Create the pages for both areas via the pages link on blogger the dashboard [Fig. 2]. Select "show as top tabs" in the drop down menu.

Go back to the layout [Fig. 1] and select "edit" in the lower right corner of the pages widget.   Now you need to configure your page list.  Under "Pages to show" click the checkbox beside each page that you want to appear in the top tabs.  

Under "Page order" drag and drop to sort the pages in the order you wish them to appear in the top tabs section.   

For the pages you will use as side links make sure the "Pages to show" box is unchecked so these are hidden.  Click "save".  


Return to the pages link [Fig. 2].  Here you will now find your pages that show in the top tabs separated from the hidden pages.  If you don't see the "hidden pages" group scroll down.  You'll find them below the tabs group.  Under the hidden page that you want to display as a sidebar link select "view".  This will open the page in a new window and you can highlight and copy the URL.  For convenience I suggest copying each of the URLs that you will be linking and paste them into a temporary text file so you can add them all to the widget at once.  

Return the the layout [Fig. 1], and select the links widget in the sidebar to configure your links list.  Give the widget a title and select the sorting method.  Paste the URL for the first link in the "New site URL" field.  Name the link with the text you want to see in place of the URL.  Click "Add Link"  Repeat this process until all of your hidden pages have been added to the links list.  Click "Save".  Your links can be further sorted by using multiple links gadgets with different titles.

I have used this process here: ArtisanLifeAndStyle.com  The top tabs are displayed using the "Pages" widget".  "Meet our Artisans" are the hidden pages listed using the "Links" widget.

You may also like Sorting Posts onto Blogger Pages 

14 comments:

  1. If you were presenting this to an audience live. I'd be the first one to stand up and applaud you! Excellent! =D

    ReplyDelete
  2. Thank you! Will be trying this soon. :)

    ReplyDelete
  3. Super excellent and very clear and exactly what I need - you're a genius, thank you!!

    ReplyDelete
  4. Thank you for your generous comments! I'm so glad you find the tutorial helpful.

    ReplyDelete
  5. Thank-you so so much! This was very helpful!

    ReplyDelete
  6. Thanks a lot. This was really helpful. please how did u design your blog? how do i put my previous topics under the pages

    ReplyDelete
  7. To make your previous topics sort onto your pages you will have to edit the old posts and add a label matching your tabs. For example, each of my posts uses at least one of the following labels. Art & Design, Art Licensing, Foodie Finds,Hands On, Made From Scratch, Technical Savvy or Tutorials. If you look at the top of the page you will see that those are the names on my tabs.

    ReplyDelete
  8. i tried it but it's not working

    ReplyDelete
  9. As much as I'd like to help you I am not able. It works on mine so I do not know how to guide you to fix the issue that you are having.

    ReplyDelete
  10. Thanks anyway, you've been a great help. i really appreciate it. will figure it out one way or another.

    ReplyDelete
  11. But i m confused how to new post one by another in tab pages.....like gallery...news....videos..etc.

    ReplyDelete
  12. Thank-you. Exactly the info I needed today!

    ReplyDelete
  13. Thank you, thank you thank you!

    ReplyDelete