Adding Separators (Vertical Lines) Between Pages Links in Blogger Dynamic View

Before

After

The header bar in a Dynamic View template could accommodate several horizontal Pages links as well as external links (before resorting to a drop-down menu when the number of links increases). A couple of users have been wondering if a separator line could be placed in between the links. The answer is yes, and that's what this tutorial is going to be about.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.

#header #pages:before{
border-left: 0px !important;
}
#header .tabs li, .ss{
margin-left:0px !important;
padding-left: 10px !important;
padding-right: 5px !important;
border-left: 1px solid white;
}

Extras

1) To remove the left-most vertical line (to the left of your first link), add the following additional code to your 'Add CSS' box:

#header .tabs li:first-child{
border-left: 0px !important;
}

2) To add an extra vertical line to the right of your last link, add the following additional code to your 'Add CSS' box:

#header .tabs li:last-child{
padding-right:10px !important;
border-right: 1px solid white;
}