Using The :Before Too :After Pseudo Elements On Sidebar Titles

This is around other method of using the :after as well as :before properties as well as it volition hold upward without likewise many problems inwards whatsoever browser, including IE8. What this describe a fast ane on volition create is to separate the header bar into left as well as correct sections, where the left volition incorporate an explanatory championship as well as the right, a related link.

The stance of generating Adobe-like Arrow Headers was genuinely discussed yesteryear css-tricks as well as adapted to Blogger.

How to Add Adobe-like Headers to Blogger

Step 1. Log inwards to your Blogger dashboard > become to Template > Edit HTML, hence click anywhere within the code surface area to search - using the CTRL + F keys - for the next tag:

</head>

Step 2. Just inwards a higher identify it, re-create as well as 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 become to Layout and Add a novel HTML/JavaScript Gadget with ane 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 as well as Blue, Yellow, Green and Red with the text on the right, hence add together a Link URL to it.
Step 5. After y'all saved the HTML/Javascript gadgets containing the codes above, drag as well as drib them merely inwards a higher identify the widgets y'all desire to show... as well as Save the Arrangement.

DEMO

You tin come across how the sidebar titles has been replaced amongst around cool header bars on this demo blog.