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

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. 

?

1 2 3 4 5 6 7 8 9

#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:

?

1 2 3

#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: