Using The :Before As Well As :After Pseudo Elements On Sidebar Titles

This is approximately other method of using the :after as well as :before properties as well as it volition run without likewise many problems inwards whatever browser, including IE8. What this fob volition create is to split 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 persuasion of generating Adobe-like Arrow Headers was genuinely discussed past times css-tricks as well as adapted to Blogger.

How to Add Adobe-like Headers to Blogger

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

</head>

Step 2. Just to 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: "";
    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 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, thus 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 only to a higher identify the widgets y'all desire to show... as well as Save the Arrangement.