Using The :Before In Addition To :After Pseudo Elements On Sidebar Titles
This is to a greater extent than or less other method of using the :after in addition to :before properties in addition to it volition run without equally good many problems inwards whatever browser, including IE8. What this fox volition produce is to split the header bar into left in addition to correct sections, where the left volition incorporate an explanatory championship in addition to the right, a related link.
The sentiment of generating Adobe-like Arrow Headers was genuinely discussed past times css-tricks in addition to adapted to Blogger.
Step 1. Log inwards to your Blogger dashboard > larn to Template > Edit HTML, in addition to thence click anywhere within the code expanse to search - using the CTRL + F keys - for the next tag:
Step 4. Now larn to Layout and Add a novel HTML/JavaScript Gadget with i of the codes below for each of the widget title:
Background inwards blue:
Note: Change "Title in" text amongst your widget's championship in addition to Blue, Yellow, Green and Red with the text on the right, in addition to thence add together a Link URL to it.
Step 5. After you lot saved the HTML/Javascript gadgets containing the codes above, drag in addition to drib them merely inwards a higher identify the widgets you lot desire to show... in addition to Save the Arrangement.
DEMO
You tin run into how the sidebar titles has been replaced amongst to a greater extent than or less cool header bars on this demo blog.
The sentiment of generating Adobe-like Arrow Headers was genuinely discussed past times css-tricks in addition to adapted to Blogger.
How to Add Adobe-like Headers to Blogger
Step 1. Log inwards to your Blogger dashboard > larn to Template > Edit HTML, in addition to thence click anywhere within the code expanse to search - using the CTRL + F keys - for the next tag:
Step 2. Just inwards a higher identify it, re-create in addition to glue this code:
Step 3. Save the Template.
Screenshot:
Step 4. Now larn to Layout and Add a novel HTML/JavaScript Gadget with i of the codes below for each of the widget title:
Background inwards blue:
Background inwards yellow:
Background inwards green:
Background inwards red:
Note: Change "Title in" text amongst your widget's championship in addition to Blue, Yellow, Green and Red with the text on the right, in addition to thence add together a Link URL to it.
Step 5. After you lot saved the HTML/Javascript gadgets containing the codes above, drag in addition to drib them merely inwards a higher identify the widgets you lot desire to show... in addition to Save the Arrangement.
DEMO
You tin run into how the sidebar titles has been replaced amongst to a greater extent than or less cool header bars on this demo blog.
