141 Tabbed Sidebar Navigation for Recent Posts, Labels and Archives
August 06, 2008 /

These past few weeks, many readers have requested a tutorial for tabbed sidebar navigation, including integrated widgets for recent posts, labels and archives. This customization is a useful and stylish method to organize widgets in your sidebar (or other widgetized area of your blog template): it reduces the space used in your sidebar, and offers readers easy access to the information they may need about your blog.

So in this tutorial I will explain the method I use for tabbed navigation in Blogger Buster including all the code and CSS styling so you can customize your own tabbed widget to match the theme of your blog.


About this tutorial

One of the reasons I have delayed writing this article is because of the vast differences between template styles. It is very easy to install and use tabbed sidebar navigation, but may be much more complicated to make this match the style of your own template.

For this reason, I will explain the style code I use for the tabbed widgets in Blogger Buster, along with methods you could use to change the appearance for your own blog.

If you experience problems styling the widgets to match your own template, please refer to the forum thread for this article where it is easier to offer and receive support.


Step One: Back-up Your Template!

When customizing your Blogger template, it is standard practice to back up your existing template first! This ensures you can revert back to your working template if you make a mistake. It is especially important with this customization as you may not notice such mistakes when previewing your design.

To back-up your Blogger template, go to Layout>Edit HTML and click on the "Download full template" link near the top of the page.

You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.


Step Two: Adding CSS Code

For this initial step of installing tabbed sidebar navigation, we will add the relevant style code. With this in place, it will be easier to see how your tabs will work.

To add this style code, find the closing </b:skin> tag in your template's HTML code.

Just BEFORE this line, paste the following section of code:


div.domtab{
    padding:0;
    width:100%;
    font-size:90%;
    }
ul.domtabs{
    float:left;
    width:100%;
    margin:0;   
    list-style:none;       
    padding-left: 0;   
    }
ul.domtabs li{
    float:left;
    padding:0 5px 0 0;
    text-align: center;
    width: 110px;
    }
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover{
    padding:.5em 1em 0;
    display:block;
    background:#999;
    color: #333;
    height:2em;
    font-weight:bold;
    text-decoration:none;
    }
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover{
    height:auto;
    min-height:2em;
    }
ul.domtabs a:hover{
    background:background:#ccc;
    }
div.domtab div{
    clear:both;
    width:auto;
    color:#ddd;
    padding:0 5px;
    margin: 0 0 1em 0;
    }
div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content {
    margin: 0 0 0;
    padding: 0;
    }
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover{
    background:#ccc;
    color: #333;
    }
div.domtab div .sidebar-tab ul li {
    list-style: none;
    padding: 3px 0 5px 0;
    }
div.domtab div .sidebar-tab ul li a {
    list-style: none;    
    margin: 0;
    padding: 0;
    }
div.domtab div .sidebar-tab ul {
    width: 100%;
    margin: 0;
    padding: 0;
    }
#domtabprintview{
    float:right;
    padding-right:1em;
    text-align:right;
    }
#domtabprintview a:link,
#domtabprintview a:visited,
#domtabprintview a:active,
#domtabprintview a:hover{
    color:#ccc;
    }
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active{
    color:$linkcolor;
    padding:1em .5em;
    font:bodyfont;
    text-decoration: none;
    }
div.domtab div h2 a,
div.domtab div h2 a:hover,
div.domtab div h2 a:active{
    color:#cfc;
    display:inline;
    padding:0;
    font-weight:normal;
    font-size:1em;
    }

body#layout #sidebar-tabs-1 .widget,
body#layout #sidebar-tabs-2 .widget,
body#layout #sidebar-tabs-3 .widget {
    display: block; clear: both;
    }
div.domtab div {display: block; clear: both;}

Be sure to copy all of the code inside this box before you paste this into your template.


Step Two: Add JavaScript Code to the Head Section of your Template

The tabbed navigation requires JavaScript to switch between the different widget areas. To add this functionality to your template, locate the closing </head> tag in your template, and paste the following lines of code immedietly before this line:


<!--[if gt IE 6]>
    <style type="text/css">
        html>body ul.domtabs a:link,
        html>body ul.domtabs a:visited,
        html>body ul.domtabs a:active,
        html>body ul.domtabs a:hover{
            height:3em;
        }
    </style>
<![endif]-->
    <script src='http://bloggerbuster.com/scripts/domtab/domtab.js' type='text/javascript'/>

If you prefer to host the JavaScript required for this customization on your own server, feel free to download the script and alter the tags above to reflect the location on your own server.

Save your template at this point.


Step Four: Add The Required Code to your Sidebar

For this step, you will need to find the opening DIV tag for your sidebar.

In most Blogger templates, this tag will appear like this (highlighted in red):


      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar-top-section' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Subscribe' type='HTML'>

