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.

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:

</head>

Step 2. Just inwards a higher identify it, re-create in addition to glue this code:

 <style>
.module h2 {
  background-color: #D5D5D5;
  border-radius: 20px 0 0 20px;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px corporation #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: &quot;&quot;;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px corporation transparent;
    border-right: 8px corporation #ffffff;
    border-top: 8px corporation transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px corporation transparent;
    border-top: 6px corporation transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px corporation #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px corporation #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px corporation #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px corporation #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

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:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background inwards yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background inwards green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background inwards red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

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.