Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties that will work just fine in any browser, including IE8. This hack will split the titlebar into left and right parts, where the left part will contain an explanatory title and the right part will contain the corresponding link.

The idea of ​​generating modified adobe-style headers was discussed by css-tricks and adapted for Blogger.

How to add Adobe-style headers to Blogger

Step 1: Log in to Blogger Dashboard > select Template > Edit HTML, then click anywhere in the code area to find the following tag with CTRL+F:

Step 2. Just above, copy and paste this code:

Step 3. Save the template.

Screenshot:

Step 4: Now go to the layout and add a new HTML/JavaScript widget with one of the following codes for each widget name:

Blue background :

Title in link URL "> Blue

Yellow background :

Title in link URL "> Yellow

Green background :

Title in URL link "> Green

Red background :

Name in URL link "> Red

Note. Replace the title text with the name of the widget and the blue , yellow , green and red text on the right , then add the link URL .
Step 5: After saving the HTML/Javascript widgets containing the above codes, drag them directly onto the widgets you want to display… and save the placement .

DEMONSTRATION

In this demo blog , you can see how the sidebar headers have been replaced with awesome header bars.