However, you may need to be creative! In some templates, the sidebar section is coded like these examples, or possibly something else entirely!
  • <div id='sidebar>
  • <div id='right-column'>
Whatever the opening DIV for your sidebar section appears like, you need to paste the following section of code immedietly after it, and before the opening <b:section> tag:


<div class='domtab'>
    <ul class='domtabs'>
        <li><a href='#recent'>Recent Posts</a></li>
        <li><a href='#cats'>Categories</a></li>
        <li><a href='#arc'>Archives</a></li>

    </ul>
    <div style='border: 3px solid #ccc;'>
        <p><a id='recent' name='recent'> </a><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='Feed99' locked='false' title='' type='Feed'>
<b:includable id='main'>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <b:loop values='data:feedData.items' var='i'>
        <li class='sidebar-list'>
          <span class='item-title'>
            <a expr:href='data:i.alternate.href'>
              <data:i.title/>
            </a>
          </span>
          <b:if cond='data:showItemDate'>
            <b:if cond='data:i.str_published != ""'>
              <span class='item-date'>
                 - <data:i.str_published/>
              </span>
            </b:if>
          </b:if>
          <b:if cond='data:showItemAuthor'>
            <b:if cond='data:i.author != ""'>
              <span class='item-author'>
                 - <data:i.author/>
              </span>
            </b:if>
          </b:if>
        </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>
</b:section></p>

    </div>
    <div style='border: 3px solid #ccc;'>
        <p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li class='sidebar-list'>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section></p>
    </div>
    <div style='border: 3px solid #ccc;'>
<p><a id='what' name='arc'/>
        <a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive99' locked='false' title='' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='flat' var='data'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='"archivedate " + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == "expanded"'>
    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +       "&dir=close&toggle=" + data:interval.toggleId +       "&toggleopen=" + data:toggleopen'>
        <span class='zippy toggle-open'>▼ </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +         "&dir=open&toggle=" + data:interval.toggleId +         "&toggleopen=" + data:toggleopen'>
          <span class='zippy'>
            <b:if cond='data:blog.languageDirection == "rtl"'>
              ◄
            <b:else/>
              ►
            </b:if>
          </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>
</b:section></p>
    </div>

</div>

Again, be sure to copy all of the code in the scrolling box above before pasting this into your template.

To help anyone who has experienced the "Your template could not be parsed" error when trying to copy and paste this code, I have copied all the above to a text file which you can download here. I hope this will help solve these problems for you!

Now, preview your template. If you have made any errors when copying and pasting the code, you will be unable to preview your template. In this case, click on the "Clear edits" button near the bottom of the page and begin again, ensuring you have copied all of the code from the box above. Be sure you paste your code between the opening DIV tag for your sidebar and the opening b:section tag.

If your installation is successful, you will see a tabbed section above your regular sidebar widgets. As you are previewing your template, the initial section will be blank. This is the Feed widget where we can add the URL for your blog feed to display these recent posts. In this instance, save your template so we can add the recent posts and perhaps change some style elements for your tabbed widget area.


Step Five: Add the Feed URL for Recent Posts

Once you have successfully installed the tabbed navigation code and saved your template, it's time to add the URL to your blog feed. This will enable you to display recent posts in the first tabbed section.

Go to Layout>Page Elements in your Blogger dashboard and look out for the new widget section which should appear like this:


Click on the "Edit" link, and add the URL to your blog feed in the pop-up window:

Choose how many items to display, and then click save. This will add your recent posts to your tabbed sidebar navigation widget.

Note: It is not possible to drag and drop the Feed, Label or Archive elements for your tabbed widget on the Page Elements page. These elements appear stacked on top of each other, and cannot be moved separately; this is also why the Feed widget looks different to other page elements on this page.


At the moment, this is a bug of the tabbed widget. Despite many attempts, I have been unable to prevent these widgets from stacking on top of one another, and it is impossible to edit the Archive and Label widgets on this page. If anyone can figure out a solution, I would be very glad to hear from you!


Step Six: Customizing the Appearance of your Tabbed Widgets

Depending on the template you are using, this may be the most complicated step of installation!

The default style code I have offered in this tutorial will be suitable for pale templates with a wide sidebar. If you have a narrow sidebar or different color scheme, you will almost certainly need to change some elements of the style!

Here are the most prominent style issues, and what you can do to resolve them:


The tabs appear on top of each other

This will happen if the combined width of your tabs is wider than the width of the sidebar area.

To alter this, you will need to change the width for the tabs. Here is the section of code you need to change:


ul.domtabs li{
    float:left;
    padding:0 5px 0 0;
    text-align: center;
    width: 110px;
    }

Reduce the width to a smaller pixel value. For example, if your sidebar is 200px wide, change the tab width to 60px. Then the combined width of the three tabs will equal 180px and allow for space between them.


Changing the color of borders and tabs

In the code for this tutorial, I have used two shades of grey for the border and tab colors:
  • #ccc is the paler grey
  • #999 is the slightly darker shade
Using your browser's search function, you can locate all instances of these colors in the style section of your template and replace these with the hex values for your preferred colors instead.


Over to you!

As I mentioned at the beginning of this tutorial, different template designs may require different methods for customizing the appearance of your tabbed widgets. To offer support, I have created a thread in the Blogger Buster forums specifically for help with this tutorial.

If you need help customizing your widget, please post your questions there with some details of the template you are using or a link to your blog. It's much easier for me to post code on the forums than in comments, and also provides a means for others to locate solutions of they are using a similar template style.


I hope this tutorial has provided a good explanation of how to install tabbed navigation in your Blogger template! Please feel free to leave your comments and opinions about this tutorial, or if you have suggestions for how this may be enhanced.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

141 comments:

  1. Already added!

    Even before you posted the tutorial. :P I guess I'm just too curious.

    ;)

    ReplyDelete
  2. Thank you about this tutorial. Great!

    ReplyDelete
  3. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "action" must end with the ';' delimiter.

    ReplyDelete
  4. I've been looking for this. However, it looks so complicated. I'd better take extra care in installing this. Thanks.

    ReplyDelete
  5. Instead of Categories or Archives, can I make a tab where I can manually input data like 'Recommended Posts'?

    ReplyDelete
  6. Getting this error again and again !!

    "XML error message: The reference to entity "action" must end with the ';' delimiter."

    ReplyDelete
  7. For Gagan and Danie: I'm wondering if I need to escape more of the HTML tags in the code above... It seems to look fine as I view this now, but if you are both receiving this same error, I can only imagine this is the problem.

    To help you, I will add the required code to a text file (which you can copy and paste) and will link to this shortly.

    My apologies that this has not worked for you so far!

    ReplyDelete
  8. I've uploaded the text file now and have linked to this below the code in the post. Hope this will be helpful for you!

    @Monaco: It is possible but the method may be quite different.

    From the top of my head, I would suggest installing the tabbed widgets as described above. Then create your widget (text or HTML/JavaScript) in a different section, adding whatever code you need to display.

    Then go back to the Edit HTML page and do not click the "Expand widget templates" box.

    Cut the line of code for your new widget, and replace the line for your archives/categories with this line (from your clipboard).

    You would also need to edit the title which appears in the tab.

    I can post code to help you in the forum if this may be helpful for you?

    ReplyDelete
  9. Thanks. I'm gonna give it a try. :)

    ReplyDelete
  10. Everything ok. But the tabs are not horizontal! They appear vertically! :(

    ReplyDelete
  11. @রাশেদ I see the problem in your blog, but can't locate anything which could cause conflict with the CSS...

    Perhaps the solution for you may be to use inline CSS for the three tabs, like this:

    <li style="width: 90px; margin-right: 3px;"><a href='#recent'>Recent Posts</a></li>
    <li style="width: 90px; margin-right: 3px;"><a href='#cats'>Categories</a></li>
    <li style="width: 90px; margin-right: 3px;"><a href='#arc'>Archives</a></li>

    Hope this helps!

    ReplyDelete
  12. Not working. But, width changed this time. I checked after removing ul.domtabs li portion of code. It's samne for me! What a bad luck! :(

    ReplyDelete
  13. I'm getting the same error just the same..I'm even having problems with (") when editing my Html..I have to change (") with (")..

    I'm receiving this error all the time:
    XML error message: The reference to entity "action" must end with the ';' delimiter.

    ReplyDelete
  14. ...I have to change (") with (& quot ;)...

    Gee sorry for the correction..I've noticed that when I type the whole thing together it shows the same (").

    Same Bobby

    ReplyDelete
  15. Thank you so much! I'm going to try to install this over the weekend, I've got 20 pounds of blueberries begging to be made into jam and they will certainly rot if I get sucked into tweaking my blog today :)

    ReplyDelete
  16. not working for me.... dang.

    ReplyDelete
  17. Help us Amanda! help! i really want this tab.

    Holla @ yo boy.
    lol

    ReplyDelete
  18. The link to download the txt file says forbidden

    ReplyDelete
  19. this is what i get:

    We were unable to save your template
    Please correct the error below, and submit your template again.
    Invalid variable declaration in page skin: Variable is used but not defined. Input: linkcolor

    ReplyDelete
  20. @Renee u gota register for Amandas' FORUM!

    ReplyDelete
  21. I tried on Butterfly (Vector Three Column) by Blogger Tricks template. Still have the same issue. Tabs are vertical! :(

    ReplyDelete
  22. People who are having problems with the tabs position, you should paste the "list" (the one below) in ONE LINE.

    <ul class='domtabs'> <li><a href='#recent'>Recent Posts</a></li> <li><a href='#cats'>Categories</a></li> <li><a href='#arc'>Archives</a></li> </ul>

    :P

    ReplyDelete
  23. @ Fernandooo1...Doesn't work for me. :(

    ReplyDelete
  24. Rashed, I just checked your template and they're not in the same line.

    ReplyDelete
  25. @ Fernando...Ok. I'm checking again. :) Thanks for informing.

    ReplyDelete
  26. @ Fernando...I copied ur code and pasted it. Still same problem. :((

    ReplyDelete
  27. @Rashed: I just took a look at your blog now. My initial thought was that the list items are using "display:block" (the default CSS setting which makes them display beneath each other).

    Instead we need to change this to "display:inline" to make the tabs appear side by side.

    Find this section in your b:skin area and add the line in bold:

    ul.domtabs li{
    float:left;
    display:inline;
    padding:0 5px 0 0;
    text-align: center;
    width: 110px;
    }

    This should ensure the tabs appear beside each other, rather than on top of each other.

    If this doesn't work, send me your template code in an email (or post on the forums) and I'll try to debug this in a test blog for you.

    @Fernandooo1: Thank you for helping out here and in the forums :)) It's great to know you managed to figure this one out, and I really appreciate your help.

    ReplyDelete
  28. Thanks Amanda. I tried that with the great help og Fernando. But, still same problem. :((

    I will post it in the forum. Thanks again. :)

    Fernando is now taking a look at the template. He is a nice guy. :)

    ReplyDelete
  29. I get this weird error after step 1 or 2 :
    "Invalid variable declaration in page skin: Variable is used but not defined. Input: linkcolor"

    Any ideas ? Thanks !

    ReplyDelete
  30. U may try deleting the following pottion.

    div.domtab div a:link,
    div.domtab div a:visited,
    div.domtab div a:active{
    color:$linkcolor;
    padding:1em .5em;
    font:bodyfont;
    text-decoration: none;
    }
    ----

    I had the same problem. I forgot how i fixed it, probably changed the position of the whole pasted code of step 2.

    ReplyDelete
  31. Can't get it to work. Solved the other problems except the vertical tabs.

    ReplyDelete
  32. Hi Amanda,

    I've just posy a thread at the forum. Can u please get back to me asap. Thanks

    ReplyDelete
  33. @ Monaco... Try the following code. Amanda suggested me to do so and it worked for me.

    < ul class='domtabs'>< li style='width: 80px; margin-right: 3px; display: inline;'>Recent Posts< /li> < li style='width: 80px; margin-right: 3px; display: inline;'>Categories< /li> < li style='width: 80px; margin-right: 3px; display: inline;'>Archives< /li> < /ul>
    ---------------


    Or,


    < ul class='domtabs'>< li display: inline;'>Recent Posts< /li> < li display: inline;'>Categories< /li> < li display: inline;'>Archives< /li> < /ul>



    ----

    Exclude the space before ul and li

    ReplyDelete
  34. Ops! Dont follow teh "or" potrion. The code is not right. :(

    ReplyDelete
  35. Monaco:

    }
    div.domtab div a:link,
    div.domtab div a:visited,
    div.domtab div a:active{
    color:$linkcolor;
    padding:1em .5em;
    font:bodyfont;
    text-decoration: none;
    }

    you need to delete - $linkcolor - and put a hex decimal number in it's place, worked on first try for me.

    The problem you are having with the width could be a combination of numbers:

    div.domtab{
    padding:0;
    width:98%;
    font-size:90%;
    }
    ul.domtabs{
    float:left;
    width:100%;
    margin:0;
    list-style:none;
    padding-left: 0;
    }
    ul.domtabs li{
    float:left;
    padding:0 5px 0 0;
    text-align: center;
    width: 98px;
    }
    I messed around with all 3 of these until I found the combination that worked best. Try different ones and just preview your template, don't save it until you like what you see

    ReplyDelete
  36. Hi,

    I am so eager to try this. Step 3 is missing from teh instructions and Code for tabbed widget in sidebar (TXT file) won't open. Any advice?

    Thanks.

    ReplyDelete
  37. Probably u need to register in the forum. Then u can try again to download the file.

    ReplyDelete
  38. Hi Amanda, Can I translate this tutorial into my language with proper acknolwdgements to you?

    ReplyDelete
  39. dear amanda.

    big thumbs up for the tutorial on great features above. been waiting for days for u to post this.

    i post this on my blog but the navigation is taking the size of content-wrapper (if not mistaken) so it cover the whole page.

    can u sort this out. or anyone?

    thanks in advance. u r great amanda. :)

    ReplyDelete
  40. sorry for double posting.
    tried to post on forum but nothing happen.

    problem moved to my test blog.

    http://ikmalsays-test.blogspot.com/

    thanks in advance

    ReplyDelete
  41. Hi Amanda. I've been following your posts for some time now because I find them very useful in improving my blog.

    Anyway, I used the instructions you posted on 26 November 2007 entitled, "A tabbed navigation widget for your blog (version 1)". It works great on my blog.

    Now I see that you have a totally new instruction which is different from the first article. I was wondering if there is a way to synchronize both of them?

    Also, I don't want to make any BIG changes after I applied your 26 Nov 2007 tutorial. I just wanted to know how to add the 'archive' script to my existing sidebar tab widget (Tab 3)? What codes do I need to copy from my HTML template to make it work?

    Cheers!

    ReplyDelete
  42. I've tried registering twice for this wonderful blog so that I can download the .txt file. However, I haven't received my confirmation email and password. Any help?

    Kyle Bigler
    ksbigler@comcast.net

    ReplyDelete
  43. I was use this tips in my blog but the tab is not match for what I need... maybe it's because something else is not right... I'l try it next time...

    ReplyDelete
  44. Thank you, thank you. I love this! Had to edit my categories a bit so the list wasn't so long, but it is wonderful. :)

    ReplyDelete
  45. Same problem as someone above:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "action" must end with the ';' delimiter.


    And i cannot open the .txt file you posted, I guess i dont have permission

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. I do not know why people are complaining. I followed the instructions and it is working perfectly for me. And I am just a newbie in these matters who started blogging just two months ago.

    Great tutorials, Amanda.Highly apreciated.

    ReplyDelete
  48. Sorry Amanda, i'm putting my question here. I tried to submit it in the forum for some 4-5 times but i was unable to post.So here it is---

    I have an in built tabbed widget in the template of my http://sandarshan.blogspot.com blog but above the post title on main page, not in the sidebar.

    Some how I managed to change the widget's tabs' titles in my language as per my requirments. But the tabs are not working. I don't know how to link these tabs with a Url.

    ReplyDelete
  49. Hi! Amanda.
    I made it on my blog and it is working. But I am not able to exchange tabs' title colours. How and where I can. Can you help pls?
    Thanks.

    ReplyDelete
  50. can't save template. It says; "Invalid variable declaration in page skin: Variable is used but not defined. Input: linkcolor"

    thanks Amanda..

    ReplyDelete
  51. Invalid variable declaration in page skin: Variable is used but not defined. Input: linkcolor



    i m geting this error

    ReplyDelete
  52. @ Ritesh...

    Anonymous said...

    Monaco:

    }
    div.domtab div a:link,
    div.domtab div a:visited,
    div.domtab div a:active{
    color:$linkcolor;
    padding:1em .5em;
    font:bodyfont;
    text-decoration: none;
    }

    you need to delete - $linkcolor - and put a hex decimal number in it's place, worked on first try for me.

    ReplyDelete
  53. This comment has been removed by the author.

    ReplyDelete
  54. why this script its not faster than yoy tab?

    My script show all, and in a few moments fit the three tabs in one.

    Any solution?

    ReplyDelete
  55. it is giving error
    Invalid variable declaration in page skin: Variable is used but not defined. Input: linkcolor

    ReplyDelete
  56. This comment has been removed by the author.

    ReplyDelete
  57. sorry, but if i want to add other tab? a totaly of 4 tabs? i try put not work who a tab, work who another independet widget.

    help please

    ReplyDelete
  58. I tried to add the tabs and everything went fine until I got to step 4.I also got the "action" error but when I try to go to the download you provided it told me it was restricted.What do I do now? Oh by the way I used your super custom on my page and I want to say i love it. I also added static pages to it. Thanks for all the wonderful tutorial s you have..

    ReplyDelete
  59. hey amanda,im using wp-premium-red blogger template...in it there is already a tabbed sidebar navigation which has search and categories tabs. I want to add archives tab to it .Can you tell me how to do it because the code is different from the one you have given above.
    you can check the template here
    http://rapidshare.com/files/104324015/wp-premium-red-blogger.rar

    please help.Im waiting for your response

    ReplyDelete
  60. hi. first of all thanks to you Amanda for your tabbed tutorial. I've been looking for it for so long.

    to repair the content of the tabbed not to be stacked (open together), I found the solution thanks to http://nettuts.com. The post is here http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/.

    the repair to your CSS code is as below;

    ul.domtabs li{
    float:left;
    padding:0 5px 0 0;
    text-align: center;
    width: 70px;
    display: inline; <----add this line.

    hope it helps.

    ReplyDelete
  61. i am also facing the action delimiter glitch

    ReplyDelete
  62. I already added it 4 months ago....

    Ill be writing a posts on it on

    www.vnoma.blogspot.com

    ReplyDelete
  63. for the linkcolor problem: change linkcolor to linkColor

    ReplyDelete
  64. This comment has been removed by the author.

    ReplyDelete
  65. I am loving this blog Amanda! I've already used loads of the widgets, add-ons, hacks, fixes, etc. And I really want this one! I cannot get it to work just yet though. I'm getting the same error as some other people;

    XML error message: The reference to entity "action" must end with the ';' delimiter.

    It isn't possible to download the .txt file either. So I'm stuck. I'll keep checking back or maybe keep trying.

    ReplyDelete
  66. Thank you very much. Best Wishes!

    ReplyDelete
  67. hi there, I was able to apply this tabbed sidebar to my test blog however, I'm curious enough to know why at some point the tab contents load wrongly; each boxes of the tabbed sidebar appears on top of each other? Is there are way to fix this through css?

    ReplyDelete
  68. Thank you, I have found this Tabbed Sidebar Widget to be very useful. It was a little tricky to reformat some of the values to get the widget to look good on all the major browsers, but I think I have managed to do a good job.

    http://theintrepid.blogspot.com/

    ReplyDelete
  69. hi,
    I am bale to save till the step2 however when i tried to add the step 4 code the following error occured:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "action" must end with the ';' delimiter.

    please let me know how we can go for this?

    http://idledownloads-movies.blogspot.com

    ReplyDelete
  70. Hi Amanda,
    I am a new bloger and I sincerely thank you for the tips and tricks that you provide us through your wonderful blog.

    Until now i didnt face any prob. in using the scripts. But in using the Tapped Sidebar script i get the same error as mentionned by others.

    The reference to entity "action" must end with the ';' delimiter.

    Please kindly guide us.

    ReplyDelete
  71. Hi guys,

    I could fix the probl. (The ref to entity "action" must end with the ...)

    Here it goes:

    You should do some modi in the following section of step 4 code which is located at the end of code:

    1- locate (a class=toggle expr:href=data:widget.....)

    2- Change all (&) to (&). It means there are in total 7 (&) in front of these words (action, dir, toggle).

    Good luck,

    ReplyDelete
  72. Sorry I meant change "&" to "& amp;" (all together)!!

    ReplyDelete
  73. Here in the post 'Tabbed Sidebar Navigation for Recent Posts, Labels and Archives'
    In step 4 I can't access forum by clicking the link ' Code for tabbed widget in sidebar (TXT file)' please send it to me via email .My email is aroshu123@gmail.com -Your posts are really helpful .Hope you'll reply.
    Thanks in advance.

    ReplyDelete
  74. Error message:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The entity name must immediately follow the '&' in the entity reference. I could not get the code either. Something is wrong with the link.

    Please send me the code, any one? I like to have this widget worked. My email is maitramvu@gmail.com
    Thank you

    ReplyDelete
  75. For those that did not have luck, you can try the instruction right here. It worked for me. This side has a link to Amanda 's article here:

    http://www.techflaps.com/2008/08/how-to-add-tabbed-sidebar-navigation.html

    ReplyDelete
  76. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "tempelm.length" must be followed by either attribute specifications, ">" or "/>".

    this message is coming.....

    ReplyDelete
  77. Massoum --

    Thanks for the fix. Changing all "&" to "&
    " did the trick.

    ReplyDelete
  78. Hi Amanda,

    I'm trying to use this on your new halo template. But am stuck with the parsing error. Cant download the txt file either, somehow it wont open. Would you mind emailing it? oneflores atgmaildotcom

    Thanks a lot!

    ReplyDelete
  79. just i searched for labels modification i found this site in search engine. i have to modify my site

    ReplyDelete
  80. Hey Amanda, thank you for having great tutorials here.
    You certainly done a great job.

    However, this particular tutorial didn't work for me too.
    I'm using the typoxp skin.

    And if I don't want in on top of my sidebar?
    What if I want it in the middle?

    ReplyDelete
  81. Is anybody able to help with the problem: XML error message: The reference to entity "action" must end with the ';' delimiter.

    It appears that many others are receiving the same error and it comes from pasting the code given in Step Four.

    This is a great tutorial but it does not work because that last part. And, you can't download the text file or get to the forum for help because they time out and never load.

    Please Help! :)

    ReplyDelete
  82. I am not sure if you got my other message because I don't see it here. I get that error that others are getting and it appears to be in Step 4 and in the action section.

    I tried to download the text file but the page comes up as timed out and the Forum link doesn't work.

    I would be happy to pay someone to set this up for me once and give me instructions so I can then use it on multiple blogs. Please let me know. Thank you

    ReplyDelete
  83. can i take this article for my friends in indonesia?

    ReplyDelete
  84. Massoum's post of 15 October 2008 worked for me (to get rid of that pesky "action" error).

    ReplyDelete
  85. You have one of the best blogs out there for blogger stuff. I have used so much stuff from this blog. Once again I have found another useful page. Thank you.

    DRK

    ReplyDelete
  86. I had TONS of trouble with this but finally figured out part of it. I kept getting the deliminator error code too. You have to remove ALL the "&" symbols and replace it with "amp" with no spaces immediately after. Blogger doesn't like that particular symbol, I guess! This fixed my issue with step 4 but now I'm trying to figure out how to get my tabs to sit side by side instead of on top of each other. So far none of the suggestions are working but, I'll keep at it! Good luck everyone.

    ReplyDelete
  87. it doesnt work good, it display me a 1024 horizontal tab,, sucks a lot

    ReplyDelete
  88. im having problem pasting the 4th step.anyone?
    ive tried massoum's trick, but it fruitless.
    please help,

    ReplyDelete
  89. Hello Amanda and first of all thank you for this tutorial.

    I made it working but my problem is;

    1. Sometimes its OK
    2. Most of the time the Recent, Category and Archive DATA (not the tabs) are stacked on top of each other (everything showed) instead of just showing one at a time depending on the tab clicked.

    So I signed up quickly on mediafire because I thought it might be that there is an "traffic" to your hosted javascript file. But still it did not work.

    I have also seen this problem on this website (your site).

    Can you please give me any ideas on how to fix this?

    Thanks a lot!

    http://techmata.blogspot.com/
    http://pinoyingermany.blogspot.com/

    ReplyDelete
  90. Hello Amanda and thank you for this tutorial.

    I made it working but my problem is;

    1. Sometimes its OK
    2. Most of the time the Recent, Category and Archive DATA (not the tabs) are stacked on top of each other (everything showed) instead of just showing one at a time depending on the tab clicked.

    So I signed up quickly on mediafire because I thought it might be that there is an overload to your hosted javascript file. But still it did not work.

    I have also seen this problem on this website (your site).

    Can you please give me any ideas on how to fix this?

    Thanks a lot!

    ReplyDelete
  91. Hi Amanda,

    I used it on my Tech site and it worked perfectly.
    But I have just a problem:
    1. I downloaded your domtabs.js file
    2. Put the domtabs.js file ony my mediafire.com account
    3. change the URL path for the domtabs.js file on my layout
    4. It is not working.
    5 But it works when I just leave it to http://bloggerbuster.com/scripts/domtab/domtab.js

    Am I missing something?

    Hope you could help me on this.

    Thanks a Lot! ^_^



    http://techmata.blogspot.com/
    http://pinoyingermany.blogspot.com/

    ReplyDelete
  92. is it just me or starting today the whole thing stopped working .... the contents are appearing one under the other

    ReplyDelete
  93. Hi, this was a great script and worked fine until yesterday... but now the content of the tabs appear below each other and not inside the box like it should... is there a way to fix this?

    ReplyDelete
  94. Hi this tutorial worked great until yesterday... now the tabbed content appears one below the other instead of within the tabbed box... is there a way to fix this?

    ReplyDelete
  95. For those who are having issues with the "action", Massoum's post cleared the problem for me as well.

    Here's the correct form to copy & paste (make sure to change the "()" to "<>":

    Part 1:
    (a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen')

    Part 2:
    (a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen')

    -----------------------------------------

    Amanmada, is there any way we could edit the look of the labels and archives page? For example, I want to have my archives listed in a flat-line, but maybe have a bullet in front of each of the months?

    ReplyDelete
  96. Thank SOOOO MUCH!!! I've been trying to figure this out for weeks - and have tried SEVERAL that didn't work -- Yours was a piece of cake - thank you!!! My group of bloggers thanks you as well!
    http://dekalbschoolwatch.blogspot.com/

    ReplyDelete
  97. Amanda, please re-post this:

    http://forum.bloggerbuster.com/topic/support-for-tabbed-sidebar-widget?replies=5&bb_attachments=243&bbat=18

    It's the TXT file, but it's expired...I need it in hurry right now... THANKS! :D

    ReplyDelete
  98. Hi Amanda...thnxx for all d trick but m getting error for dis post...plz help me...

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "action" must end with the ';' delimiter."

    your txt file is also not working...

    plz help me out..

    ReplyDelete
  99. Thanks for the tutorial. I was unable to get step 4 to work. I kept getting this message: Your template could not be parsed as it is not well-formed.

    Instead I went to Layout and pasted the code into an html gadget - works beautifully.

    Have no idea if it will work with feedburner.

    ReplyDelete
  100. This comment has been removed by the author.

    ReplyDelete
  101. Thank you Very much .
    Now my Blog Looks Cool with this Widget
    http://praveenkumarg.blogspot.com

    ReplyDelete
  102. It doesnt work for me...:(

    ReplyDelete
  103. This comment has been removed by the author.

    ReplyDelete
  104. This comment has been removed by the author.

    ReplyDelete
  105. Hi ! Amanda
    In the above note you talked about the stacking of the widgets and editing the archives and labels. So I have got the solution. Plz visit.

    http://www.trickstutor.co.cc/2009/04/tabbed-widget-for-recent-posts-labels_12.html

    All those who are getting errors can also try my method.

    Anonymous said...
    "Have no idea if it will work with feedburner"
    You can use feedburner. Have a look at my post.
    Hope it will help.

    ReplyDelete
  106. I can't get the tabbed text file to work, nor the forum to come up! I always get a load time error. Is your server down or something?

    ReplyDelete
  107. "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "action" must end with the ';' delimiter."

    If you got this problem then I have got solution for that replace "&" with "&" in this code
    NOTE: I am using "[]" in place of"<>" because "<" and ">" are not allowed in comment box.

    [a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen']

    [a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen']

    ReplyDelete
  108. Is this possible in template mode, i mean not as widget? any suggestions, thanks

    ReplyDelete
  109. @amanda you have done great job by giving the above secret!!!

    hope u continue doing so!!!


    hey i am demanding can u teach me how to get movable side menu in blogger like the below blog

    internet-tricks-by-danial.blogspot.com


    i have seen these as an new trend in many blogger blog so wanted for my blog too.

    i have searched a lot but didnt get it any where!

    so can u help me out??

    ReplyDelete
  110. Sorry it seems headache so it's better to google until getting a ready made template with horizontal tabs in it.
    Thanks anyway.

    ReplyDelete
  111. I got an error "The reference to entity "action" must end with the ';'delimiter.
    Can u tell me what's wrong

    ReplyDelete
  112. Tabbed sidebar look interesting. Probably I will try to implent it on my blog.
    Here you can find how to install jQuery multi level drop down menu to blogger.

    ReplyDelete
  113. hi recently i have installed the tab widget and seems i have the same problem with you all, so i try the other resource by zahir shah. the problem with delimiter is gone but the problem turn out to the vertical tab. seems the problem relative from the basic template that we use at the present time. in my case i use minima template that have been modified width to 790 post 430 and sidebar 330

    in case of the vertical tab seems that would not resolved from the code of zahir shah cause the first and second step code not have a big different from amanda code except the third code that simplify a lot. so this is solution from me..

    for the delimiter problem you can use zahir shah code. it's oke to use amanda code for the first and second step cause the problem revealed only at the third step. (delimiter)

    for the vertical tab. i suggest you to change the "recent post" text to just "recent" or you can change the ul domtabs css at the first tab from 110px to less than 110px .. I use 105px value.

    hope this will work ^^ keep da spirit to blog :D

    ReplyDelete
  114. someone else did this for me and each section (label) opens a new tab, how can I change it to just change the main page?

    ReplyDelete
  115. yes i have too problem with this hack Amanda.

    ReplyDelete
  116. Wahoo I finally got this working on my test blog!
    *does happy dances*

    ReplyDelete
  117. too many commentator said "not work" or something else, as new visitor may won't try this script. By the way thank for your post...

    ReplyDelete
  118. I think the file and the javascript for this widget is not working. Is there another way?

    ReplyDelete
  119. Here is a simple fix for the "The reference to entity "action" must end with the ';' delimiter." issue:

    You gotta check the syntax of your xml. This error usually occurs if you have not escaped all characters. In my case was the ampersand symbol (&) the bad guy. Escaping it to "&" fixed the problem.

    Have a good one

    ReplyDelete
  120. http://mobile2downloading.blogspot.com/

    ReplyDelete
  121. There are issues with the last section of code. This doesn't work. I resolved the ";" only to find another issue, and another, and another.

    ReplyDelete
  122. Pandi merdeka u are a king !!!

    I renamed the folowing content from:

    From Recent post to Recent

    and also I resize the width from 110 to 95 ;)

    The Tabs are now horizontal :)) Thank you

    ReplyDelete
  123. thanks! this one I'm looking for.

    ReplyDelete
  124. good post friend! now I can add this tabbed menu into my blog ;)

    ReplyDelete
  125. The post is very nicely written and it contains many useful facts. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement. Thanks for sharing with us.

    ReplyDelete
  126. I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post. Hats off to you! The information that you have provided is very helpful.

    ReplyDelete
  127. I cannot emphasise enough how useful this blog post was for me. I’ve been looking for good info on knickers blog for ages.

    ReplyDelete
  128. My brother recommended I might like this blog. He was totally right. This post truly made my day. You can’t imagine just how much time I had spent for this information! Thanks

    ReplyDelete
  129. Very nice tut :) Thank you.

    ReplyDelete
  130. Really good post! I really love it!

    ReplyDelete
  131. Thank you for writing such a wonderful article!

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy